[Beta] Retina image lesson - Further explenation requested

1

[Lesson: Responsive Web Design Principles: Use a Retina Image for Higher Resolution Displays]
"The simplest way to make your images appear “retina” (and optimize them for retina displays) is to define their width and height values as only half of what the original file is."
I think a further explenation is needed. This suggestion (and the example below) implies that never mind the width of the screen, what ever image size is, we should set it to display at half the height and width of the file, even on regular screens.

Here is the example given:

<style>
  img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">
2

The example is simple in order to demonstrate the idea, but when you go do this in your own project you can set up a media query that checks the device’s DPI and sets the image dimensions accordingly. Another option is the scale function in the CSS transform rule.

img {
    transform: scale(0.5);
}

Using a percentage value with max-width would help keep the image responsive:

img {
    max-width: 50%;
}
2 Likes