WebP vs AVIF vs JPEG vs PNG: Which Image Format to Use

For photos, serve AVIF or WebP with a JPEG fallback. For logos and icons, use SVG. Use PNG or lossless WebP for screenshots and graphics that need crisp edges or transparency, and replace animated GIFs with short videos.

By Sumair Roudani · Published October 27, 2026

Images are usually the heaviest part of a web page, so the format you choose has a direct effect on load time. There is no single best format. Each one is good at a particular kind of image, and modern HTML lets you offer several and let the browser pick.

Lossy vs lossless compression

Every format below falls into one or both of these camps:

• Lossy compression throws away detail the eye is unlikely to notice. Files get much smaller, but quality drops each time you re-save, and hard edges such as text can show blurry artifacts.
• Lossless compression keeps every pixel exactly. Files are larger, but nothing degrades, which matters for screenshots, line art and source files.

Photos tolerate lossy compression well because they are full of noise and gradual change. Flat graphics with sharp edges usually don't.

The formats at a glance

JPEG: the universal photo format

JPEG has been the default for photographs since the 1990s and opens in essentially every browser, app, email client and operating system. It has no transparency and no animation. Its quality setting controls the trade-off between size and artifacts. For web photos, a quality somewhere in the 70 to 85 range on most encoders is a common starting point, but the right number depends on the encoder and the image, so compare visually.

PNG: lossless with full transparency

PNG keeps every pixel and supports a full alpha channel, so soft shadows and anti-aliased edges blend cleanly over any background. It is ideal for screenshots, interface mockups and graphics with text. It is a poor choice for photos: a lossless photo is usually several times larger than a good JPEG of the same image.

WebP: the practical default

WebP supports lossy and lossless compression, transparency and animation in one format, and it works in all current major browsers. Lossy WebP photos are often noticeably smaller than JPEGs of similar quality, and lossless WebP is typically smaller than the equivalent PNG. If you only add one modern format to your workflow, make it this one.

AVIF: smallest files, slower to make

AVIF is based on the AV1 video codec. For photographs it often beats WebP on file size at the same perceived quality, and it handles smooth gradients and low-quality settings more gracefully. It also supports high bit depth and wide-gamut color. The trade-offs are slower encoding, which matters if you convert images on the fly, and support that arrived later than WebP's. AVIF now works in current versions of the major browsers, but a fallback is still sensible for older devices.

SVG: vectors for logos and icons

SVG describes shapes rather than pixels, so it stays sharp at any size and on any screen density without exporting multiple versions. Simple logos and icons are often just a few kilobytes. Run SVGs through an optimizer to strip editor metadata, and treat SVG files from untrusted sources with care, because they can contain scripts. SVG is the wrong tool for photos.

GIF vs video for animation

GIF is limited to 256 colors per frame and has only on/off transparency, and its compression is inefficient for motion. Animated GIFs are frequently several megabytes. A short muted video usually looks better and is far smaller:

<video autoplay loop muted playsinline width="640" height="360">
  <source src="/media/demo.webm" type="video/webm">
  <source src="/media/demo.mp4" type="video/mp4">
</video>

The muted and playsinline attributes matter: most mobile browsers only allow autoplay for muted video, and playsinline stops iOS from opening it full screen. Animated WebP or AVIF are alternatives when you need an image element rather than video.

Serving modern formats with a fallback

The <picture> element lets you list formats in order of preference. The browser uses the first <source> whose type it supports and falls back to the <img> otherwise:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Team reviewing designs at a long table"
       width="1600" height="900" loading="lazy" decoding="async">
</picture>

Keep the alt, width and height on the <img>. The width and height let the browser reserve space before the image loads, which prevents layout shift, and the aspect ratio calculator helps when you need the matching height for a given width. Don't lazy-load the main image visible at the top of the page, because that can delay your largest contentful paint.

You can combine format switching with resolution switching by adding srcset and sizes to each source. Our guide to sharp images on retina screens explains how to choose those sizes.

Worked example: a blog hero image

You have a 6000 × 4000 photo straight from a camera, and the hero area on your blog is at most 800px wide.

1. Resize first. Format choice can't save an oversized image. To cover 2x screens, export at 1600px wide. At the original 3:2 ratio, that is 1600 × 1067. The image resize calculator gives you the exact height for any target width.
2. Export three versions. AVIF, WebP and JPEG from the same resized master, each at a moderate quality setting.
3. Compare visually. Zoom to 100% and check faces, skin and gradients in the sky. Lower the quality until you see artifacts, then step back up.
4. Serve with <picture> as in the example above, and add an 800px-wide set in srcset for 1x screens.

Simply going from the 6000px original to a 1600px export cuts the pixel count by more than 90%, before compression even starts. That single step is often the biggest saving on a page.

Compression tips that apply to every format

• Never upload originals. Resize to the largest size the layout actually displays, times the device pixel ratio you want to support.
• Strip metadata. Camera EXIF data, embedded thumbnails and editor information add weight and can leak location data.
• Re-encode from a master. Recompressing an already lossy JPEG compounds artifacts. Keep a high-quality source and export from it.
• Match the format to the content, not the other way around: photo to AVIF/WebP/JPEG, flat graphic to SVG or lossless WebP/PNG.
• Automate it. Build tools, image CDNs and frameworks can generate and serve multiple formats for you.

For format details and support notes, see MDN's image file type guide and the Learn Images course on web.dev.