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

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Terrance Corley
Terrance Corley
11,990 Points
Posted by Terrance Corley
Terrance Corley
11,990 Points

In the video Nick says we take 40px images and set them to a fixed width of 20px, but?...

In the video Nick says we take 40px images and set them to a fixed width of 20px in css so that the images appear high res on high res displays. However, the images in the project files are 60px not 40px, so should I set the width of these images to 30px instead of 20px?

2 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

For retina displays or Hi-Res display it is still double pixel. So if your original image is 300dpi than for a hi-res display it should be 600dpi at the same size (ie width, height). Heres a good article about it.

http://daraskolnick.com/image-dpi-web/

So if you were reducing the size of the image to pump out your graphic it should be half.

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Ah, so DPI/PPI doesn't matter all that much when creating websites and the reason we set a 40px image to 20px through css is for retina displays since they have double the pixel density. Great article! Thanks for the link friend.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

In this particular case, it is more what works best for the given situation. If this was about putting the small icon images in the footer than you can size them to what you like.

Any image can be reduced regardless of "it makes them more high-res" looking if it fits your needs. So I wouldn't stress to much on how many px in width it should be. If you are following him, do the 20px, if you think 30px looks better than set them to that. Or, you could try a percentage and just use it at say width: 50%;

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Hi Erik, thanks for the response.

Yes, my question was pertaining to the footer images. I get that you can make the images any size you'd like. My question was more about Nick saying that because some devices have a high DPI we should compensate for this by having the original image files be twice the size as we actually want them to appear on the site, and then through css we would scale them down.

Ex: Giving a 40px image a width and height property with the value of 20px so that if the user was on a high DPI display those extra pixels would be there and image would appear "high res".

Since the video was made a couple years back (I'm assuming), and higher DPI devices are on the market I was just wondering if the standard was to downsize images to 1/3 of their original size instead of half.