Frontend · JavaScript · Interview

Image Performance Optimization: Responsive Delivery, Modern Formats, and the DPR Sweet Spot

By 林希_Rachel_傻希希 · Jul 4, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Unoptimized images are the single largest contributor to page bloat. Knowing how to serve the right resolution and format per device—and where to cap quality—directly cuts bandwidth bills and improves Core Web Vitals without any visible downgrade for users.

Summary

Images dominate web page weight, so optimization means delivering the fewest bytes without visible quality loss. The core techniques are responsive sizing with srcset and the picture element, adopting next-gen formats like WebP and AVIF with fallback chains, and controlling loading with lazy loading and async decoding.

Device pixel ratio (DPR) is the key to responsive images. A CSS pixel maps to multiple physical screen pixels on high-DPR displays, so a 500px container on a DPR=3 phone needs a 1500px-wide image to stay sharp. Sending that 3x image to a DPR=1 desktop wastes 9x the bandwidth for zero visual gain.

Large-scale deployments cap resolution at 2x because the human eye cannot distinguish 2x from 3x at normal viewing distance. Image CDNs handle this dynamically, cropping on the fly via URL parameters so the frontend stays clean while every device gets exactly the right file size.

Takeaways

— Use srcset and sizes to let the browser pick the best image resolution for the current viewport and DPR.

— The picture element with source media queries can force different crops or formats at specific breakpoints.

— AVIF saves over 50% file size versus JPEG at equivalent quality; WebP is the widely supported fallback.

— Server-side content negotiation reads the Accept header and can return modern formats even when the HTML src points to a JPEG.

— loading="lazy" prevents off-screen images from downloading until the user scrolls near them, saving initial bandwidth.

— decoding="async" offloads image decoding to a background thread so it doesn't block text and layout rendering.

— DPR is the ratio of physical screen pixels to CSS pixels; a DPR=3 screen uses 9 physical pixels to render one CSS pixel.

— At normal viewing distance, the human eye cannot distinguish DPR=2 from DPR=3, so capping images at 2x resolution saves massive bandwidth with no perceptual loss.

— Image CDNs can dynamically resize and reformat images via URL parameters, keeping frontend markup simple while serving optimized assets.

Conclusions

The DPR=2 cap is a rare, hard engineering rule backed by perceptual science—it's not a tradeoff but a free optimization with no downside.

Combining lazy loading with responsive images creates a compounding effect: the browser downloads only the necessary resolution and only when it's actually needed.

Server-side content negotiation decouples image optimization from HTML authoring, which is the only scalable approach for large content sites where markup changes are expensive.

Concepts & terms

Device Pixel Ratio (DPR)

The ratio between physical screen pixels and CSS logical pixels. A DPR of 2 means a 1px-by-1px CSS square is rendered using 2×2=4 physical pixels, enabling sharper text and images on high-density screens.

srcset and sizes

HTML attributes that provide the browser with a list of image candidates at different widths (srcset) and the layout width the image will occupy at various viewport sizes (sizes). The browser uses this plus the device's DPR to download the optimal resolution.

AVIF

A next-generation image format derived from the AV1 video codec. It achieves significantly better compression than JPEG and WebP, often halving file size at equivalent quality, but with slightly slower encoding and decoding.

Content Negotiation

An HTTP mechanism where the server inspects the request's Accept header to determine which image format the browser supports, then serves the best format (e.g., AVIF) even if the HTML src attribute references a JPEG.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