6.1 Utilisation de l'attribut srcset et sizes
Les écrans à haute densité de pixels, comme les écrans Retina d'Apple, sont devenus la norme pour de nombreux appareils modernes. Ces écrans ont beaucoup plus de pixels par pouce (PPI), offrant ainsi une image plus nette et détaillée. Pour les développeurs web, il est important d'optimiser les graphiques pour ces écrans afin que l'expérience utilisateur soit au top. Voyons comment faire ça.
Problèmes liés aux écrans haute densité
Sur ces écrans, les images standard peuvent apparaître floues ou pixélisées car un seul pixel de l'image est étiré sur plusieurs pixels de l'écran. Pour résoudre ce problème, il est nécessaire d'utiliser des images de plus haute résolution, qui peuvent ensuite être mises à l'échelle par le navigateur pour être affichées sur un écran haute densité.
Les attributs srcset et sizes permettent de spécifier différentes versions des images pour diverses densités de pixels. Cela aide le navigateur à choisir l'image la plus appropriée pour un appareil spécifique.
Exemple d'utilisation de srcset et sizes :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimisation pour écrans Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Exemple d'image pour écrans Retina">
</body>
</html>
Explication du code :
srcset: spécifie trois versions de l'image pour différentes densités de pixels (1x,2x,3x)-
sizes: définit la largeur de l'image pour différents contextes d'affichage :- Jusqu'à
600px— l'image occupe100%de la largeur de la vue - Jusqu'à
1200px— l'image occupe50%de la largeur de la vue - Dans tous les autres cas — l'image occupe
33%de la largeur de la vue
- Jusqu'à
6.2 Utilisation des graphiques vectoriels (SVG)
Les graphiques vectoriels (SVG) sont une excellente solution pour les écrans haute densité, car les fichiers SVG se redimensionnent sans perte de qualité. Ils sont parfaits pour les logos, icônes et autres éléments d'interface.
Exemple d'utilisation de SVG :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilisation de SVG pour écrans Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Explication du code :
src="images/logo.svg": indique le chemin vers le fichier SVG, qui pourra être redimensionné à n'importe quelle taille sans perte de qualité
6.3 Utilisation de CSS
Pour les images de fond, tu peux utiliser les media queries et les propriétés CSS pour charger différentes versions des images en fonction de la densité de pixels de l'appareil.
Exemple d'utilisation de CSS pour les images de fond :
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
Explication du code :
.background: définit l'image de fond par défaut@media only screen and (min-resolution: 2dppx): remplace l'image de fond par une version pour les écrans avec densité2x@media only screen and (min-resolution: 3dppx): remplace l'image de fond par une version pour les écrans avec densité3x
6.4 Élément picture
La balise <picture> te permet de spécifier plusieurs sources d'image avec différentes conditions d'affichage. C'est utile pour des cas plus complexes d'adaptation des images.
Exemple d'utilisation de <picture> :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilisation de <picture> pour écrans Retina</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Exemple d'image pour écrans Retina">
</picture>
</body>
</html>
Explication du code :
<source>: spécifie différentes sources d'image avec conditions d'affichage<img>: définit l'image par défaut pour les appareils qui ne supportent pas<picture>
6.5 Exemples d'optimisation des images
Exemple 1 : Image adaptative en haute résolution
Créons un exemple où l'image est optimisée pour les écrans à haute densité en utilisant les attributs srcset et sizes :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image adaptative pour écrans Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Exemple d'image pour écrans Retina">
</body>
</html>
Explication du code :
srcset: définit trois versions de l'image pour différentes densités de pixels (1x,2x,3x)-
sizes: définit la largeur de l'image pour différents contextes d'affichage :- Jusqu'à
600px— l'image occupe100%de la largeur de la vue - Jusqu'à
1200px— l'image occupe50%de la largeur de la vue - Dans tous les autres cas — l'image occupe
33%de la largeur de la vue
- Jusqu'à
Exemple 2 : Utilisation de SVG pour des images évolutives
Créons un exemple utilisant SVG pour un affichage de qualité sur tous les appareils :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilisation de SVG pour écrans Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Explication du code :
src="images/logo.svg": indique le chemin vers le fichier SVG, qui pourra être redimensionné à n'importe quelle taille sans perte de qualité
GO TO FULL VERSION