Should I export website images at 2x the displayed size for Retina screens?
For images whose sharpness sells, yes: high-density screens show more detail from a 2x image. But doubling the width means four times the pixels and a heavier file. Use 2x for hero and product images, 1x for thumbnails, and compress both. The resizer produces each copy with the ratio locked.
What happens on a Retina screen
High-density screens, such as recent phones and Mac displays, put two or more physical pixels where the layout has one. An image displayed 800 wide on the page covers 1600 real pixels on such a screen. If the file itself is only 800 px, the device stretches it, and it looks slightly softer than the text around it, which you notice on product photos with fine texture like fabric or leather.
The cost, in numbers
A 4032 × 3024 photo displayed 800 wide on the page.
The 1x copy: width 800 with the ratio lock on gives 800 × 600, which is 0.48 megapixels.
The 2x copy: width 1600 gives 1600 × 1200, which is 1.92 megapixels.
Twice the width is four times the pixels, and the file grows accordingly, though not in exactly the same proportion.
Which images deserve 2x
- The main product photo and any image shoppers zoom into for detail: yes, sharpness sells here.
- The home page banner: usually yes, but it is the largest image on the site, so compress it well.
- Thumbnails in a product grid and side images in articles: 1x is enough, since they are small and nobody inspects them.
- Logos and icons: a vector version is better if you have one; otherwise a 2x PNG.
How to put both copies on the page
If you control your page's code, the browser can choose for itself: the 1x copy on ordinary screens and the 2x copy on high-density ones. Prepare both copies in the Image resizer, whose file names end with their size automatically, then write the tag like this:
<img src="bag-800x600.jpg" srcset="bag-1600x1200.jpg 2x" width="800" height="600" alt="Leather bag">
If your store runs on a ready-made platform you usually do not control this tag, and many platforms create the copies themselves. In that case upload an image large enough for the 2x copy, and check what the platform recommends.
Do not forget the weight
2x doubles sharpness and weight together. After preparing the 2x copy, lower the quality a little in the tool or run the files through the Image compressor. On high-density screens the tiny pixels hide part of the compression artifacts, so the 2x copy can take a slightly lower quality than the 1x one.
Common questions
What about 3x?
Some phones use a density above 2x, but the difference the eye sees shrinks while the weight grows a lot. 2x is a practical middle ground for most sites.
Should I upload only the 2x copy?
You can, but visitors on ordinary screens will download a bigger file than they need. Both copies are better if your theme allows it.