AVIF vs WebP vs JPG: Which Image Format to Use for Faster Pages

Largest Contentful Paint, the Core Web Vital that measures when the main content of a page appears, is very often an image: a hero banner, a product photo, the picture at the top of an article. Making that image smaller is one of the most direct ways to improve it, and the format you save it in decides more than any compression setting.

1. Why the format matters for page speed

A browser cannot paint an image it has not downloaded. On a slow mobile connection, a 1.5 MB JPG at the top of the page holds back LCP for as long as the download takes, and Google’s threshold for a good LCP is 2.5 seconds. Fewer bytes for the same picture means the image arrives sooner. WebP and AVIF both encode the same picture in fewer bytes than JPG, which is why they are worth the extra step.

2. How each format compresses

JPG: fixed 8x8 blocks

JPG splits an image into eight-by-eight pixel blocks and applies a Discrete Cosine Transform to each, then throws away the high-frequency detail the eye notices least. It is fast and universally supported. Pushed hard, the block structure shows through as a visible grid, colour banding in skies and smudged edges around text.

WebP: prediction from neighbouring blocks

Lossy WebP comes from Google’s VP8 video codec. Before encoding a block, it predicts the block from pixels already decoded around it and stores only the difference between the prediction and the real pixels. It also supports transparency and animation, so one format can replace JPG, PNG and GIF for most web uses.

AVIF: the AV1 video codec, applied to stills

AVIF stores a single frame encoded with AV1, the open video codec from the Alliance for Open Media. AV1 has variable block sizes, many more prediction directions and better tools for smooth gradients than VP8, so it holds up better at low file sizes. The cost is encode time: AVIF can take many times longer to encode than WebP, which matters when you are converting thousands of images, though not for a visitor viewing one.

3. What the published comparisons show

Google’s own comparison found lossy WebP files 25 to 34 percent smaller than JPGs of equivalent quality, measured by SSIM. Comparisons of AVIF generally find it smaller again than WebP at similar quality, with the largest gains on photographs with smooth areas and at lower quality settings.

Treat any single percentage with caution, including those. The saving depends heavily on the image, the encoder, the quality settings compared and how quality is measured. A noisy, detailed photo compresses less in every format than a clean product shot on a white background. The reliable way to know what you will save is to convert a few of your own images and compare.

4. Try it on your own images

Our converters run in your browser, so you can test this without uploading anything. Convert the same photo with JPG to WebP and JPG to AVIF, then compare the file sizes and look at both at full size. Pay attention to skin tones, skies and any text in the image, which is where compression shows first.

5. Serving all three formats

You do not have to pick one. The HTML picture element lets you list several versions of an image, and each browser takes the first one it supports:

List AVIF first, for the smallest file where it is supported. List WebP second; every current major browser reads it. Put the JPG in the plain img tag as the final fallback, so older software and email clients still show the picture.

Smaller files help LCP, but they are not the whole of it. An image that is lazy-loaded when it sits at the top of the page, or that the browser discovers late because it is set in CSS, will still paint late however small it is.