CODEWITHSUNDEEP
htmlcssmobilephotoshop
Yann Chabot
Yann Chabot

Reputation: 4879

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

Upvotes: 2

Views: 3121

Answers (2)

Jason
Jason

Reputation: 3360

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.

Upvotes: 2

user1337
user1337

Reputation: 847

For screen, DPI doesn't exist. The raw basic you need to understand is pixel count. You can have a 100px x 100px image that's 1 DPI or 100,000,000 DPI, it makes no difference.

If you really want to learn some more, take a look at http://en.wikipedia.org/wiki/Pixel_density

But for screen output, you can just ignore DPI.

Upvotes: 1

Related Questions