Choose by the job the image must do
Begin with the asset, not the extension. A photograph is continuous-tone content, so some loss can be acceptable at its displayed size. A screenshot, chart, logo, or line drawing has crisp edges and text, where artifacts are conspicuous. Preserve these with lossless output or careful approval. Use SVG for a vector logo or diagram when available.
Then identify capabilities. Alpha means per-pixel transparency. Animation is a sequence of frames. Required browser coverage, publishing volume, and build time are delivery constraints that can override a smaller format.
Test lossy AVIF and WebP first. Keep JPEG available when a broadly compatible opaque fallback is needed.
Keep a lossless source. Compare PNG with lossless WebP or AVIF at the actual display scale before choosing.
Use AVIF, WebP, or PNG; do not choose JPEG because it does not carry an alpha channel.
Understand what each format contributes
AVIF stores AV1-coded images in a HEIF-based format. Its specification includes still images, image sequences, and alpha image items. It supports lossy and lossless encoding, transparency, and animation. Savings are not fixed: source content, encoder, speed, target quality, and metadata change the result.
WebP supports lossy and lossless modes, transparency, and animation. JPEG is a lossy still-image format with very broad historical support, useful as an opaque-photo fallback. PNG is lossless with alpha, making it a sound fallback for exact graphics, though photographic PNGs are often inefficient. Ordinary PNG is static; test a separate animation format when motion is needed.
Best explored for high-value raster images where smaller transfer size can justify encoding and fallback work.
Useful as a modern general-purpose raster option, including transparency and animated sequences.
Use for opaque photographic fallback, not for a transparent logo or cutout.
Use for lossless, transparent raster fallback and for assets where pixel fidelity matters more than minimum bytes.
Build a fallback path instead of betting on one format
The picture element lets a browser evaluate alternatives. Put AVIF first, then WebP, then an img fallback in JPEG or PNG, with the right MIME type. The browser skips an unsupported source and uses the fallback when no source is usable. Keep the same meaningful alternative text unless you intentionally change the crop.
Format fallback does not replace responsive sizing. Supply width-based candidates and a truthful sizes value when the slot varies. Include width and height so the browser can reserve space. A small-format file at an oversized pixel dimension still wastes bytes.
AVIF first, WebP second, then JPEG for opaque photos or PNG when the fallback needs transparency or lossless edges.
If a server selects formats from request capabilities rather than picture markup, configure cache variation correctly and test that each client receives a decodable representation.
Use a client without the preferred decoder or deliberately disable a source in staging; confirm that the image, dimensions, and alternative text remain correct.
Budget encoding time and protect visual quality
Modern compression moves work into encoding. AVIF’s reference encoder offers a speed range from 0, slowest, to 10, fastest; WebP also trades more encoder work for time, output size, and quality. Treat a batch re-encode or on-demand transformation as an operational decision, not a free setting change.
Set a repeatable policy by asset class and review originals at common display sizes. Inspect faces, gradients, text, edges, and transparent boundaries. Keep the master and record encoder version and settings so a defect can be reproduced and rolled back.
Faster encoding can reduce build pressure but may produce a larger file or less efficient compression; benchmark your own source set.
A score or preset cannot replace visual review of the image regions that carry meaning for visitors.
Make image-format changes a proactive reliability practice
For Status Is UP, image optimization is proactive uptime work when it prevents a release from degrading a critical page. Inventory critical image URLs, stage a representative conversion, and verify content type, CDN behavior, and cache invalidation before a site-wide migration.
Deploy in a reversible batch. Compare rendering and transfer behavior on the release candidate, then keep the old representation until the new path is proven. If a transformation or cache rule fails, restore the known-good source. This is a resilient delivery direction, not a universal mandate for AVIF or multiple formats.
Prioritize the lead image and content images that influence the first useful view, not every archive image at once.
Keep deterministic asset names or a versioned mapping so the prior JPEG, PNG, or WebP path can be restored quickly.