Format Atlas

Guides

Choose web-image compression and animation formats

Separate photos, transparency, animation, and compatibility needs. Compare actual files at the destination instead of assuming size or quality from a format name.

Which format should you choose?

Choose by the role each file plays in your workflow.

  • Broad photo delivery → JPEG
  • Transparent still image → PNG
  • Optimized web delivery → WebP or AVIF
  • Short lossless animation with transparency → APNG
  • Evaluate compression where JPEG XL is supported → JPEG XL

Confirm compatibility first

Support for newer formats varies across browsers, apps, CDNs, and conversion tools. Define target environments and test fallbacks before adopting one.

Treat animation separately from video

APNG, GIF, and animated WebP suit short loops or UI effects. Longer content or audio calls for a video container and codec.

Formats to consider

JPEG

Good for: Photo delivery requiring broad support

Less suitable for: Illustrations needing transparency

PNG

Good for: Transparent still images and illustrations

Less suitable for: Reducing photo file sizes

WebP

Good for: Optimizing web image delivery

Less suitable for: Mandatory use without support checks

AVIF

Good for: Web delivery where AVIF support is verified

Less suitable for: Unconditional delivery to older environments

APNG

Good for: Short transparent animation

Less suitable for: Delivering long video

JPEG XL

Good for: Evaluating images where JPEG XL is supported

Less suitable for: General delivery without compatibility checks

Before you export

  • Encoding settings, image content, and display size all affect file size and visual quality.
  • Check target browsers and fallback images before adopting a newer format.

Related comparisons

JPEG vs PNGJPEG commonly uses lossy compression and suits many photographs, while PNG preserves pixel values losslessly and supports transparency. The choice depends on image content, editing needs, and the destination's requirements.JPEG vs WebPJPEG is widely supported for photographs, while WebP can use lossy or lossless compression and supports transparency. For web delivery, results depend on the source image, encoder settings, and target browsers.JPEG XL vs AVIFJPEG XL and AVIF are distinct image coding formats with different feature sets and implementation support. The practical choice depends on browsers, applications, encoders, and the delivery path, not just a codec's advertised capabilities.JPEG XL vs WebPJPEG XL and WebP are different image formats with distinct feature sets and support across browsers and tools. WebP is established in many web workflows; JPEG XL may be considered only where client support and the full delivery pipeline are confirmed.GIF vs APNGGIF and APNG can both contain multiple frames. GIF is broadly recognized for simple short loops; APNG extends PNG for animation with lossless frames and transparency. Compare the target support and actual file size.APNG vs WebPAPNG and WebP both support animation and transparency. APNG extends PNG with lossless animation; WebP offers web-oriented lossy and lossless encoding.

Guides

Choose a web image formatDecide what kind of image you are serving and which browsers and tools must support it before choosing a web format.Choose a photo file formatFor photographs, the best choice depends on whether you prioritize easy sharing, smaller web files, or production and editing requirements.Choose a transparent image formatFor transparency, consider whether you need partial opacity, photographic detail, or scalable vector artwork, then check destination support.Choose a format for animationUse GIF or animated WebP/AVIF for short image loops. Consider video when you need longer playback, audio, or controls; test real files in the target environment.

References and specifications