2

When building a web page, I've always created 2 different sprites for my icons. A sprite for normal images and a sprite for retina images. The retina images are saved out twice the size and twice the DPI.

Example:

Normal icon - 50x50 at 72 dpi Retina icon - 100x100 at 144 dpi

Using a retina display media query in my CSS, I would target the icon and replace the background image with a retina one and also apply the appropriate background sizing property. (e.g. if the image is 100x100, background-size: 50px 50px).

Instead of having 2 separate image sprites, I decided to combine my images into 1 sprite. Using 72 DPI, I have a normal icon and beneath it I have an icon that is twice the size (for retina). This seems to work just fine on a web page.

Aside from performance in downloading a larger image file, is there any reason why I should have separate images for retina and non-retina? Does DPI actually matter when saving out for retina or does it just need to be twice the size?

Improve this question

1 Answer 1

Reset to default
2

This topic is rather complex, but I will try to summarize the most important things.

DPI does not matter

The browser resizes the image according to the required pixel dimensions. DPI values will be ignored.

Don't use multiple image sizes in a sprite sheet

Using lower resolution images saves bandwidth and results in a faster download. Using both sizes in the same file will not save a single byte, it will add bytes and therefore is a bad idea.

Recommendations

  1. Use high resolution aka retina images only and let the browser resize them.

  2. Optimize all image files. BTW: A very good tool to optimize the file size of PNG images is ImageAlpha.

Improve this answer
5
  • Technically, a sprite sheet with progressively sized versions is called a mipmap. ( en.wikipedia.org/wiki/File:MipMap_Example_STS101.jpg ) illustrates what Mario is saying about wasted bandwidth. However, the suggestion to only use a large size and stretch/downsize is also a wasted-bandwidth issue.
    – Yorik
    Feb 20, 2015 at 15:33
  • @Yorik you are right, it is not a perfect solution, but better than including both resolutions. :-)
    – Mario
    Feb 20, 2015 at 15:49
  • I agree of course!
    – Yorik
    Feb 20, 2015 at 16:22
  • Can CSS not decide which size image to download based on the media query? Or will it download both images in every case?
    – posfan12
    Mar 14, 2019 at 23:45
  • @posfan12 if you provide different files for each resolution, then yes. If it is in a single file, as mentioned in the question, then no.
    – Mario
    Mar 17, 2019 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.