Images on the Web: the complete, practical guide

When your page loads, chances are most of the bytes are images. Choosing the right format is the fastest way to cut weight without sacrificing clarity. This guide compares GIF, JPG/JPEG, PNG, WebP, HEIF/HEIC, TIFF, BMP, and SVG—what each is, when to use them, and when to avoid them.

Two families: raster and vector

All web images fall into two camps. Raster formats (JPG, PNG, WebP, GIF, HEIF/HEIC, TIFF, BMP) store pixels in a grid—great for photos and rich gradients, but they blur if you zoom. Vector formats (SVG) store math describing shapes and text—perfect for logos and UI icons because they stay razor‑sharp at any size.

Format by format

JPG / JPEG (Joint Photographic Experts Group)

What it is: a lossy, 8‑bit, DCT‑based compression format tuned for photographs. It’s universally supported and fast to decode.

Use when: you have photographic content with lots of colors and detail; you need broad compatibility; small file size matters more than artifact‑free perfection.

Avoid when: the image needs crisp edges or text (logos, UI), transparency/alpha, or frequent re‑editing (loss accumulates). JPG struggles with flat colors and sharp contrast, producing blocky or “ringing” artifacts.

Pro tips: export at a quality that balances size and artifacts (often 70–85). Use chroma subsampling for photos (4:2:0) but disable it for UI/diagrams. Strip metadata unless required. For high‑density displays, serve 2×/3× sizes with srcset.

PNG (Portable Network Graphics)

What it is: a lossless raster format with deflate compression and full alpha transparency, in 8‑bit (PNG‑8) or 24/32‑bit (PNG‑24/32) variants.

Use when: you need pixel‑perfect edges, transparency, or limited‑palette artwork (charts, UI, diagrams, screenshots). PNG excels at flat colors and crisp lines.

Avoid when: you’re shipping photographic content—PNG files are usually much larger than JPG/WebP at similar visual quality.

Pro tips: reduce palette for graphics (PNG‑8 with 64–256 colors). Optimize with tools that remove ancillary chunks. For screenshots with gradients, consider WebP lossless or high‑quality JPG/WebP lossy.

WebP

What it is: a modern format from Google that supports lossy and lossless compression, plus alpha and animation. It’s supported by all current browsers and is a strong replacement for both JPG and PNG in most cases.

Use when: you want smaller files at similar quality compared to JPG/PNG; you need alpha transparency with smaller files than PNG; you want a single format for most raster needs.

Avoid when: you must support legacy browsers that don’t handle WebP (rare today), or when an advanced workflow requires features outside WebP’s scope (e.g., 16‑bit/channel precision—use TIFF or PNG for that).

Pro tips: try lossy for photos and illustrations (quality ~75–85) and lossless for UI/screenshot assets. Use picture with type="image/webp" and a JPG/PNG fallback if supporting older clients.

GIF (Graphics Interchange Format)

What it is: an 8‑bit, lossless‑ish format with a 256‑color palette and basic animation support.

Use when: compatibility with ancient systems is necessary, or when you truly need a simple loop with very limited colors.

Avoid when: you need photographic quality, smooth gradients, or efficient animation. For motion, encode as video (H.264/AVC or VP9/AV1) or at least as animated WebP/APNG—the file size will be dramatically smaller.

Pro tips: if you inherit animated GIFs, consider transcoding to video for delivery. For tiny UI micro‑animations, prefer CSS or SVG animation.

HEIF / HEIC (High Efficiency Image File / Container)

What it is: a container (HEIF) often holding images encoded with HEVC/H.265 (HEIC). iOS devices default to HEIC for camera photos, enabling better compression and features like Live Photos and depth maps.

Use when: storing photos on Apple devices or in native apps that support HEIF/HEVC, where storage efficiency and modern features matter.

Avoid when: serving general web audiences—browser support remains mixed compared to WebP/PNG/JPG. Convert to WebP or JPG for web delivery.

Pro tips: on upload, detect HEIC and convert server‑side to WebP/JPG while preserving EXIF orientation. Keep the original in cold storage if you need the highest‑quality source.

