Loading images by resolution with HTML5

Normally the way to load images in HTML is through the img element to which we pass as a parameter the URL of the image to load. But since HTML5 we have the picture element that helps us to make it more efficient and load images by resolution with HTML5.

That is to say, depending on the resolution of the screen, one image or another will be shown, logically adapted to the resolution of the screen at that moment. This way we can build better responsive applications.

But let's define the problem.

The idea is that the user can load our page on different devices, whether it is a mobile, a tablet or a computer. On each size of device the page will look different. And what we are interested in is to load an image adapted to that size.

If we use the img element we will have the following:

<img src="image.png" alt="our image"/>

In case we use the img element, the same image will always be loaded regardless of the screen size.

That is why we use the picture element which has the following structure.

<picture>   
  <source srcset="image" media="media-query">   
  <source srcset="image" media="media-query">   
  <source srcset="image" media="media-query">   
  <img src="image-fallback" alt="Image if picture does not work">  
</picture>

What we can already see is that in the picture element we can indicate several origins through the source element. Furthermore, if we look at the source element we can see that we have two attributes.

On the one hand the attribute srcset in which we pass the URL of the image we want to display and on the other hand we have an attribute media in which we can indicate a media query.

In the case that the media query gives a true value, it will be when the image indicated in the srcset attribute is shown.

And it will be this media query with which we will manage the size of the device. Media queries allow us to access device configuration data such as minimum or maximum screen size (min-width and max-width, min-height and max-height), resolution (resolution), the number of colours used (colour-index),...

In our case, we are going to use the min-width property that will give us the minimum size of the screen. We will use it as follows:

(min-width: size px)

Where the size will be the size in pixels of the screen. We will control several sizes.

48opx, for mobiles.
768px, for tablets.
992px, tablets or laptop.
1280px, for bigger screens.

So the media query would look like this:

min-width: 1280px;  
min-width: 992px;  
min-width: 768px;  
min-width: 480px;

If we apply it to the code of our picture element, we will have the following result:

<picture>            
 <source srcset="image1280.png" media="(min-width: 1280px)">    
 <source srcset="image992.png" media="(min-width: 992px)">    
 <source srcset="image768.png" media="(min-width: 768px)">  
</picture>

In this way, we have created an optimised image for each resolution. But we have not created one for the minimum 480px and in this case what we are going to do is to insert an img element that will be loaded in all cases and also serves to protect the display if our browser does not support HTML5 elements.

The final code would look like this:

<picture>            
  <source srcset="image1280.png" media="(min-width: 1280px)">    
  <source srcset="image992.png" media="(min-width: 992px)">    
  <source srcset="image768.png" media="(min-width: 768px)">    
  <img src="image480.png" alt="our image">  
</picture>

If we load the page we can see how the responsive behaviour implemented in the code changes the images. Allowing us to have a more optimised website that allows us to load images by resolution with HTML5.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.