Skip to content
JFIF.IO
Web Performance

The Best Image Format for Websites

AVIF, WebP, JPEG, PNG or SVG? A practical decision guide for every kind of image on a website, with markup you can copy.

By JFIF.IO TeamPublished 2 min read

The Best Image Format for Websites

Images are usually the heaviest part of a web page, and the largest image is often the Largest Contentful Paint (LCP) element that Core Web Vitals measure. Picking the right format is one of the easiest performance wins available.

The short answer

Image type Use Fallback
Photos AVIF WebP, then JPEG
Photos with transparency AVIF or WebP PNG
Logos and icons SVG PNG or WebP
Screenshots and UI Lossless WebP or PNG PNG
Illustrations SVG if vector; otherwise WebP PNG
Short animations Video (MP4/WebM) or animated WebP GIF
Favicons ICO + PNG + SVG —

Photos: AVIF and WebP

AVIF typically produces the smallest files at a given visual quality; WebP is close behind, encodes much faster and is supported by slightly more software. JPEG remains the universal fallback. See AVIF vs WebP for the details.

<picture>
  <source type="image/avif" srcset="/img/team-800.avif 800w, /img/team-1600.avif 1600w" sizes="(min-width: 60rem) 50vw, 100vw">
  <source type="image/webp" srcset="/img/team-800.webp 800w, /img/team-1600.webp 1600w" sizes="(min-width: 60rem) 50vw, 100vw">
  <img src="/img/team-1600.jpg" alt="Our team at the office" width="1600" height="1067" loading="lazy" decoding="async">
</picture>

Logos and icons: SVG

Vector graphics stay sharp at any size and are often just a few kilobytes. Minify them, and only embed SVGs inline that you created yourself — SVG can contain scripts.

When you need a raster version (social cards, app stores, email), convert SVG to PNG at the exact size required.

Screenshots and UI: lossless

Text and hard edges suffer under lossy compression. Use lossless WebP or PNG; for PNG, colour reduction (Compress PNG) often cuts the size by more than half with no visible change.

Animations: avoid GIF

GIF is limited to 256 colours and produces enormous files. A short looping video or an animated WebP is usually a fraction of the size.

Format is only half the job

  1. Serve the right dimensions. Use srcset and sizes so phones do not download desktop-sized images. Resize your originals to a few standard widths.
  2. Always set width and height. The browser reserves the space and avoids layout shift (CLS).
  3. Lazy-load below the fold with loading="lazy" — but not the LCP image. Give that one fetchpriority="high".
  4. Compress sensibly. Quality 75–85 for JPEG and WebP, 50–70 for AVIF is a good start.
  5. Strip metadata. It serves no purpose on a web page.
  6. Cache aggressively. Use fingerprinted file names and long Cache-Control lifetimes.

Converting your existing images

Batch conversion runs in your browser, so even large image libraries never leave your computer.