CSS CSS Basics Understanding Values and Units Pixel Units

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

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