Images are typically the largest files on a WordPress page, often accounting for 50-80% of total page weight. Optimizing them is the single most impactful performance improvement you can make.
1. Choose the Right Format
- WebP — 25-35% smaller than JPEG at same quality. Supported by all modern browsers. The best choice for most images.
- AVIF — Even smaller than WebP (20-30% better), but slower to encode. Growing browser support.
- JPEG — Good for photographs. Use quality 80-85% for a balance of size and quality.
- PNG — Only use for images that need transparency. Much larger than JPEG/WebP.
- SVG — Perfect for logos, icons, and illustrations. Scales without quality loss.
2. Compress Images
Use a plugin to automatically compress images on upload:
- ShortPixel — Lossy and lossless compression, WebP conversion.
- Imagify — Easy to use, by the WP Rocket team.
- Smush — Free bulk compression for up to 50 images at a time.
- EWWW Image Optimizer — Can run locally without API.
3. Serve Properly Sized Images
Don't upload a 4000px image for a 800px container. WordPress creates multiple sizes automatically — make sure your theme uses the appropriate size via srcset and sizes attributes.
4. Enable Lazy Loading
WordPress 5.5+ adds loading="lazy" to images automatically. Ensure your theme doesn't remove this attribute.
5. Add Width and Height Attributes
<img src="photo.jpg" width="800" height="600" loading="lazy" alt="Description" />This prevents Cumulative Layout Shift (CLS) by reserving space before the image loads.
Verify with InspectWP
InspectWP reports the number of images on your page and can help you identify unoptimized images contributing to slow load times.