Format Atlas

Guides

Choose a web image format

Decide what kind of image you are serving and which browsers and tools must support it before choosing a web format.

Which format should you choose?

Choose by the role each file plays in your workflow.

  • Mostly photos → start with JPEG; consider WebP or AVIF
  • Transparent illustration → PNG or WebP
  • Logos and geometric graphics → SVG

Separate photos from illustrations

Photographs, transparent illustrations, and scalable logos prioritize different features, so choose based on the actual asset.

Check before delivery

For newer formats, verify target browsers, the conversion workflow, and how fallback images will be served.

Formats to consider

JPEG

Good for: Photos requiring broad compatibility

Less suitable for: Images requiring transparency

PNG

Good for: Transparent images, screenshots, and illustrations

Less suitable for: Photos where file size is the main concern

WebP

Good for: Web photos or transparent images

Less suitable for: Fixed delivery without checking support

SVG

Good for: Images dominated by logos or geometric graphics

Less suitable for: A photograph itself

Before you export

  • Changing formats alone does not consistently improve size or quality.
  • Video can be more suitable for some animations.

Related comparisons

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.PNG vs WebPBoth PNG and WebP can support transparency. PNG is a widely supported lossless format; WebP is an option for optimizing web delivery and can also support animation. Compare real assets and target browsers.AVIF vs WebPAVIF and WebP both target web images and support lossy and lossless options and transparency. Compare quality, size, encoding speed, and support using the same images; serving more than one format may be appropriate.

Guides

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.

References and specifications