WebP, AVIF and Lazy Loading: Faster Images Without Losing Quality

Images are usually the largest part of a web page by weight, which makes them the best place to look for speed. The good news is that you can often cut image size substantially without any visible loss, by choosing the right format, resizing to the size you actually need, and loading below-the-fold images later.

The formats at a glance

Format	Best for	Notes
JPEG	Photographs	Universal support; lossy; no transparency
PNG	Screenshots, logos needing transparency	Lossless; large for photos
SVG	Logos, icons, simple illustrations	Vector, scales perfectly, tiny files
WebP	Photos and graphics, with transparency	Lossy and lossless modes; supported by current major browsers
AVIF	Photos where smallest size matters	Often smaller than WebP at similar quality; slower to encode

Exact savings depend on the image and the quality setting, so test your own files rather than trusting a headline percentage. As a rule, WebP and AVIF produce smaller files than JPEG and PNG at comparable visual quality, and AVIF tends to win on photos.

Serving modern formats safely

Current versions of all major browsers support WebP, and AVIF support is also widespread, but you may still want a fallback. The HTML picture element lets the browser choose:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="600" alt="Describe the image">
</picture>

On WordPress, which supports uploading WebP and AVIF in current versions, image optimisation plugins can convert your library and serve the right file automatically. Some CDNs can do the same conversion at the edge.

Resize before you compress

The most common image problem is not the format, it is the dimensions. A 4000-pixel-wide photo displayed in a 800-pixel column makes the visitor download several times more data than necessary. Export images at the largest size at which they appear, allowing for high-density screens, usually twice the display width at most. Then compress. Quality settings around the middle-high range usually look the same to the eye while saving a lot of weight.

Responsive images with srcset

A phone does not need a desktop-sized image. The srcset and sizes attributes give the browser several versions and let it pick based on screen width and density:

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="500" alt="Describe the image">

WordPress generates several sizes of every upload and adds srcset to images in content automatically, provided your theme uses the standard functions.

Lazy loading

Lazy loading delays downloading images until they are close to the viewport. Browsers support it natively with a single attribute:

<img src="photo.webp" loading="lazy" width="800" height="500" alt="...">

It works for iframes too, such as embedded videos and maps, which are often heavy. Rules for using it well:

• Do lazy-load images below the first screen, long galleries, and embedded videos.
• Do not lazy-load the main hero image or anything visible without scrolling. Doing so delays Largest Contentful Paint.
• Always set width and height, so the reserved space prevents layout shift when the image arrives.

Other quick wins

• Use SVG for logos and icons.
• Replace animated GIFs with short muted looping video, which is typically far smaller.
• Remove metadata from exported images if you do not need it.
• Set long browser-cache lifetimes for image files, as they rarely change.
• Write useful alt text; it helps accessibility and search regardless of format.

A simple workflow

1. Decide the display size for each image slot on your template.
2. Export at that size, with a doubled version for sharp screens if needed.
3. Compress, using WebP or AVIF with a JPEG fallback where required.
4. Add dimensions, srcset and loading="lazy" for non-critical images.
5. Test with PageSpeed Insights and compare total page weight before and after.

Choosing a format in practice

If you are unsure where to begin, use this simple decision path. Logos, icons and line art should be SVG. Photographs should be WebP or AVIF with a JPEG fallback if you need to support unusual clients. Screenshots with sharp text can be lossless WebP or PNG, since lossy compression blurs fine edges. Anything that needs transparency should be SVG, WebP, AVIF or PNG, never JPEG.

When you compare outputs, look at the image at the size it will actually be displayed, not zoomed in. Compression artefacts that are visible when you zoom to 400 percent are irrelevant at normal viewing size, and chasing them wastes bytes. Compare sizes in kilobytes, and keep the settings once you find a quality level that looks right for your type of photography, so every future upload follows the same rule.

Background images and sliders

Images set with CSS background-image do not support the loading="lazy" attribute and are discovered later by the browser. Where an image is content, use a real img element. Sliders deserve scrutiny too: they often load every slide at full size up front. Replacing a five-slide carousel with one strong hero image is frequently the single best image optimisation on a home page.

Where the files live matters too

Once images are lean, serving them quickly from a location near the visitor completes the job. Cloudflare CDN is available on hosted sites with Zebra Hosting Cloud; see the CDN page.