Tests of srcset, sizes, device pixel ratio, art direction with the picture element and CSS background images, run in Chrome at phone, tablet and desktop viewports. Each guide records which file the browser actually downloaded and how many bytes it cost, so responsive markup can be checked against real behaviour rather than assumptions. The srcset test is the best starting point: a missing sizes value quadrupled one desktop download in our run.
object-fit: cover and srcset: Blurry Images and Hidden Bytes
Setting sizes to the box width made object-fit: cover enlarge a file a third too narrow. Files cropped to the box were sharp and 35 to 54 % smaller than the best srcset choice.
Responsive Delivery 4 min read
sizes for Grid Layouts: What 100vw Costs in a Card Grid
In a one- to four-column grid, sizes=100vw made Chrome download up to 556 KB for four cards where 92 KB was enough. A matching sizes list or sizes=auto picked the right files.
Responsive Delivery 4 min read
How Many srcset Widths Do You Need? Seven Candidate Lists Compared
Across 18 photos, candidates every 100 px wasted 6 % extra bytes on average and every 200 px 21 %. WordPress's default list wasted 56 % because nothing sits between 300 and 768 px.
Responsive Delivery 4 min read
Image Width vs File Size: What Halving the Dimensions Saves
Halving an image's width cut the file to about 31 % of its size, not 25 %: across 20 photos, bytes grew with pixel count to the power of 0.84 in JPEG and WebP and 0.82 in AVIF.
Responsive Delivery 3 min read
Resize Kernels Compared: Lanczos3, Mitchell, Linear and More
The resize kernel changed 400-pixel thumbnails by up to 30 % in file size: linear and mitchell were 15 to 18 % smaller than lanczos3 but softer, and nearest-neighbour was 30 % larger.
Responsive Delivery 4 min read
CSS image-set() With type(): Which Background File Chrome Downloads
image-set() with AVIF listed first made Chrome 155 download a 24.2 KB AVIF instead of the 54.1 KB JPEG, with a single request, even when a plain url() fallback was declared first.
Responsive Delivery 3 min read
srcset x vs w Descriptors: Which File Chrome Downloads at Each Pixel Ratio
For a 400-pixel image, x descriptors and w descriptors with sizes=400px chose the same files up to 3×. A sizes value of 100vw made a 1280-pixel window download a file 7.4 times larger.
Responsive Delivery 3 min read
srcset and sizes Measured: Which File Chrome Downloads on 3 Screens
A missing sizes attribute made Chrome download 64 KB instead of 16 KB on desktop for the same photo; on phones and tablets both srcset versions chose the same file.
Responsive Delivery 4 min read
High-DPI Images: How Many Pixels Are Worth the Bytes?
In an 800-pixel slot on a 2× screen, the 2× file scored 70.1 while a 1.5× file fell to 28.8 for 40 % fewer bytes. Doubling the width cost 3.3 times the bytes.
Responsive Delivery 4 min read
Art Direction With picture: Crops and Bytes Measured on 3 Screens
A portrait crop for phones made the market sign readable at no extra cost: Chrome downloaded 51 KB instead of 53 KB, and larger screens were unaffected.
Responsive Delivery 4 min read
CSS Background Heroes vs img: How Much Later Does the Image Load?
Moving the hero image into an external stylesheet delayed its download by 186 ms and LCP by about 180 ms. An inline style or a preload link removed the delay.
Responsive Delivery 4 min read