Image optimisation in practice: we tested PNG, JPEG, WebP and AVIF

Images are usually the heaviest thing on a page. In HTTP Archive’s 2024 data, the median mobile home page weighed 2,311 KB, and 900 KB of that was images. So we ran a simple test to see how much the format and size really matter.

The test#

We took one photographic screenshot, the Ocean Point Estates home page at 1440 × 900 pixels, and encoded it with PHP’s GD library, the same library many WordPress hosts use. Quality settings were chosen to look the same to the eye: JPEG at 82, WebP at 80 and AVIF at 55.

AVIF came out 54% smaller than JPEG and 28% smaller than WebP. PNG, which is lossless, was more than six times the size of the JPEG. It is the right choice for logos and screenshots of text, and the wrong one for photos.

Size matters more than format#

The photo is displayed at about 800 pixels wide in a card, so sending the full 1440 pixels wastes most of the download. Resizing first made the biggest difference of all.

Browser support#

Doing it in WordPress#

WordPress already creates several sizes of every upload and adds srcset and sizes so the browser picks the right one. Since version 6.5 it also accepts AVIF uploads, as long as your host’s image library supports it. Tools → Site Health → Info → Media Handling tells you.

To have WordPress convert JPEG uploads to AVIF automatically, a few lines in your theme or a small plugin will do it:

// Save JPEG uploads (and their resized copies) as AVIF.
add_filter( 'image_editor_output_format', function ( $formats ) {
	$formats['image/jpeg'] = 'image/avif';
	return $formats;
} );

If you write the markup yourself, a picture element offers modern formats with a safe fallback:

<picture>
  <source type="image/avif" srcset="/team-800.avif 800w, /team-1600.avif 1600w" sizes="(min-width: 60em) 50vw, 100vw">
  <source type="image/webp" srcset="/team-800.webp 800w, /team-1600.webp 1600w" sizes="(min-width: 60em) 50vw, 100vw">
  <img src="/team-800.jpg" width="800" height="500" alt="The team reviewing a design" loading="lazy">
</picture>

The checklist#

• Resize before you upload. A 4,000-pixel photo straight from a phone is never needed on a website.
• Use AVIF or WebP for photos, SVG for logos and icons, PNG only where you need lossless detail.
• Always set width and height so the layout does not jump while images load.
• Lazy-load images below the fold, and never the main image at the top of the page.
• Give the hero image fetchpriority="high".
• Write alt text that describes the purpose of the image.