Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by OLUBUKOLA OGUNSOLA
.a{fill-rule:evenodd;}techdegree seal-36
OLUBUKOLA OGUNSOLA
Full Stack JavaScript Techdegree Graduate 30,442 Points

2x image at 1000px

what does it mean they say a 2x image at 1000px is actually 500px?

1 Answer

Kevin Korte
Kevin Korte
28,149 Points

Pixels are a fixed element, but how many pixels per inch changes. Forever, it was pretty common that our digital displays had 72 pixels per square inch. So if I had an image that was 288 pixels by 432 pixels at standard resolution, I would have an image that would physically measure 4" x 6" on my screen.

The problem is this something we can no longer rely on. We have a plethora of pixel dense screens, from iphones and androids, to laptops and desktop monitors. We now see 1.5x, 2x, and even 3x displays. Which means that now in that same square inch of display we have 108 pixels, 144 pixels, or even 216 pixels per inch. (Pixels per inch = PPI)

To use your example, if we have an image that is 1000 pixels wide, and we were to display it at 2x, meaning we had 144 PPI, it would physically be the same size on the screen as a 500 pixel images displayed at 1X. And we know this image would be almost 7" wide at 100% zoom.

1000 / 144 = 6.94444444444

500/ 72 = 6.9444444444444

And that's how the math works.