On Media Formats

Some notes on media formats. Recommended watch: Explore media formats for the web.

Existing formats

GIF

8 bits per pixel (256 colours), huge file sizes.
- good for memes, bad for actual image quality—avoid for anything longer than a few seconds

JPEG

lossy compression, great for photos
no transparency support—supports progressive loading

PNG

lossless with alpha channel
best for UI elements, not efficient for photo-like images

Modern formats

WebP

supports animation, transparency, and both lossy and lossless compression
- lossy: similar to JPEG but ~25-35% smaller files
- lossless: similar to PNG but ~26% smaller files
better than GIF, PNG, and JPEG in most cases—ideal for the modern web though ensure fallback for older Safari versions (< 14)

AVIF

newer format built on AV1 codec to achieve high compression rate with no sacrifice to video quality
- smaller than JPEG/WebP, supports up to 12 bits colour depth, HDR and animation—should be the default if supported, though decoding can be CPU-intensive on some platforms

JPEG XL

designed to replace JPEG
supports both lossy and lossles, still not widely supported—some browsers have discontinued or disabled support by default (e.g., Chrome)

HEIC

Apple’s format for iOS photos
- great compression, Live Photo support, depth data—not safe for Web-convert to WebP or AVIF first
- use the HTML <picture> element, which allows you to specify alternative <source> elements—enabling the browser to choose a format it supports from top to bottom.

<picture>
  <source srcset="image.heic" type="image/heic" />
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="descriptive text" />
</picture>

General Guidelines

prefer AVIF → WebP → JPEG/PNG
for UI assets: SVG > PNG
avoid GIF unless essential
use WebP or video formats for animations
if intending to use WKWebView—use HEIC as it's hardware accelerated
always serve the smallest viable file