Le fait qu'une image s'adapte à un écran signifie que ses dimensions correspondent aux dimensions de l'écran, elle s'exprime en pixel, exemple : 600px x 400px. L’objectif est donc que la taille de l’image s’adapte aux dimensions de l’écran, mais également sa résolution et sa qualité.
Les dimensions d’une image doivent être adaptées à l’écran du navigateur : une image trop grande risque de mettre du temps à charger et de ne pas être visible durant ce temps de chargement. Tandis qu’une image trop petite risque d'être affichée de manière pixelisée.
C’est pourquoi les images adaptatives sont nécessaires pour rendre son site web “responsive”, c’est-à-dire que la même page d’un site aura un rendu adapté à la taille de l’écran que vous utilisez. Il est donc nécessaire d’adapter ses images pour ne pas avoir d’images trop grandes sur un smartphone, par exemple.
Il est possible d'enregistrer une image sous différentes dimensions afin que celle ayant les dimensions les plus adaptées soit chargée.
Le fait de définir différentes dimensions d'images est possible grâce à l'attribut srcset. On l’indique de la manière suivante : "(url image alternative 1) (description largeur), (url image alternative 2) (description largeur)".
<img src="image.jpg" srcset="petite-image.jpg 480w, grande-image.jpg 1080w">
A noter que la description de la largeur est spécifiée avec l'unité w, et non px. Il s’agit de la taille réelle de l'image. Elle peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur.
Lorsque cet attribut est spécifié, le navigateur charge l'image adéquate.
Il est important de laisser l'attribut src défini, afin que les navigateurs qui ne prennent pas en compte l'attribut srcset puissent l'afficher.