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 CSS Basics (2014) Understanding Values and Units Pixel Units

Posted by Thania Abrahams
Thania Abrahams
972 Points

Pixels and Screen Resolutions

If I declare an image to be 200px x 200px because that is how big I would like the image to look in relation the the screen size I am using to design, how does the browser know the screen size I am working with in order for it to for eg. change the pixel declaration to 400px x 400px for a high resolution screen. What if I am using a high resolution screen already when I declared 200px x 200px? And now it looks completely different on the same screen size.

1 Answer

Samuel Lopez
.a{fill-rule:evenodd;}techdegree
Samuel Lopez
Front End Web Development Techdegree Student 13,960 Points

Hi Thania, you might want to take a look at the Responsive Images course here at the Treehouse.

Basically you upload two versions of the image to your site; one at the regular size and the other one 2x the size. You tell your website which image to use depending on the dpi (resolution).

There are some JavaScript scripts out there that let you achieve this like: retinajs

I hope this helps - Sam