TIFF (Tagged Image File Format)

What it is: a flexible container widely used in print, scanning, and professional photography. Supports multiple color depths (including 16‑bit), lossless compression (LZW, ZIP), and even layered data.

Use when: you need a high‑fidelity master for print or editing, or archival of scans and camera RAW conversions.

Avoid when: delivering to the web: TIFFs are large and not natively supported by browsers. Export to WebP/JPG/PNG/SVG for publishing.

Pro tips: keep TIFFs in your production pipeline as the lossless source, and generate web derivatives automatically via your CDN or build process.

BMP (Bitmap)

What it is: an uncompressed raster format from early Windows. Simple, large, and rarely used today.

Use when: practically never on the web. BMP can be useful for certain legacy integrations or quick tests but should be transcoded before publishing.

Avoid when: you care about file size or modern features—use PNG (lossless) or WebP/JPG (lossy) instead.

SVG (Scalable Vector Graphics)

What it is: a vector format based on XML. Shapes, paths, and text remain perfectly crisp at any size, and SVGs are editable code.

Use when: you have logos, icons, charts, and UI elements that benefit from sharp edges and tiny files. SVG supports CSS, accessibility attributes, and even animation.

Avoid when: representing photographic detail or complex textures—raster images are a better fit. For untrusted uploads, sanitize SVG to avoid script injection.

Pro tips: inline small icons as SVG markup (fewer requests), add role="img" and aria-label or <title> for accessibility, and minify with an optimizer.

Decision guide

Transparency, color, and bit depth

• Alpha channels: PNG and WebP support true alpha (smooth transparency). JPG does not. GIF uses a single on/off transparent color (no soft edges).
• Color depth: for web delivery, 8‑bit/channel is standard. PNG and TIFF can store 16‑bit/channel for editing and print. HEIC can store >8‑bit depth but often ends up converted for web.
• ICC profiles & color spaces: embed sRGB for consistent display. Strip exotic profiles before publishing unless required.

Animation and motion

Looping GIFs are everywhere, but they’re inefficient. If your goal is to show motion on a web page:

• Use video (MP4/WebM) for anything more than tiny UI loops—better compression, hardware decoding, and playback control.
• Use animated WebP or APNG for short, lightweight loops that must remain images.
• Use SVG/CSS animations for interface micro‑interactions.

Delivery and optimization checklist

• Right format: pick from the matrix above based on content.
• Right size: resize to the largest display size needed and provide responsive srcset.
• Right quality: use perceptual settings (JPG/WebP ~75–85) and inspect for artifacts.
• Compression & stripping: remove unnecessary metadata; lossless‑optimize PNG; prefer WebP when possible.
• Lazy‑load off‑screen images with loading="lazy" and decoding="async".
• CDN headers: serve with long Cache-Control for fingerprinted assets; vary by DPR if you serve device‑specific sizes.
• Security: sanitize SVG uploads; respect EXIF orientation on user photos.
• Accessibility: provide descriptive alt text; avoid text baked into images when HTML can do it better.

When each format shines (and when it doesn’t)

Implementation snippets

Serve WebP with fallbacks using the <picture> element:

<picture>
  <source type="image/webp" srcset="/web_images/photo-800.webp 800w, /web_images/photo-1600.webp 1600w" sizes="(max-width: 800px) 100vw, 800px">
  <img src="/web_images/photo-800.jpg" width="800" height="533" alt="Beautiful scene" loading="lazy" decoding="async">
</picture>

Optimize PNG for flat graphics (palette‑based) and keep master assets in SVG/TIFF for editing; publish WebP/JPG/PNG derivatives via your CDN.

Edge cases and special subjects

Screenshots & UI captures

Screenshots mix flat UI elements with gradients and text. PNG (lossless) preserves pixel-perfect edges, but WebP lossless can be even smaller for complex screens. If gradients band, consider bumping quality or using a dithering export option. Avoid JPG for UI because text can smear and introduce color fringing.

Charts, infographics, and line art

