Image Formats (JPG, PNG, WebP, AVIF) — HTML

Image Formats Compared

Choosing the right image format is a real performance decision. Each format trades off compression, quality, transparency, and animation support differently—here's what each one is actually good at, and when to reach for it.

JPEG — Photos, Lossy

JPEG uses lossy compression tuned for photographic images with smooth color gradients. It doesn't support transparency or animation, but achieves small file sizes for photos.

Best for: photographs, complex images with many colors and gradients.
Weak at: flat-color graphics, text, and logos — compression artifacts show up as blotchy noise around sharp edges.
No transparency and no animation.

PNG — Transparency, Lossless

PNG uses lossless compression, so quality never degrades no matter how many times it's re-saved. It also supports a full alpha transparency channel.

Best for: logos, icons, screenshots, and graphics that need transparency.
Weak at: photographs — file sizes are much larger than equivalent JPEGs.
Transparency: yes (full alpha channel). Animation: no (use APNG or GIF instead).

GIF — Legacy Animation

GIF is an older format limited to 256 colors. It's still widely supported for simple looping animations, although modern formats are usually much smaller and better quality.

Best for: simple looping animations.
Weak at: photographs because of the 256-color limitation.
Transparency: yes, but only 1-bit transparency.

WebP — Modern, Smaller

WebP was designed to replace JPEG, PNG, and GIF with a single modern format. It supports both lossy and lossless compression, transparency, and animation while usually producing files 25–35% smaller than older formats.

Best for: almost everything—photos, graphics, and animations.
Watch out for: very old browsers. For maximum compatibility you can use a <picture> fallback.

AVIF — Newest, Best Compression

AVIF (AV1 Image File Format) often produces the smallest file sizes of all modern image formats while maintaining excellent visual quality. It also supports transparency and HDR.

Best for: maximum compression on modern browsers.
Watch out for: slower encoding and slightly newer browser support than WebP.

SVG — Vector

SVG (Scalable Vector Graphics) is fundamentally different from raster image formats. It is an XML-based vector format that describes shapes mathematically instead of storing pixels, allowing it to scale perfectly to any size.

Best for: logos, icons, illustrations, and diagrams.
Weak at: photographs because vector graphics aren't designed for photographic detail.
SVG can be styled and animated with CSS and JavaScript and remains perfectly sharp on any display.

Comparison Table

Format	Compression	Transparency	Animation	Best for
JPEG	Lossy	No	No	Photographs
PNG	Lossless	Full alpha	No	Logos, screenshots, graphics
GIF	Lossless (256 colors)	1-bit only	Yes	Simple animations
WebP	Lossy or Lossless	Full alpha	Yes	General purpose
AVIF	Lossy or Lossless	Full alpha	Yes	Maximum compression
SVG	Vector	Full alpha	Via CSS/SMIL	Logos and icons

Choosing a Format in Practice

picture-fallback.html

HTML

<picture>
  <source srcset="/media/hero.avif" type="image/avif">
  <source srcset="/media/hero.webp" type="image/webp">
  <img
    src="/media/hero.jpg"
    alt="Team collaborating around a laptop"
    width="1200"
    height="600"
  >
</picture>

Layer your formats

Using <picture> with multiple <source> elements lets the browser choose the best format it supports—typically AVIF first, WebP second, and JPEG or PNG as the final fallback.

Format vs delivery

Choosing the correct format is only part of image optimization. Combining it with srcset, sizes, lazy loading, and responsive images has an even bigger impact on real-world performance.