How to Choose the Right Image Format

Choosing the wrong format wastes bandwidth or ruins quality. JPEG for photos, PNG for graphics, WebP for modern browsers, SVG for logos. Here’s exactly when to use each format.

The quick decision tree

Is it a logo, icon, or simple graphic? → Use SVG (scalable, tiny files)

Is it a photograph? → Modern: WebP or AVIF with JPEG fallback → Simple: JPEG (quality 80-85)

Does it need transparency? → Modern: WebP or AVIF with PNG fallback → Simple: PNG-32

Is it text or a screenshot? → PNG (lossless, crisp edges)

Is it an animation? → Video (MP4) or WebP/AVIF animation (not GIF!)

Format comparison

Format	Best For	File Size	Transparency	Browser Support
JPEG	Photos	Medium	No	100%
PNG	Graphics, text	Large	Yes	100%
WebP	Photos + transparency	Small	Yes	96%
AVIF	Maximum compression	Smallest	Yes	85%
SVG	Logos, icons	Tiny	Yes	100%

By use case

Product photos

Best: WebP with JPEG fallback

<picture>
  <source srcset="product.webp" type="image/webp" />
  <img src="product.jpg" alt="Product" />
</picture>

Why: 30% smaller files, maintains quality.

Logos

Best: SVG

<img src="logo.svg" alt="Logo" />

Why: Scales perfectly, tiny file size, looks sharp on any screen.

Screenshots

Best: PNG

Why: Lossless, crisp text, exact pixel reproduction.

Hero images

Best: WebP/AVIF with JPEG fallback

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero" />
</picture>

Why: Smallest files for fast LCP, universal compatibility.

Icons with transparency

Best: SVG or PNG-8

SVG: If it’s simple shapes PNG-8: If it’s photographic or complex

Thumbnails

Best: WebP or JPEG (quality 70-75)

Why: Small files, visual quality less critical at thumbnail size.

Background images (CSS)

Best: WebP with JPEG fallback

.hero {
  background-image: url('bg.jpg');
}

@supports (background-image: url('bg.webp')) {
  .hero {
    background-image: url('bg.webp');
  }
}

Modern strategy (2025)

Best practice:

1. Create WebP version (96% browser support)
2. Create JPEG/PNG fallback (100% support)
3. Use <picture> element to serve both

Optional:

• Add AVIF for cutting-edge compression (85% support)
• Still provide JPEG/PNG fallback

Example:

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="Photo" loading="lazy" />
</picture>

File size comparison

Same 1200×800px photo:

Format	Quality	File Size	Notes
JPEG	Q85	245 KB	Baseline
PNG	Lossless	2.1 MB	9× larger!
WebP	Q85	165 KB	33% smaller
AVIF	Q80	95 KB	61% smaller

Takeaway: Modern formats save significant bandwidth.

Common mistakes

Mistake 1: PNG for photos → Files are huge. Use JPEG or WebP.

Mistake 2: JPEG for logos → Blurry edges. Use SVG or PNG.

Mistake 3: GIF for animations → Huge files. Use video (MP4) or WebP animation.

Mistake 4: Not providing fallbacks → Breaks on old browsers. Always have JPEG/PNG fallback.

The bottom line

Simple sites:

• Photos: JPEG (Q80-85)
• Graphics: PNG or SVG
• Done

Modern sites:

• Photos: WebP + JPEG fallback
• Graphics: SVG or PNG-8
• Optional: Add AVIF for smaller files

Maximum performance:

• WebP + AVIF + JPEG fallback via <picture>
• Responsive images with srcset
• Lazy loading below fold

Choose based on your audience and complexity tolerance. JPEG + PNG works fine. WebP adds value with minimal complexity. AVIF is cutting-edge but slower to encode.

---

Related articles:

• JPEG Guide
• PNG Guide
• WebP Guide
• AVIF Guide
• Responsive Images