Image Compression
Reduce image file sizes through lossy or lossless compression without visibly degrading quality.
Metrics
This technique can move up to 100% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique does not move CLS.
This technique can move up to 33% of FCP's share of the Lighthouse score.
This technique can move up to 67% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
Image compression reduces the byte size of image files before they are served. Lossless compression removes redundant data without any quality loss; lossy compression discards imperceptible detail to achieve much higher size reductions. On a typical WordPress site, unoptimized images are the single largest contributor to page weight — often accounting for 60–80% of total transferred bytes. Compressing them is the highest-leverage, lowest-risk performance action available.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, CLS, TTFB.
The Problem
WordPress stores the original uploaded image and generates several resized versions, but applies no compression beyond what the camera or design tool already used. A photograph shot on a modern smartphone can easily be 4–8 MB. Even resized to 1200 px wide for web use, the same image may still be 800 KB–2 MB if no compression step is applied. Each uncompressed image directly inflates the page’s total transfer size, delays Largest Contentful Paint, and consumes mobile data budgets.
Performance Impact
LCP
20–60%
hero and above-fold images are often the LCP element — smaller files arrive sooner
FCP
Indirect
reduced total page weight means the browser processes less data before first paint
SI
Moderate
images load faster so the visible area completes rendering earlier
Risk: Low
lossless is zero-risk; lossy requires quality threshold testing — keep originals for rollback
How it works
01
Lossless compression: remove metadata and redundant data
Tools like
optipng,pngcrush, andjpegtranstrip EXIF metadata, color profiles, and redundant chunks from image files. File sizes drop 10–30% with zero quality impact. Every image should go through lossless compression as a baseline.02
Lossy compression: trade imperceptible detail for smaller files
JPEG lossy compression at quality 75–85% (on a 0–100 scale) is visually indistinguishable from 100% quality in most cases — yet can reduce file size by 60–80%. Tools like MozJPEG,
sharp, andimageminapply perceptual quality models that discard detail the human eye cannot see.03
Progressive encoding: improve perceived load
Progressive JPEG encodes the image in multiple passes of increasing quality. The browser can render a full-size blurry version immediately and sharpen it as more data arrives — improving perceived performance without changing total file size.
04
WordPress integration
WordPress does not compress images by default. Plugins like ShortPixel, Imagify, and Smush compress images on upload or in batch, applying lossy or lossless settings per image size. They store the original and serve the compressed version. CLI tools like WP-CLI + custom image processing scripts are an alternative for developer-managed setups.
Code Example
<!-- Uploaded image: 1.8 MB, width 1200px, unoptimized -->
<img src="/wp-content/uploads/hero.jpg" alt="Hero image" width="1200" height="600"><!-- After lossy compression (quality 82): 180 KB — 90% smaller -->
<img src="/wp-content/uploads/hero.jpg" alt="Hero image" width="1200" height="600">In WordPress, add compression to the upload pipeline using add_filter('wp_handle_upload', 'compress_on_upload'), or process existing images in bulk via WP-CLI with a compression plugin.
Limitations
- Lossy compression is irreversible — always retain the original uncompressed file before applying lossy settings.
- Compression quality thresholds vary by image content: photographs tolerate more lossy compression than images with text, sharp lines, or flat color areas.
- Re-compressing an already-compressed JPEG introduces generation loss — each re-encode degrades quality. Compress only from originals.
- PNG files with transparency cannot be converted to JPEG without losing the alpha channel — keep as PNG or convert to WebP/AVIF.
Common Mistakes
Compressing images after resizing to the wrong dimensions
Compress images after resizing to the final display size. Compressing a 4000 px wide image then scaling it down in HTML wastes compression work on pixels that will never be shown.
Using quality 100 for all images to avoid complaints
Quality 75–85 is indistinguishable from quality 100 for photographs in most contexts. Run a visual diff test — if you cannot spot the difference at 100% zoom, the quality setting is safe.
Skipping compression on thumbnail and medium image sizes
WordPress generates multiple image sizes for each upload. Compression must be applied to every registered size — not just the original — otherwise product listings, blog grids, and widget thumbnails remain bloated.