To optimize images for page speed, resize each image to the size it is shown at, compress it, use a modern format such as WebP, lazy-load images below the fold and set width and height so the layout does not jump. Large images are one of the most common causes of a slow page, so this is often the quickest win. Check your pages with our free website speed test.
Key takeaways
- Resize first, compress second. Uploading a huge photo and relying on the browser to shrink it wastes bandwidth.
- WebP files are usually smaller than JPEG or PNG at similar quality.
- Lazy-load images below the fold, but never the main image at the top of the page.
- Set width and height on images to avoid layout shifts (CLS of 0.1 or less is good, Google).
Why do images affect page speed?
Images are often the largest files on a page, so they take the longest to download. They also frequently become the Largest Contentful Paint element, which Google wants to see within 2.5 seconds. Unoptimized images slow loading, hurt your score and cost mobile visitors extra data.
How do you optimize images for page speed?
1. Resize images to the size they are shown at
Check the width your theme displays the image at and resize to that, allowing a little extra for sharp screens. A 4000 pixel photo shown in a 800 pixel column is wasted bandwidth.
2. Compress images
Compression removes data you cannot see. Use a free web app such as Squoosh or an image optimization plugin such as ShortPixel, Imagify or EWWW Image Optimizer. Start with a moderate setting and compare quality.
3. Use WebP
WebP files are usually smaller than JPEG and PNG at similar quality, and WordPress can upload and display them. Many optimization plugins convert images automatically and keep fallbacks.
4. Use the right format
Use JPEG or WebP for photos, PNG or WebP for graphics that need transparency and SVG for logos and simple icons, because SVG scales without losing quality.
5. Lazy-load images below the fold
Lazy loading delays images until the visitor scrolls near them. Do not lazy-load the main image at the top of the page, because that delays your LCP. See how to fix LCP in WordPress.
6. Set width and height
Give every image width and height attributes so the browser reserves space and the layout does not jump while it loads. WordPress adds these automatically for images inserted from the media library.
7. Serve responsive images
WordPress creates several sizes of each upload and adds srcset so phones can load smaller versions. Keep this working by inserting images through the editor and avoiding fixed-size overrides.
8. Use a CDN
A content delivery network serves images from a location near each visitor, which reduces download time.
How do you check whether images are slowing your page?
Run the page through our free page speed checker and look for issues about image size, next-gen formats and offscreen images. Fix those first, then re-test. If the score is still low on mobile, read why mobile scores are lower than desktop.
Frequently asked questions
What is the best image format for page speed?
WebP is usually the best choice for photos and graphics on the web, because the files are smaller at similar quality. Use SVG for logos and icons.
How much should I compress images?
Use the strongest compression that still looks good to you. Compare the original and compressed image at full size before deciding.
Does image optimization improve SEO?
Indirectly. Faster pages help Core Web Vitals and visitor experience, and good file names and alt text help images appear in image search.
Should I lazy-load every image?
No. Lazy-load images below the fold, and load the top image normally.
Do I need a plugin to optimize images?
Not required, but a plugin automates compression and conversion for new and existing images, which saves a lot of time.
Conclusion
Image optimization is often the fastest way to improve page speed: resize, compress, use WebP, lazy-load below the fold and set dimensions. Test the result with our free website speed test and follow our guide on how to improve website speed for the next steps.
