How to Optimise Images for WordPress — Speed Up Your Website
Images are typically the heaviest assets on a WordPress site, accounting for 40–60% of total page weight. Properly optimised images can cut your page load time in half and dramatically improve your Core Web Vitals scores. Here's how to do it right.
Why WordPress Image Optimisation Matters
WordPress powers over 40% of all websites on the internet. Yet many WordPress sites suffer from slow load times because of unoptimised images. Here's what's at stake:
- SEO rankings. Google uses page speed as a ranking factor. Core Web Vitals (LCP, CLS, INP) are directly affected by image sizes.
- User experience. 53% of mobile visitors leave a page that takes longer than 3 seconds to load.
- Conversion rates. Every 1-second improvement in page load time can increase conversions by up to 7%.
- Hosting costs. Smaller images use less bandwidth, reducing hosting bills for high-traffic sites.
Step 1: Resize Images Before Uploading
One of the most common mistakes is uploading images straight from a camera or phone. A typical DSLR photo is 6000×4000 pixels (24 megapixels), while most WordPress themes display images at 1200px wide or less. That means 80% of the pixel data is wasted.
Rule of thumb: Resize images to 2× the display size for retina screens. If your content area is 800px wide, resize images to 1600px wide maximum.
Use our free Image Resizer to resize images to the exact dimensions you need.
Step 2: Compress Images
After resizing, compress your images to reduce file size without visible quality loss. For web use:
| Image Type | Recommended Quality | Target File Size |
|---|---|---|
| Hero / Banner Images | 80–85% | 100–200 KB |
| Blog Post Images | 75–80% | 50–150 KB |
| Thumbnails | 70–75% | 10–30 KB |
| Background Images | 60–70% | 50–100 KB |
Use our Image Compressor to achieve these targets. Most images can be reduced 60–80% without visible quality loss.
Step 3: Convert to WebP Format
WebP delivers 25–35% smaller files than JPG at the same visual quality. WordPress has supported WebP natively since version 5.8 (2021). Modern browsers (Chrome, Firefox, Safari, Edge) all support WebP.
Use our Image Converter to convert JPG and PNG images to WebP format before uploading.
Step 4: Use Proper WordPress Image Settings
- Set maximum upload dimensions. In Settings → Media, configure the "Large" size to match your theme's content width (typically 1200px).
- Let WordPress generate thumbnails. WordPress automatically creates multiple sizes (thumbnail, medium, large). Don't fight this system — it ensures the right size is served for each context.
- Add alt text to every image. Besides accessibility, alt text is a significant SEO signal. Describe the image content naturally.
- Use descriptive file names. Rename "IMG_4532.jpg" to "chocolate-cake-recipe.jpg" before uploading. Search engines use file names as a relevance signal.
Step 5: Implement Lazy Loading
WordPress adds loading="lazy" to images by default since version 5.5. This means images below the fold aren't loaded until the user scrolls near them, dramatically improving initial page load time.
Important: Make sure your above-the-fold hero image does NOT have lazy loading. WordPress 5.9+ handles this automatically for the first image in content, but verify in your theme.
WordPress Image Optimisation Checklist
- ☐ Resize images to 2× display size maximum (e.g., 1600px for 800px display)
- ☐ Compress all images to 70–85% quality
- ☐ Convert to WebP where possible
- ☐ Add descriptive alt text to every image
- ☐ Use descriptive, hyphenated file names
- ☐ Verify lazy loading is working (images below the fold)
- ☐ Ensure hero/above-the-fold images load immediately (no lazy loading)
- ☐ Set proper width and height attributes to prevent layout shift (CLS)
- ☐ Test with Google PageSpeed Insights after uploading
- ☐ Consider using a CDN for image delivery on high-traffic sites
Recommended Image Sizes for Common WordPress Elements
| Element | Width (px) | Format | Max File Size |
|---|---|---|---|
| Featured Image / Blog Header | 1200–1600 | WebP or JPG | 150 KB |
| In-Content Images | 800–1200 | WebP or JPG | 100 KB |
| Sidebar Images / Widgets | 300–400 | WebP or JPG | 30 KB |
| Logo | 200–400 | SVG or PNG | 20 KB |
| Favicon | 512 (source) | PNG | 10 KB |
| WooCommerce Product | 800–1000 | WebP or JPG | 80 KB |
Common Mistakes That Slow Down WordPress
- Uploading full-resolution camera images (4000×3000+ pixels). Always resize first.
- Using PNG for photographs. PNG is lossless and creates huge files for photos. Use JPG or WebP instead.
- Not specifying width/height attributes. This causes layout shift (CLS), hurting your Core Web Vitals score.
- Using too many images per page. Each HTTP request adds overhead. Be intentional about which images truly add value.
- Ignoring mobile. Serve appropriately sized images for mobile screens using WordPress's
srcsetattribute (automatic with properly uploaded images).
Before and After: Typical Results
Here's what you can typically achieve by following this guide:
| Metric | Before | After |
|---|---|---|
| Average image file size | 800 KB – 3 MB | 50–150 KB |
| Total page weight | 5–10 MB | 1–2 MB |
| Page load time | 4–8 seconds | 1–3 seconds |
| LCP (Largest Contentful Paint) | 4+ seconds | Under 2.5 seconds |
| PageSpeed Insights score | 30–50 | 80–95+ |