Introduction To Pixel Density

Open the lesson folder

Included images

In this lesson's folder you will find the index.html file and also some images to use:

The index.html file has the same example as used previously:

<img
  src="images/road-320.jpg"
  srcset="images/road-640.jpg 640w, images/road-1500.jpg 1500w"
  alt="road image"
/>

Testing image switching

If you have been following along closely, using the network panel, you may notice the images may not switch when we expect.

As an example, you may find resizing the browser to 500px wide loads the 1500px wide image. Your result may vary but this is a possibility. You may think this jump to the larger image is a little too early since it is less than the 640px wide image.

The reason this happens is because it is not just about the width. It is also about the pixel density of the display. For example, a retina (high pixel density) screen can squeeze in more pixels per inch than a non-retina screen. This results in a sharper quality image.

High pixel density displays

So how does this work? Imagine we have a screen with a resolution of 1920 x 1080px, 1920 being the width in pixels. And we allocated a space sized 300px x 300px for an image:

Before high pixel density displays this was simple. We created an image 300px wide and high, and located it on our web page.

Now with the demands for higher quality, many screens are capable of squeezing in more pixels into a space. You will hear this commonly called pixels per inch or pixel density.

This means if we have a 2x display, it will squeeze in twice as many pixels into the same space. Meaning we could use an image twice the size, in our case, 600px x 600px, and it would slot into the same available space:

And this is why high pixel density devices look sharper. Screens can also go even higher such as 3x or 4x.

Example

To see a real world example, consider a retina display laptop 3072 wide x 1920 high.

You may think it would be able to accommodate images up to 3072px wide.

In the images folder, we also have the same images named 1x, 2x, and 4x. The 1x image is 640px wide and this is intended for regular monitors, and not high pixel density displays. The 2x image is twice the size and has a width of 1280px, and 4x is 2560px wide.

Let’s try this out by adding the 1x image three times:

<!-- 1x image is 640px wide -->
<img src="images/road-1x.jpg" alt="road image" />
<img src="images/road-1x.jpg" alt="road image" />
<img src="images/road-1x.jpg" alt="road image" />

<!-- <img
  src="images/road-320.jpg"
  alt="road image"
  srcset="images/road-320.jpg 320w, images/road-640.jpg 640w"
  sizes="(max-width: 600px) 100vw, 50vw"
/> -->

With the browser at full width, only two images fit onto a row:

This particular display has the space for about 2 1/2 images, so maybe around 1500px wide, but we know the resolution was 3072px.

This is because of the pixel density. A retina display does not mean we have more width to accomodate, it just means we can provide higher quality images and they will be allocated into the same space.

If we think about it, this makes sense. We want the physical size of the image to take up the same amount of space for every screen. When creating a website. an image designed to be half of the screen will render the same on all displays. The difference is the high pixel density display can use a larger image to slot into this space, resulting in a higher quality image.

Using with srcset

We can also use this knowledge with the srcset attribute.

Rather than just specifying the images width like before, we can instead supply images for different pixel densities. And again, the browser will automatically detect the screens pixel density, and choose one for us.

For this, rather than the width, we can set the pixel density in the srcset attribute:

<!--  change srcset sizes to 2x, 4x -->
<!-- remove sizes attribute -->
<img
    src="images/road-1x.jpg"
    alt="road image"
    srcset="images/road-2x.jpg 2x, images/road-4x.jpg 4x"
  />

The src attribute is counted as the 1x version. Using CSS, we can also specify the size we want the image to display in the head section:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Introduction to pixel density</title>
    <!-- add image size to render -->
        <style>
            img {
                width: 640px;
            }
        </style>
    </head>

CSS Pixels

This declares we want to show a 640px wide image, regardless of the display. This is what is called CSS Pixels. And the browser may decide that a bigger image, such as 2x will fit into this same space.

Using our same display example, the 2x (1280px wide) image is selected to occupy the 640px space.

These extra image attributes are a good way to switch between image sizes depending on the screen resolution or pixel density. Often we don’t need anything more complex than this.

This is also putting a lot of trust in the browser. If we wanted more manual control or flexible options, the next lesson covers using the picture element.