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 (
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.
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.
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…
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…
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…
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…
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 Cheat Sheet Cheat Sheet via Make a Website Hub DOWNLOAD A4 PDF OF THIS HTML 5 MEGA CHEAT SHEET HERE!
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…
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…
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,…
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…
With CSS3 we acquire the ability the ability to write behaviors for transitions and animations. Front end developers have been asking for the ability to design these interactions within HTML…