Image Formats for the Web: JPEG, PNG, WebP, and SVG Compared

Choosing the right image format is one of those decisions that looks trivial and isn't. The wrong format can triple your file size, slow down your Largest Contentful Paint (LCP), and cost you Core Web Vitals points. The right format, chosen for the right content type, can cut image weight by 50% with no perceptible quality loss.

Here's a complete breakdown of every format you'll encounter, when to use each, and a decision guide you can reference in code review.

JPEG

Type: Lossy compression
Transparency: No
Animation: No
Best for: Photographs, complex gradient imagery, realistic scenes

JPEG achieves compression by discarding high-frequency visual information that the human eye is least sensitive to. This is why photos can be compressed to 20% of their original size with barely noticeable quality loss, but a JPEG of a simple logo with sharp edges looks terrible.

The quality sweet spot is 80–85%. Below 80%, block artifacts become visible. Above 85%, file size increases significantly with almost no visual benefit. Most image optimization pipelines default to 82.

<!-- Basic JPEG -->
<img src="photo.jpg" alt="Mountain landscape" width="800" height="600">

When NOT to use JPEG:

Screenshots with text (text edges become blurry and blocky)
Logos and icons (sharp edges compress poorly)
Images that need transparency (JPEG has none)
Images you'll edit and re-save repeatedly (each save re-compresses and degrades quality)

PNG

Type: Lossless compression
Transparency: Yes (PNG-24 with full alpha channel)
Animation: No (technically APNG exists, but use WebP/video instead)
Best for: Logos, icons, screenshots, anything with text, images requiring transparency

PNG compresses without discarding any data, which means the decompressed image is pixel-perfect identical to the original. This is exactly what you want for screenshots where text must be crisp, or logos that need to sit on various backgrounds.

PNG-8 vs PNG-24:

PNG-8: 256 colors maximum, smaller file size, supports binary transparency (pixel is either transparent or not)
PNG-24: Full 16.7 million colors + 256 levels of alpha channel transparency, larger files

For logos on the web, use PNG-24. For simple icons with limited colors, PNG-8 may work and saves space.

The downside: PNG files are large. A PNG of a 2MB JPEG photo would be 10–20MB. PNG is for content-type correctness, not general photography.

WebP

Type: Both lossy and lossless modes
Transparency: Yes (in both modes)
Animation: Yes
Best for: Almost everything — it's the modern default

WebP was developed by Google and is now supported by every modern browser (Chrome, Firefox, Safari 14+, Edge). It consistently outperforms both JPEG and PNG:

25–34% smaller than JPEG at equivalent visual quality
26% smaller than PNG in lossless mode
Supports transparency like PNG
Supports animation (better than GIF)

In practice, converting a typical photo from JPEG to WebP at the same quality setting reduces file size by about 30% with no visible difference. For a site with hundreds of images, this translates directly to faster page loads.

Browser support and the <picture> fallback:

WebP has been baseline-supported since Safari 14 (2020), so a WebP-only approach is now reasonable for most projects. If you need to support older browsers, use the <picture> element:

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

Browsers use the first <source> they support and fall back to the <img> tag. Modern browsers take the WebP; older ones get JPEG.

SVG

Type: Vector (XML-based)
Transparency: Yes
Animation: Yes (CSS or SMIL)
Best for: Logos, icons, illustrations, any image that must look sharp at all sizes

SVG is fundamentally different from the raster formats above. Instead of a grid of pixels, an SVG describes shapes mathematically: "draw a circle at x=50, y=50, radius=40, fill red." This means SVGs are infinitely scalable — they look identical at 16px and 1600px.

For a site logo used at multiple sizes (favicon, header, social meta image), SVG is ideal: one file, perfect rendering everywhere.

SVG can be embedded directly in HTML, which enables CSS styling and JavaScript interaction:

<!-- External file -->
<img src="logo.svg" alt="Company Logo" width="200" height="50">

<!-- Inline SVG — enables CSS/JS control -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">
  <text class="logo-text" x="10" y="35">ZeroServer</text>
</svg>

Inline SVG lets you change colors with CSS variables, animate paths, and respond to hover states — something no raster format can do.

What SVG cannot do: Photographs. An SVG of a photo would be enormous and look nothing like the original. SVG is for geometric, illustrative, or typographic content.

AVIF

Type: Both lossy and lossless
Transparency: Yes
Browser support: Chrome 85+, Firefox 93+, Safari 16+

AVIF is the newest mainstream format, derived from the AV1 video codec. It achieves 20–50% better compression than WebP at equivalent quality, which is remarkable. The tradeoff is slower encoding (not decoding — users see no performance difference after the file is served).

AVIF is worth adding as the first <source> in your <picture> element:

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

For new projects targeting modern browsers, AVIF + WebP fallback is the state of the art.

GIF

Type: Lossless (for 256 colors)
Transparency: Yes (binary — one color as transparent)
Animation: Yes
Best for: Almost nothing in 2026

GIF is limited to 256 colors and uses an ancient compression algorithm. Animated GIFs are notoriously large — a 5-second animation can easily exceed 5MB.

Replace animated GIFs with:

WebP animation — dramatically smaller file sizes
<video> with autoplay/loop/muted — even smaller, and hardware-accelerated

<!-- Replace this GIF -->
<img src="animation.gif" alt="Loading spinner">

<!-- With this video -->
<video autoplay loop muted playsinline width="100" height="100">
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

The only reason to produce a GIF today is when uploading to platforms that don't support other animation formats.

Quick Decision Guide

Content type	First choice	Fallback
Photo / complex image	WebP (lossy)	JPEG
Photo with transparency	WebP (lossy)	PNG-24
Logo / icon (vector)	SVG	WebP
Screenshot with text	PNG	WebP (lossless)
Animation	WebP or `<video>`	GIF (last resort)
Absolute smallest size	AVIF	WebP

Impact on Core Web Vitals

Largest Contentful Paint (LCP) is directly affected by image format and size. The LCP element is usually a hero image or the largest above-the-fold image. Google's research shows that every 100ms improvement in LCP correlates with measurable conversion rate improvement.

Practical optimizations:

Serve WebP (or AVIF) instead of JPEG/PNG for all photos — immediate 25–35% size reduction
Set explicit width and height on every <img> — prevents layout shift (affects CLS)
Add loading="lazy" to below-the-fold images — reduces initial load time
Add fetchpriority="high" to the LCP image — ensures it loads first

<!-- Optimized LCP image -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img 
    src="hero.jpg" 
    alt="Hero image" 
    width="1200" 
    height="600"
    fetchpriority="high"
  >
</picture>

Tools

Compress JPEG, PNG, and WebP files without leaving your browser using Image Compressor. Convert between formats with JPG to PNG, Image to WebP, and PNG to JPG — all client-side, no file upload to a server required.

The format decision isn't complex: SVG for vectors, WebP for everything raster, PNG when you need lossless pixel-perfect output, and AVIF when you can afford the encoding time. Getting this right at the start of a project is far easier than converting hundreds of images later.