: Can you include retina and non-retina images within the same sprite? When building a web page, I've always created 2 different sprites for my icons. A sprite for normal images and a sprite
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?
More posts by @Ravi4787994
1 Comments
Sorted by latest first Latest Oldest Best
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
Use high resolution aka retina images only and let the browser resize them.
Optimize all image files. BTW: A very good tool to optimize the file size of PNG images is ImageAlpha.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.