Image Srcset Size Calculator

Image Srcset Size Calculator

Building responsive images for different screen densities? This calculator gives the exact widths to generate for your srcset attribute.

Srcset Width = Display Width x Pixel Density(1x, 1.5x, 2x, 3x)

Example

A 400px display width:

Widths needed: 400px, 600px, 800px, 1200px

Why Multiple Image Sizes Are Needed

Generating multiple image sizes at these standard pixel-density multiples lets the browser automatically choose the most appropriately sized image for each visitor's specific screen density, based on their device's actual pixel ratio.

The Two Failure Modes This Avoids

This avoids both blurry images on high-density (Retina-style) screens, which would happen if only a standard 1x image were served, and unnecessarily large downloads on standard-density screens, which would happen if only a large 3x image were served to every visitor regardless of their actual display density.