Loading images by resolution with HTML5

by Janeth Kent Date: 20-12-2022 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.

 
by Janeth Kent Date: 20-12-2022 html5 hits : 1574  
 
Janeth Kent

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.

 
 
 

Related Posts

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

A List of Awesome games made with HTML5 and JavaScript

Browsers and JavaScript are becoming more powerful and more comprehensive. There was a time when any type of game needed Flash. But the stage now is set for powerful HTML5…

How To Build A Presentation Using HTML, CSS, & JavaScript

The process of conceiving and constructing a presentation is often hard. Sometimes we're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Today, we're going to learn how…

Parallax Landscape Scenes Built Entirely With CSS and HTML

Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…

Fullscreen Background Video HTML5 And CSS cross-browser

Full-screen Background Video is a way to present your website playing a video in the background without disturbing its content. It makes your website very modern and different. So, in…

How to Become a Full Stack Developer in 2018

A full stack developer is someone who can work on the development of all layers of an app or program. That means that they are familiar with both the front…

10 addictive retro video games recreated with HTML5, JS & CSS

Are you a video game player? Are you a child of the "80s"(or even 70s...;-) )? If yes, this post is for you. There was a time when building any type of…

HTML5 CheatSheet

HTML5 Cheat Sheet   Cheat Sheet via Make a Website Hub DOWNLOAD A4 PDF OF THIS HTML 5 MEGA CHEAT SHEET HERE!  

Google Chrome will block Flash content starting next month, make HTML 5 default by December

There really is no stopping Flash's demise. In a blog post Chrome team has announced that the browser will start blocking the Flash starting this September with Chrome 53. As more…

CSS Flexbox : some tools

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes…

CSS-Only Olympic Rings

Inspired by Justin Sepulveda’s CSS Logos and this post on the new Design Informer Forums, we decided to try our hand at creating the Olympic Rings with just CSS and HTML. We realize its simple,…

The HTML5 Quick Learning Guide

HTML5 syntax is compatible with both HTML4 and XHTML1. Want to close empty elements with a slash? Go for it. Rather not? Then don't. Want to use lower case? Upper…

Clicky