Understand images for web developer [Part 3]

This will be the third part of the images for the web developer series. If you haven't checked my first two articles, I suggest you click here and here, Also, do you know what a CSS pixel is? With this foundational knowledge in place, we're well prepared to continue our journey. So, let's get started!

Even image has a responsive design

In a world where we have an extensive array of devices such as phones, tablets, laptops, PCs, and TVs, the browser can play a pivotal role in determining the types of images it displays to users. This selection is based on the device being used. For instance, if we are utilizing a high-resolution device, we would naturally want to showcase the best image quality available. Conversely, if we are using a device with a lower resolution, we might prefer to display images that are optimized for that specific device.

Let's compare the image quality between 480px width and 960px width

In general, an image with a higher resolution (more pixels) will have better quality in terms of sharpness and detail, assuming that other factors such as compression and content are similar.

The image with dimensions of 960 x 720 pixels has a higher resolution than the image with dimensions of 480 x 360 pixels. Therefore, the 960 x 720-pixel image is likely to have better quality in terms of sharpness and detail when viewed at the same size

We can take it a step further. If we decide to go with a bigger image, hence bigger pixels, and we want to increase our download time for our browser, we can compress it with JPEG. It will not look the best but it still looks better than a lower-resolution image :)

It all depends on your needs

My suggestion is that we will prepare an image with 480, 960, 1440 and 1920 pixels with a desired aspect ratio and have a strategy for the browser to download these images based on certain conditions ( resolution, vw ) and then we can use CSS to style image based on our needs

Same size, different resolutions

On retinal devices, the resolution of the screen was doubled so that the total number of pixels was increased by a factor of four ( double horizontally and double vertically )

If we have retinal devices, we naturally want to display a better picture to satisfy our high-quality screen

<!-- URL to a file , resolution --> 
<img
  srcset="elva-fairy-320w.jpg, 
          elva-fairy-480w.jpg 1.5x, 
          elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg" /** for old browser **/
  alt="Elva dressed as a fairy" />

So if the device accessing the page has a standard or low-resolution display with one device pixel representing each CSS pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don't need to include it). If the device has a high resolution of two device pixels per CSS pixel or more, the elva-fairy-640w.jpg image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39 KB.So based on the device, the browser will get to choose which image it can display

I wrote about CSS pixels in this article; click here

Resolution switching: Different sizes

So, what is the problem that we want to solve with resolution switching? We want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example

<!-- 480w = 480px , 800w = 800px based on the viewport width , not
based on the layout that contains img , the reason is browser
has to choose what image to load even before the CSS kicks in and
before the layout has happened
 -->
<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Let's break the code

1. srcset Attribute (Loading which image)

   • Thesrcset attribute contains a list of image sources and their associated widths. In this example, there are two sources:

     • elva-fairy-480w.jpgwith a width of 480 pixels.

     • elva-fairy-800w.jpgwith a width of 800 pixels.

2. sizes Attribute (width of an image => height will be adjust based on the width)

   • The sizes attribute defines how the image should be displayed in different viewport sizes. It consists of media conditions and image widths. In your example:

     • (max-width: 600px) 480pxmeans that if the viewport width is less than or equal to 600 pixels, the image should be displayed with a width of 480 pixels.

     • 800px means that if the viewport width is greater than 600 pixels, the image should be displayed with a width of 800 pixels.

     • NOTE THAT the image will have its own aspect ratio and will scale its height to the desired width

src Attribute:

• The src attribute provides a fallback image source that will be used if the browser doesn't support the srcset and sizes attribute or if none of the conditions in sizes are met.

Now, let's see how the browser decides which image to load based on this information:

• When a user visits the web page, the browser first checks the viewport width (the width of the user's device screen or browser window).

• It then evaluates thesizes attribute to determine which image width to use based on the viewport width and media conditions. In this example, if the viewport width is 600 pixels or less, it will use a width of 480 pixels; if the viewport width is more than 600 pixels, it will use a width of 800 pixels.

• Once the browser has determined the desired image width, it looks at the srcset attribute to select the image source with the closest matching width to the desired width. So, if the viewport width is 800 pixels, it will select elva-fairy-800w.jpg because it is the closest match to 800 pixels. If the viewport width is 400 pixels, it will select elva-fairy-480w.jpg because it is the closest match to 480 pixels.

• Finally, the selected image is loaded and displayed in the <img> element.

Fitting an image inside a layout

Inside a grid cell

Let's have a look at this example

img {
  display:block;
  width:100%; 
  /* because we define width 100% it will take up max 1 column space ,
     if we don't define the width here , it will take the original
width max image and stretch to all columns space until it fits 
=> see example in overlap element */

  height:auto; /* with height auto it will respect the aspect ratio
of the image ( natural of an image ) */
  /* if we change height : 100% it will stretch the second image to full
height of the grid */

}
.content {
  display: grid;
  grid-template-columns: repeat(2, 20rem);
  gap: 1rem;
}

The second picture has an aspect ratio of 3:2 ( width > height ), so the image will not fit into the height of the container. We can change its object-fit property

.img {
  height:100%;
  object-fit:cover;
}

Inside a flexbox

body {
  margin: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  display: flex;
  justify-content: center;
  margin: 2rem;
}

.content {
  width:100%;
  display: flex;
  gap:1%;
}

.image {
  margin: 0;
  flex:0 0 20%;
}

.content img {
  height: 100%;
  object-fit: cover;
}

Conclusion

In this article, we discuss the importance of responsive design in a world of diverse devices and screen resolutions. We explore the use of HTML's srcset and sizes attributes to serve optimized images based on device capabilities, providing better user experiences and performance. Learn how to implement resolution switching and understand how browsers decide which image to load for different viewport sizes.