By Hridoy Ahmed | Last updated: October 2026 | 7 min read
Short answer: To optimize images in WordPress without losing quality, resize them to the size they are shown at, choose the right format (WebP or JPEG for photos, PNG or SVG for graphics), compress them, and keep lazy loading on for images below the fold. Do not lazy-load the main image at the top of the page. Add alt text and set width and height to avoid layout jumps.
Why images matter for speed
Images are often the heaviest part of a page. A few huge photos can make a page load slowly, especially on mobile. Slow pages annoy visitors, and the biggest image at the top of a page often decides your Largest Contentful Paint (LCP) score. To learn more, read my guide on how to improve LCP, INP and CLS on WordPress.
Step-by-step: optimize your images
- Resize before you upload. If your content area is about 1200 pixels wide, a 5000-pixel photo is a waste. Resize it to the size it will be shown at, or a little larger for sharp screens.
- Choose the right format.
- JPEG or WebP: photos. WebP is usually smaller at the same quality, and WordPress supports it.
- PNG: images that need a transparent background, or sharp graphics and screenshots.
- SVG: logos and simple icons. They stay sharp at any size.
- AVIF: an even smaller format that newer WordPress versions can use. Check your site and browsers support it.
- Compress the file. Use a plugin or tool that shrinks the file size. Test the quality setting on a few images and look at them at full size. Many photos look fine with moderate compression.
- Keep lazy loading for below-the-fold images. WordPress adds lazy loading to images by default, so images load only when the visitor scrolls near them.
- Do not lazy-load the top image. The main image at the top of a page should load right away. Lazy loading it can make LCP worse.
- Set width and height. This reserves space, so the page does not jump while the image loads. This helps your CLS score.
- Use responsive images. WordPress creates several sizes of each image and serves the right one to each screen. Do not remove this by uploading one giant file to be shrunk with CSS.
- Write alt text and a clear file name. Describe what the image shows in plain words. Use a file name like wordpress-security-scan.jpg, not IMG_4521.jpg.
Bulk-optimize your old images
If your site already has hundreds of heavy images, use an image optimization plugin that can compress and convert them in bulk. Take a full backup first, and test a few pages afterwards.
Check the result
- Run a speed test before and after, and compare page size and LCP
- Look at your biggest images on a phone, to see that they still look sharp
- Make sure caching is on. See my guide on the best caching setup for WordPress
Still slow after fixing images? Images are only one reason. Read why your WordPress site is slow, or see my WordPress speed optimization service.
Common mistakes
- Uploading full-size camera photos
- Over-compressing until images look blurry
- Lazy-loading the main top image
- Using PNG for photos
- Forgetting alt text
- Using a huge image as a small thumbnail
FAQ
What is the best image format for WordPress?
For photos, WebP or JPEG. For logos and icons, SVG. For graphics that need a transparent background, PNG.
Will compressing images reduce quality?
Some compression is invisible to the eye. Too much makes images blurry. Test and look at the result.
Do I need a plugin to optimize images?
Not always. You can resize and compress before uploading. A plugin helps with bulk work and automatic conversion.
How big should an image file be?
There is no single number. Aim for as small as possible while still looking sharp at the size shown. Test the page speed after changes.
Want your site faster, without breaking the design? See my WordPress speed optimization service.
About the author: Hridoy Ahmed is an SEO specialist and WordPress security expert based in Dhaka, Bangladesh. He has 8+ years of experience and works with clients worldwide.