From the course: HTML: Images and Figures

Handling pixel density - HTML Tutorial

From the course: HTML: Images and Figures

Start my 1-month free trial Buy for my team

Handling pixel density

“

- [Instructor] The first way to handle the problem of varying resolutions is to specify a set of images to use depending upon the pixel density of the display device. That way you won't show a low-density image on a high-density screen. The images have been edited here to dramatize the difference. In the exercise files for this video, we have images at a display pixel ratio of 1, 1.5, and 2. By default the image element on lines 19 and 20 shows that we want the pixel ratio of 1 as the source for the image. There's one new thing here on line six. When you're doing responsive images you need this meta element to tell the browser to use the full window width with a scaling factor of 1, which is no zoom. This factor can range from 0.1 to 10. We need this meta element so that the browser doesn't try to resize the text for what it thinks is the optimum. To make the image responsive we'll add a source set attribute whose value is a comma separated list of the candidate images and the desired pixel density using x as the multiplication factor. So the first candidate is images slash grand place 1x.jpg with a ratio of 1x and then the image with a ratio of 1.5 images grand place 1.5x.jpg and its multiplication factor, and by the way, I'm putting this on a separate line for readability, and then finally the image grand place 2x.jpg with a pixel density of 2. There's no law that says you have to put the density in the file title, but it does help you keep your images organized. Let's save that and when we come into the browser and reload, the browser will choose the image that best fits the density of your display device. We're going to see later on how to experiment to show that it's really choosing the image that you want.

Contents