WordPress Development
WordPress Image Optimisation: How to Make Your Images Fast Without Losing Quality
Images are the biggest cause of slow WordPress sites. Here is the complete framework for compressing, converting, and serving images at maximum speed without visible quality loss.
Images are almost always the heaviest content on a WordPress page — and the biggest single cause of slow load times. A homepage hero image uploaded at 4MB can delay your Largest Contentful Paint by 3–5 seconds on mobile. Image optimisation is the highest-leverage speed improvement available to most WordPress sites.
Why image optimisation matters for WordPress
| Metric affected | How unoptimised images hurt it | Target |
|---|---|---|
| Largest Contentful Paint (LCP) | Hero image takes too long to load | Under 2.5 seconds |
| Cumulative Layout Shift (CLS) | Images without set dimensions cause layout jumps | Under 0.1 |
| Total page weight | Large images inflate the total data transferred | Under 1MB total for most pages |
| Mobile performance | Mobile connections are slower — large images hit harder | Score 70+ on PageSpeed mobile |
| Bandwidth costs | Large images increase server bandwidth usage | Reduce with compression + CDN |
Step 1 — Choose the right file format
The format you save an image in before uploading to WordPress is the first decision — and it has the biggest impact on file size.
| Format | Best for | Approximate size vs JPEG |
|---|---|---|
| JPEG / JPG | Photographs and complex images with gradients | Baseline |
| PNG | Images with transparency, logos, screenshots | 20–60% larger than JPEG |
| WebP | Everything — modern browsers support it universally | 25–35% smaller than JPEG, 25% smaller than PNG |
| AVIF | Next-gen format — even smaller than WebP | 40–50% smaller than JPEG (limited plugin support in 2026) |
| SVG | Logos, icons, simple graphics | Vector — scales without quality loss, tiny file size |
WebP is supported by all modern browsers and offers 25–35% smaller file sizes than JPEG at equivalent visual quality. Both Smush and ShortPixel convert your existing images to WebP automatically. Start serving WebP and your images get smaller without any change in visual appearance.
Step 2 — Compress images before and after upload
Compression removes unnecessary data from image files without visible quality loss. There are two types:
- Lossless compression — removes metadata and redundant data without changing any pixels. PNG files benefit most. No visible quality change.
- Lossy compression — reduces image quality slightly (at controlled levels) to achieve much larger file size reductions. At 80–85% quality setting, most viewers cannot see the difference.
For WordPress, the practical workflow is:
Never upload a 4000px wide image if your content column is 800px wide. Resize in an editor (Photoshop, GIMP, Squoosh.app) before uploading. WordPress generates multiple sizes from your upload, but the original is also stored — resizing first reduces the stored original size.
Add add_filter('big_image_size_threshold', function(){ return 1200; }); to your child theme’s functions.php. This tells WordPress to automatically downscale any image uploaded larger than 1200px wide, preventing oversized originals from being stored.
Install Smush or ShortPixel. These plugins automatically compress every image you upload and can bulk-optimise your existing media library. Set up once; works silently on every future upload.
Step 3 — Enable WebP conversion
WebP conversion takes your existing JPEG and PNG images and creates WebP copies. WordPress then serves WebP to browsers that support it (all modern browsers) and falls back to the original for older browsers.
Step 4 — Enable lazy loading
Lazy loading tells the browser not to download images that are below the fold until the user scrolls toward them. On a page with 20 images, this means only the first 2–3 images load initially — dramatically reducing initial page weight.
WordPress has native lazy loading built in since version 5.5 — the loading="lazy" attribute is automatically added to all images inserted via the editor. However, images added via CSS backgrounds or custom code do not benefit from native lazy loading.
- Verify native lazy loading is active: view source on any post and check for
loading="lazy"on img tags - For CSS background images, WP Rocket’s ‘Lazy load background images’ setting covers these
- Do not lazy load your LCP image — the hero image or first visible image should load immediately. Add
loading="eager"to your LCP image to override lazy loading for it - Smush Pro adds lazy loading to any image not already covered by WordPress’s native implementation
Step 5 — Set explicit image dimensions
Cumulative Layout Shift (CLS) — when page elements move as images load — is often caused by images without explicit width and height attributes. The browser cannot reserve the correct space without these dimensions, so the layout shifts when the image arrives.
WordPress 5.5+ automatically adds width and height attributes to images inserted via the Gutenberg editor. For images in custom code, page builders, or widget areas, verify the attributes are present by inspecting the HTML source. If they are missing, the Specify Image Dimensions plugin adds them automatically.
Recommended image optimisation workflow
Determine the widest your image will ever display (usually your content column width, typically 800–1200px). Resize to this width before uploading.
Open squoosh.app (free, browser-based). Upload your image, select WebP format, set quality to 80, and compare. Download the compressed WebP if it looks good — this is your upload file.
After installing Smush or ShortPixel, use their bulk optimisation tool to process your existing media library. On a 100-image library this typically reduces total image storage by 30–60%.
In your image plugin settings, enable automatic WebP conversion and serving. Future uploads are automatically converted and served in the optimal format for each browser.
A typical WordPress site reduces total page weight by 40–60% after full image optimisation. Combined with caching, most sites achieve LCP under 2.5 seconds on mobile after completing all steps in this guide.
Need your WordPress site’s images and performance optimised?
Simple Automation Solutions audits and optimises WordPress sites for speed, Core Web Vitals, and image delivery — for businesses worldwide.
Frequently asked questions
Will compressing images visibly reduce their quality on my WordPress site?+
With modern compression tools at 80–85% quality, the difference is imperceptible to the human eye on screen. The quality loss only becomes visible at very high compression ratios (below 60% quality). Both Smush and ShortPixel use intelligent compression algorithms that preserve visual quality while maximising file size reduction. Always compare before and after in the plugin’s interface before bulk processing your library.
How do I convert existing WordPress images to WebP?+
Install Smush or ShortPixel, navigate to the plugin’s settings, and enable WebP conversion. Then run the bulk optimisation tool — it processes your entire media library and creates WebP versions of all existing images. The plugin handles serving the correct format (WebP for supported browsers, original for others) automatically.
Should I delete original images after WebP conversion?+
No — keep the originals. WordPress and image plugins store both the original and the WebP version, serving the appropriate format per browser. If you delete originals, you lose the fallback for older browsers and the ability to regenerate thumbnails in the future if you change your theme’s image sizes.
