Image Format Cheat Sheet
Image format cheat sheet: extensions, MIME types, compression, transparency and animation support, and best-use cases for PNG, JPEG, WebP, AVIF, GIF, SVG, ICO and HEIC.
How It Works
Image formats split into raster (pixel grids: PNG, JPEG, WebP) and vector (geometric instructions: SVG). Raster blurs when scaled up; vector stays sharp at any size, ideal for icons and logos.
Lossy (JPEG, lossy WebP) is smaller but drops detail; lossless (PNG, lossless WebP) keeps every pixel, good for screenshots and line art. Transparency needs an alpha channel (PNG/WebP/AVIF support it). Modern WebP/AVIF are far smaller at similar quality and are the performance default.
When to Use This Table
This table is for choosing an image format on the web. It puts JPEG, PNG, GIF, WebP, AVIF, BMP, ICO and SVG side by side by extension and MIME type, compression, transparency, animation and best use, so trade-offs are easy to compare.
When not to consult it: you are tuning the image pipeline (quality settings, colour space, responsive cropping, server-side conversion). Format choice is only the first step; the correct approach is transcoding into several target sizes on upload and pairing srcset with sizes, rather than serving one original and letting the browser cope.
Rule of thumb: decide on transparency and animation first. Animation means GIF, WebP or AVIF, where WebP and AVIF are much smaller; transparency means PNG, WebP or AVIF, since GIF only supports 1-bit transparency; with neither requirement, JPEG and WebP are comparable in size for photos.
Mind the division between SVG and raster formats: SVG is vector, ideal for icons and illustrations, but wrong for photographic bitmaps — an embedded base64 photo balloons the file. Conversely a PNG logo goes blurry on high-density displays. Judge by whether the content is geometry or pixels, not by file size.
Boundaries and Common Pitfalls
AVIF and WebP support is still evolving and old browsers degrade silently
Modern browsers all support both, but Safari before 16 has no AVIF at all and some environments lack WebP. Serving only AVIF/WebP makes older browsers show nothing at all — no error, just an empty slot. Provide a <picture> fallback chain of AVIF then WebP then JPEG or PNG. Also note that without Accept header negotiation the server sends one format to everyone, wasting the size advantage of the newer formats.
Unoptimised PNG can be more than ten times larger than JPEG
Storing photographic content as PNG is a classic mistake: PNG is lossless and compresses photos poorly, so a 1920×1080 PNG often runs to several megabytes while the JPEG needs a few hundred kilobytes. Use the presence of continuous tonal gradients as the test — present means photos and illustrations, choose JPEG/WebP/AVIF; absent means icons, text, screenshots and anything needing transparency, choose PNG. Compressing to the actual display size usually yields more than switching format.
Animated file size and decode cost are routinely underestimated
A three-second GIF at 800×600 often runs to several megabytes, and because each frame is compressed independently decoding costs significant CPU, which visibly stalls on low-end devices. Modern alternatives: animated WebP is typically a third of the GIF size, AVIF smaller still, and both work with <img loading="lazy"> and CSS playback control. For longer animations, a <video> with autoplay muted playsinline is better on both size and performance.
How This Relates to Neighbours
To process actual image files (compress, crop, convert, batch), use the in-site image tools; this page is a format selection reference.
Adjusting how images behave on the page (lazy loading, responsive sizes, placeholders) is frontend performance work, out of scope here.
Assessing visual quality and accessibility such as alt text is a content concern; format choice does not affect accessibility.
If the goal is debugging a missing image, check the URL and responsive rules first — a format/MIME mismatch also makes the browser refuse to render.
Practical Snippet
Key points: (1) new formats need a <picture> fallback chain or Safari before 16 shows nothing at all without any error; (2) never store photos as PNG — an unoptimised PNG can be ten times the JPEG, and the test is whether continuous tonal gradients are present; (3) transcoding to several target sizes on upload and pairing srcset with sizes usually beats switching format; (4) prefer <video> over long GIF or animated images for both size and decode cost; (5) the server should negotiate formats via the Accept header, otherwise everyone receives the same one and the new formats buy nothing.
<!-- ① 多源回退：新格式在前，老浏览器自动落到后面 -->
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="描述性替代文本" width="1200" height="630" loading="lazy">
</picture>
<!-- ② 按断点给不同尺寸（避免让手机下载 2000px 原图） -->
<img src="card-400.jpg"
srcset="card-400.jpg 400w, card-800.jpg 800w, card-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 400px"
width="1200" height="800" loading="lazy" decoding="async" alt="卡片插图">
<!-- ③ 格式选择速查 -->
<!-- 照片/渐变 → JPEG（兼容最好）或 WebP/AVIF（更小） -->
<!-- 图标/截图 → PNG（需透明）或 SVG（矢量、任意缩放） -->
<!-- 简单动图 → WebP 动图（约为 GIF 的 1/3） -->
<!-- 长动效/视频 → <video autoplay muted playsinline loop> -->
<!-- ④ SVG 用 currentColor 跟随主题色，避免为两种主题各存一份 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" aria-hidden="true">
<circle cx="12" cy="12" r="9"></circle>
</svg>
<!-- ⑤ 🔴 常见错误：把照片存成 PNG（体积差十倍） -->
<!-- ❌ <img src="photo.png"> 1920×1080 可能 3–5 MB -->
<!-- ✅ <img src="photo.webp"> 同图约 200–400 KB -->
<!-- ⑥ 长动图改用视频，体积与解码都更省 -->
<video src="demo.webm" autoplay muted loop playsinline width="640" height="360"></video>Practical Notes
- Lossless PNG is often larger for photosPNG compresses continuous-tone photos far worse than JPEG or WebP, so the same photo can be 5 to 10 times larger as PNG. Choose by content: graphics, screenshots and transparency want PNG or WebP; photographic content wants JPEG, WebP or AVIF.
- Lossy pipelines also touch metadata and colour profilesIf a tool drops the ICC profile during lossy compression, colours shift across displays; stripping the EXIF Orientation tag makes photos appear rotated. Decide explicitly what happens to those fields in the pipeline.
- Evaluate AVIF/WebP compatibility and decode cost separatelyAVIF compresses better but decodes slower and is poorly supported on older devices. Serve multiple formats through <picture> with capability fallback instead of committing the whole site to one new format.
Data Sources
- W3C PNG (ISO/IEC 15948)
- ITU-T T.81 (JPEG)
- Google WebP container specification
- ISO/IEC 23008-12 (HEIF / AVIF)
Codes, names and definitions above come from public specifications; we claim no originality over the specification data itself. The arrangement, Chinese annotations and practical notes on this page are written by us.
| Format | Ext / MIME | Compression | Transparent | Animation | Best use |
|---|---|---|---|---|---|
| PNG | .png · image/png | Lossless | Yes | No | Icons, screenshots, anything needing transparency or crisp text |
| JPEG | .jpg/.jpeg · image/jpeg | Lossy | No | No | Photos and color-rich images (smaller size) |
| WebP | .webp · image/webp | Lossy + lossless | Yes | No | Web images; replaces PNG/JPEG to save bandwidth |
| AVIF | .avif · image/avif | Lossy + lossless | Yes | No | Next-gen web images; better compression than WebP |
| GIF | .gif · image/gif | Lossless (palette) | 1-bit | Yes | Simple animations, memes |
| APNG | .apng · image/apng | Lossless | Yes | Yes | High-quality animation; GIF replacement |
| BMP | .bmp · image/bmp | Uncompressed | No | No | Windows bitmaps, lossless masters |
| TIFF | .tif/.tiff · image/tiff | Lossless | Yes | No | Print prep, professional photography archives |
| ICO | .ico · image/x-icon | Lossless | Yes | No | Website favicons (multi-size) |
| SVG | .svg · image/svg+xml | Vector | Yes | Yes (CSS/SMIL) | Icons, logos, scalable illustrations |
| HEIC | .heic · image/heic | Lossy | Yes | No | iPhone photos (efficient compression) |
| JPEG XL | .jxl · image/jxl | Lossy + lossless | Yes | Yes | Experimental next-gen format |
Frequently Asked Questions
When should I use PNG vs JPEG?
Use PNG (lossless, supports transparency) for icons, screenshots, and graphics with sharp edges or text. Use JPEG (lossy) for photos and color-rich images where smaller size matters and transparency is not needed.
What is the difference between WebP and AVIF?
Both support lossy and lossless compression and transparency. AVIF compresses better with higher quality but encodes slower and has slightly weaker legacy-browser support; WebP is more widely compatible and faster to decode. Prefer WebP/AVIF over legacy JPEG and PNG for new projects.
Which format should I use for a transparent background?
PNG, WebP, AVIF, GIF (1-bit only) and SVG all support transparency; JPEG does not and fills transparency with white. For logos, stickers and assets with an alpha channel, PNG or WebP are the safe choices.
When should I use SVG?
Use SVG for icons, logos and illustrations: it scales without blur, stays small, and can be recolored and animated with CSS. Photos are bitmaps and belong in PNG/JPEG/WebP, not SVG.