Complete Image Format Guide for the Web

Evolution of Web Image Formats

Web image format development spans over 30 years. 1990s: GIF (1987) and JPG (1992) dominated — GIF for simple graphics, JPG for photos. PNG was released in 1996, providing lossless compression and transparency support, gradually replacing GIF for static graphics. 2000s: JPG and PNG became standards, SVG (vector graphics) emerged. 2010s: Google released WebP (2010), introducing more efficient compression. 2020s: AVIF (2019) appeared based on the AV1 video codec, providing the highest compression efficiency to date.

Six Major Web Image Format Details

JPG: suitable for photos, lossy compression, no transparency, small files, best compatibility. PNG: suitable for graphics and UI, lossless compression, supports transparency, larger files. WebP: all-purpose, supports both lossy/lossless and transparency, smaller than JPG/PNG, 97% browser support. AVIF: next-gen format, strongest compression, supports HDR, 90%+ browser support but slower encoding. GIF: only for simple animations, 256-color limit, can be replaced by WebP animation or video. SVG: vector graphics, infinitely scalable without quality loss, suitable for logos, icons, and illustrations, not suitable for photos.

Decision Tree: Choosing the Right Format for Your Images

图片是矢量图/Logo/图标?
Is it a vector/logo/icon?
  是/Yes → SVG
  否/No ↓

需要动画?
Need animation?
  是/Yes → WebP 动画 or MP4 视频 (优于 GIF)
  否/No ↓

是照片/自然图像?
Is it a photo/natural image?
  是/Yes → WebP(lossy) > AVIF > JPG
  否/No ↓

需要透明背景?
Need transparent background?
  是/Yes → WebP(lossless) > PNG
  否/No ↓

是 UI/截图/图表?
Is it UI/screenshot/chart?
  → WebP(lossless) > PNG

需要最广泛兼容性（邮件/打印）?
Need widest compatibility (email/print)?
  → JPG (照片/photos) or PNG (图形/graphics)

SVG's Special Position

SVG (Scalable Vector Graphics) occupies a unique position — it's not a raster image (not composed of pixels) but an XML-format vector description. SVG advantages: infinitely scalable without quality loss (perfect on Retina and 4K screens); usually small file size (especially for simple graphics); can be animated with CSS; can be inlined in HTML, reducing HTTP requests; colors can be controlled with CSS (convenient for theme switching).

SVG limitations: not suitable for photos or complex natural scenes (files become very large); complex SVG rendering may use more CPU than raster images; some old email clients don't support SVG. For website logos, icon systems, and illustrations, SVG is the preferred choice.

Format Selection for Responsive Images

In responsive web design, images need to adapt to different screen sizes and resolutions. Best practices: use srcset to provide different resolution versions (1x, 2x for Retina screens), use picture + source to provide WebP and JPG/PNG fallbacks, use the sizes attribute to specify the image size used at different viewport widths.

Image Formats and Core Web Vitals

Google's Core Web Vitals are directly affected by image format choices. LCP (Largest Contentful Paint) is one of the most important metrics, typically determined by the largest image on the page. Image strategies for optimizing LCP: use WebP or AVIF for hero images; set correct width and height attributes in HTML (prevents layout shift, improves CLS); use fetchpriority="high" on above-the-fold images to boost loading priority; use loading="lazy" on below-the-fold images for lazy loading.

Ultimate Decision Principle for Format Selection

One-sentence summary: in 2025, for all raster images on websites, use WebP as the primary format with JPG/PNG as fallback (using the picture element), SVG for all graphics that can be vector-described (logos, icons, illustrations), and AVIF as an additional optimization for supporting browsers. Following this principle achieves the optimal balance between performance, compatibility, and development complexity.