Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Development Tools Introduction to Front End Performance Optimization Optimize Assets Optimize Images

Why are you doubling the resolution for retina displays? I don't understand

Can you clarify?

1 Answer

Amber Cookman
Amber Cookman
12,662 Points

The reason for doubling the resolution for retina displays is because they actually display more pixels in the same amount of space as what is currently considered a more standard display, this is known as pixel density. Some images that look very high quality on a standard display will look pixelated on a retina or high DPI display.

Here is a great article that really succinctly breaks down the why and how behind optimizing images for higher pixel density displays.

Where is he specifying the size of img size of 266x200? I think that is what is tripping me up

Amber Cookman
Amber Cookman
12,662 Points

In the video, when he saves the file for web from Photoshop, he sets the image to twice the final intended resolution by setting the image width to 532px.

The image is then set to it's final sizing using CSS. Since the layout is fluid, everything is set in percentages, hence why he doesn't actually specifically the size in terms of 266px x 200px anywhere. The percentages are set based on the context of the div with id #wrapper which is set to a max-width of 940px in the main.css file:

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

Then the specific code that sets sizing for the portfolio images at full-size desktop resolution, in percentages that are relative to the context of the parent element with a max-width of 940px, can be found in responsive.css.:

  /**********************************
  PAGE: PORTFOLIO
  ***********************************/

  #gallery li {
    width: 28.3333%; 
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }