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

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

Posted by Michael Bowen
Michael Bowen
126 Points

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
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.

Michael Bowen
Michael Bowen
Courses Plus Student 59 Points

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
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;
  }