Do I need a 3x image for a screen with a device pixel ratio of 3?

For photos, a 3x image rarely gives visible benefit over 2x. The extra pixels do not improve sharpness at normal viewing distances, so stick with 1x and 2x.

How does the browser know which image to pick from srcset?

The browser compares the x descriptor (for example 1x or 2x) to the screen’s device pixel ratio and selects the closest matching candidate. It only downloads that one image.

Can I use the same compression quality for 1x and 2x images?

You can, but you will miss the main way to control retina images file size. Use a lower compression quality for 2x images because the extra pixels hide artifacts at display size.

Is SVG always better than a 2x raster for logos?

SVG is resolution-independent and often the best choice for logos and icons. It scales perfectly to any device pixel ratio without adding file size, so you do not need multiple raster sizes.

Retina Images Without Huge Files: 2x Done Right

You can serve sharp images on high-density screens without doubling bandwidth. The key is how retina image file size relates to device pixel ratio. A retina screen has a device pixel ratio of 2 or 3. That means 2 or 3 physical pixels per CSS pixel in each direction. A 2x image has twice the width and height, so four times the pixels, of a 1x image. Keep file sizes manageable. Use lower compression quality for 2x images. Let the browser choose the right asset with srcset and x descriptors.

How Retina Screens Change Image Delivery

High-density screens pack more physical pixels into the same space. The device pixel ratio tells you how many physical pixels fit into one CSS pixel. At a ratio of 2, the screen has 2 physical pixels per CSS pixel in each direction. A 1x image will look blurry because the browser has to stretch it. A 2x image, with twice the width and height, uses four times the pixels to match the screen’s density. Without care, this balloons file sizes. Serve 2x images that look sharp without huge files. Adjust the compression and use the right markup.

Use Srcset with X Descriptors

The srcset attribute on an <img> element lets you list multiple image candidates with descriptors. The browser picks the best one based on the screen’s device pixel ratio and downloads only that candidate. This stops a 2x image from reaching a standard screen, wasting bandwidth.

Writing Srcset Markup

Write the srcset attribute with image URLs and x descriptors. The browser compares the descriptor to the screen’s device pixel ratio and chooses the closest match. Use values like logo.png 1x, [email protected] 2x.

For screens with a ratio of 3, you could add a 3x candidate. Don’t bother for photos. The visible gain over 2x is negligible. Stick with 1x and 2x for most images.

Lower Compression Quality for 2x Images

Use a lower compression quality for 2x images than for 1x images. The extra pixels hide artifacts at display size. A 2x image has four times the pixel data. With more aggressive compression, it still looks sharp when scaled down to the same display size as the 1x version. This is the main way to control retina image file size without visible loss.

Applying Lower Quality

Export your 1x image at normal compression (a typical range for JPEG).
Export the 2x version at a lower quality.
Test both at the screen’s native resolution. Confirm the 2x image still holds up.

When to Use SVG Instead of Rasters

SVG is resolution-independent. It is the best choice for logos and icons. SVG describes shapes mathematically, so it scales perfectly to any device pixel ratio without adding file size. For simple graphics, it avoids the need for multiple 2x assets entirely. Use SVG for logos, icons, and diagrams. Use rasters for photos.

Avoid Unnecessary 3x Assets

Screens with a device pixel ratio of 3 exist. Serving 3x images rarely gives visible benefit over 2x for photos. The difference is subtle at typical viewing distances. The extra pixels add file size without a noticeable improvement. For most sites, 1x and 2x candidates in srcset cover all screens well.

Serve 2x Images on High DPI Pages

For high DPI image pages, use the srcset approach with x descriptors and lower compression for 2x. This keeps your page fast on all screens. The browser downloads only the candidate it selects. A standard screen user never touches the 2x file. A retina screen user gets a sharp image without the full four-times file-size penalty.

Test Your 2x Images

After creating 2x assets, test on a device with a device pixel ratio of 2 or 3. Check that the image looks sharp and the file size is reasonable. If the 2x image is still too large, lower the compression quality further. Use a tool like Tiny Image Compress to reduce file sizes while keeping the required dimensions.