Image Delivery: Smaller Files for the Same Picture
Images are usually the heaviest part of a web page. Most of that weight is avoidable: a photo straight from a camera or a stock site, displayed in a 400-pixel-wide slot on a phone, can be ten times larger than it needs to be without looking any better.
Why it matters
Every unnecessary kilobyte costs time on mobile connections and data for visitors on limited plans. When the largest image is also the page’s Largest Contentful Paint element, its download time directly delays the moment the page looks loaded. Images further down compete for bandwidth with the files the first screen needs.
The three usual problems
- Larger than displayed. A 2400-pixel image shown at 600 pixels wide wastes most of its bytes. Lighthouse compares each image’s file dimensions with its displayed size.
- Poorly compressed. JPEG and WebP at very high quality settings are much larger than at moderate settings, and the difference is rarely visible.
- Old formats. WebP and AVIF are supported by all current major browsers and are usually considerably smaller than JPEG or PNG at similar quality.
How to fix
Serve the right size with srcset and sizes
Generate a few widths of each image and let the browser pick one for the screen and slot:
<img
src="/img/team-800.webp"
srcset="/img/team-400.webp 400w, /img/team-800.webp 800w, /img/team-1600.webp 1600w"
sizes="(min-width: 960px) 50vw, 100vw"
width="1600"
height="1067"
alt="Our team at the office"
loading="lazy"
/>
sizes tells the browser how wide the image will be displayed, so it can choose before the CSS has
loaded. Keep width and height so the space is reserved and the layout doesn’t shift. Use
loading="lazy" only for images below the first screen, never for the LCP image. Our
responsive images guide covers this in more detail.
Offer modern formats with a fallback
If you need to support older browsers too, <picture> lets the browser take the first format it
understands:
<picture>
<source srcset="/img/hero.avif" type="image/avif" />
<source srcset="/img/hero.webp" type="image/webp" />
<img src="/img/hero.jpg" width="1200" height="600" alt="..." />
</picture>
Compress sensibly
Export photos at a moderate quality setting rather than the maximum, and strip metadata such as camera details. Use PNG only for images that need lossless quality, like screenshots with small text; for logos and icons, SVG is often the smallest option.
Let a CDN resize images
Image CDNs can resize and convert on the fly, so you upload one large original. On Cloudflare,
image transformations use URLs like this, with format=auto picking AVIF or WebP for browsers that
support them:
/cdn-cgi/image/width=800,quality=80,format=auto/img/team.jpg
Other CDNs and hosting platforms offer similar services; check your provider’s documentation.
WordPress
WordPress creates several sizes of every uploaded image and adds srcset and sizes to images in
post content automatically. It can also handle WebP uploads, and recent versions AVIF, if the
server’s image library supports them. Image optimisation plugins can compress existing uploads and
generate WebP or AVIF copies. Pick the closest registered size when inserting an image instead of
“Full Size”.
How PerfoMetrix checks this
We read Lighthouse’s improve image delivery audit (image-delivery-insight) from the
PageSpeed Insights run we already make (mobile, simulated device). If Lighthouse rates it 0.9 or
higher, or no image on the page needs work, the check passes; otherwise it needs attention. We
show Lighthouse’s estimated savings, such as “Est savings of 420 KiB”, and the first five images
it lists.
This check is shown but doesn’t count toward the performance score: its effect is already measured by LCP and the other scored metrics. No extra requests are made to your site.