WebP vs AVIF vs JPEG: Which Image Format to Use

Images are usually the heaviest part of a web page, so format choice matters. Newer formats can deliver the same visual quality at noticeably smaller file sizes. Here is how the main formats compare and when to use each.

JPEG

The long-standing format for photographs.

• Pros: works everywhere, quick to create, good for photos
• Cons: larger files than newer formats at similar quality, no transparency

JPEG remains a reliable fallback.

PNG

Best for graphics that need sharp edges or transparency, such as screenshots, logos with transparent backgrounds, and simple illustrations.

• Pros: lossless quality, supports transparency
• Cons: photos in PNG are usually very large

WebP

A modern format that supports lossy and lossless compression, transparency, and animation.

• Pros: typically smaller than JPEG and PNG for comparable quality, and supported by all current major browsers
• Cons: older software and tools may not handle it, and savings vary by image

For most sites, WebP is a safe, easy upgrade.

AVIF

A newer format that often compresses even better than WebP, especially for photos and images with smooth gradients.

• Pros: frequently the smallest files, supports transparency and high quality color
• Cons: slower to encode, support is newer than WebP's, and some tools can't create it yet

Browser support is now broad in current browsers, but you should still provide fallbacks, especially for older devices.

SVG

A vector format built from shapes rather than pixels. Ideal for logos, icons, and simple illustrations.

• Pros: stays sharp at any size, usually tiny, styleable with CSS
• Cons: unsuitable for photos, and complex SVGs can get large

See icons in web design.

How to choose

Serve them safely

The HTML picture element lets you offer several formats. The browser picks the first one it supports:

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

Many CDNs and image plugins can convert and serve the best format automatically. See what is a CDN.

Don't forget the basics

Format is only one part. Also:

• Resize images to their display size
• Choose a sensible quality setting. See how to compress images for the web
• Use responsive image sizes for different screens
• Add alt text and set width and height. See alt text best practices and how to fix layout shift
• Lazy-load images below the fold, but not your main image. See lazy loading

Check the result

Compare before and after file sizes and look at the image at full size. See how to test website speed and how to improve LCP.

The bottom line

Use SVG for logos and icons, WebP or AVIF for photos with a JPEG fallback, and PNG when you need it. Smaller images mean faster pages.