On Media Formats

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

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

WebP

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

AVIF

newer format built on AV1 codec to achieve a 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, with both lossy and lossless support
discontinued or disabled support (e.g., Chrome)

HEIC

Apple’s format for iOS photos
great compression, Live Photo support, depth data—not safe for the web, convert to WebP or AVIF first
use the HTML <picture> element to specify fallbacks, allowing the browser to choose a supported format 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
for WKWebView: use HEIC for hardware acceleration
always serve the smallest viable file