DPI and Retina image explanation


I’ve been reading about the @2x images being only image that are twice as big as regular image, but do we have to change the DPI to make the quality better or we only need an image that is twice as big ? I don’t understand why would a twice as big image of the same quality would be better? Thanks alot


Don’t worry about DPI it doesn’t matter for screens, but to answer your question making an image twice the size with the same quality would have a much higher pixel density than the original, therefore the pixels rendered will be much sharper and well defined.

For example:

Original image: 300px x 300px = 90,000 pixels

Retina image (same quality): 600px x 600px = 360,000 pixels

Now when the browser renders the Retina image, it still renders it in the same 300px by 300px space as the original image. This means that there are 360,000 pixels in this image instead of the 90,000 pixels before. Now there are lots more pixels to render the same image, so the image is going to look more defined.

Answered By – Jason

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published