These assets thrive as SVG: tiny, crisp, and accessible when you add titles and roles. If the chart includes a photographic background or many raster effects, export a hybrid: keep the base as a compressed photo (JPG/WebP) and layer the axes and labels as HTML/CSS or SVG on top.

Pixel art and retro graphics

When each pixel is intentional, you want lossless compression and nearest-neighbor scaling. PNG is ideal; set image-rendering: pixelated in CSS to retain sharp blocks at larger sizes. Avoid WebP/JPG lossy modes, which can soften the crisp edges you want.

High dynamic range (HDR) & 10-bit

Modern camera pipelines capture more than 8 bits per channel. While web delivery predominantly targets 8-bit sRGB, you can keep 10/12/16-bit masters (TIFF/PNG/RAW) for editing and grading, then export 8-bit WebP/JPG for publication. Some environments can display HDR via video; still-image HDR on the public web remains nascent.

EXIF, orientation, and privacy

Cameras embed metadata (EXIF) like orientation, GPS, and timestamps. Many JPEGs depend on EXIF orientation to display upright. On ingestion, normalize by rotating pixels and stripping sensitive EXIF fields. For user-upload systems, store a sanitized copy and keep the original in secure storage if needed.

Security with SVG uploads

SVG is code. Treat it like any other user-supplied markup: sanitize aggressively (remove scripts, external references, and event handlers), serve with the correct Content-Security-Policy, and consider delivering untrusted SVG as an <img> resource rather than inlining it.

Responsive images that actually work

Device sizes, pixel densities, and layouts vary wildly. Responsive images let the browser pick the best file for the current viewport and DPR. Two essential tools:

1. Width descriptors with srcset (e.g., 400w, 800w, 1600w) tell the browser available intrinsic widths.
2. sizes declares the CSS slot width in different breakpoints (e.g., (max-width: 800px) 100vw, 800px).

<img
  src="/web_images/hero-800.jpg"
  srcset="/web_images/hero-400.webp 400w,
          /web_images/hero-800.webp 800w,
          /web_images/hero-1600.webp 1600w"
  sizes="(max-width: 900px) 100vw, 900px"
  alt="Hero photograph"
  loading="lazy"
  decoding="async">

When you also want format negotiation, wrap the pattern in <picture> and provide a JPG/PNG fallback as shown earlier. For retina screens, you can use density descriptors (e.g., 1x, 2x) on fixed-size UI assets.

CDN strategy & caching

• Immutable fingerprints: name files with content hashes (logo.ab12cd.svg) and set Cache-Control: public, max-age=31536000, immutable. Change the name when contents change.
• On-the-fly transforms: consider a CDN that creates derivatives (format/size/quality) from a single master. Negotiate with Accept: headers and Vary: Accept or by URL params.
• Compression at the edge: serve SVG, JSON, and XML with Brotli (br) or gzip.
• Hotlink protection & tokens: for valuable assets, guard with signed URLs or referrer checks.

Workflow: from source to shipped

1. Keep masters in high-fidelity formats (SVG for vector, TIFF/PNG for raster).
2. Automate exports to WebP/JPG/PNG in target widths and qualities.
3. Generate social cards at 1200×630 (this page includes them for you).
4. Lint & optimize in CI (strip metadata, palette-reduce, minify SVG).
5. Measure real-user metrics (LCP, CLS) and watch image bytes in your analytics.

Compatibility snapshots (practical notes)

Modern browsers support WebP broadly and continue to display JPG/PNG/GIF universally. SVG is supported everywhere for inline and file usage. HEIC remains best for capture but often needs conversion for web publishing. TIFF and BMP are largely outside the browser world. If you have to support very old devices, use <picture> fallbacks or a server-side user-agent sniff with conservative defaults.

Testing checklist

• Verify alt text is present and meaningful.
• Check contrast when text overlays images; add a gradient scrim if necessary.
• Test dark mode assets (icons may need alternate fills).
• Inspect network waterfall for double downloads or missing sizes hints.
• Review EXIF orientation handling for user uploads.
• Confirm cache headers and compression at the edge.

Last updated August 15, 2025.