La toute première question que vous devez vous poser est de savoir si une image est réellement nécessaire pour obtenir l'effet recherché. Si vous pouvez supprimer une ressource image, qui nécessite souvent un grand nombre d'octets par rapport au code HTML, CSS, JavaScript et aux autres éléments de la page, c'est toujours la meilleure stratégie d'optimisation. Cela dit, une image bien placée peut également communiquer plus d'informations qu'un millier de mots. C'est donc à vous de trouver cet équilibre.
Ensuite, vous devez déterminer s'il existe une autre technologie qui pourrait fournir de meilleurs résultats, mais de manière plus efficace:
- Les effets CSS (comme les ombres ou les dégradés) et les animations CSS peuvent être utilisés pour produire des éléments indépendants de la résolution qui sont toujours nets à chaque résolution et à chaque niveau de zoom, souvent avec une fraction des octets requis par un fichier image.
- Les polices Web permettent d'utiliser de belles typographies tout en conservant la possibilité de sélectionner, de rechercher et de redimensionner le texte, ce qui améliore considérablement l'usabilité.
Si vous vous trouvez à encoder du texte dans un composant Image, arrêtez-vous et réfléchissez. Une bonne typographie est essentielle pour une bonne conception, un bon branding et une bonne lisibilité, mais le texte dans les images offre une mauvaise expérience utilisateur : le texte n'est pas sélectionnable, pas accessible, pas cliquable, pas zoomable et pas accessible aux appareils haute résolution. L'utilisation de polices Web nécessite son propre ensemble d'optimisations, mais elle répond à toutes ces préoccupations et constitue toujours un meilleur choix pour l'affichage du texte.
Choisir le bon format d'image
Si vous êtes sûr qu'une image est la bonne option, vous devez sélectionner soigneusement le type d'image adapté à la tâche.
- Les graphiques vectoriels utilisent des lignes, des points et des polygones pour représenter une image.
- Les graphiques matriciels représentent une image en encodant les valeurs individuelles de chaque pixel dans une grille rectangulaire.
Chaque format présente ses propres avantages et inconvénients. Les formats vectoriels sont particulièrement adaptés aux images composées de formes géométriques moins complexes, comme des logos, du texte ou des icônes. Ils offrent des résultats nets à chaque résolution et à chaque paramètre de zoom, ce qui en fait un format idéal pour les écrans haute résolution et les éléments qui doivent être affichés à différentes tailles.
Cependant, les formats vectoriels ne sont pas adaptés lorsque la scène est complexe (par exemple, une photo) : la quantité de balisage SVG nécessaire pour décrire toutes les formes peut être prohibitive et le résultat peut toujours ne pas sembler "photoréaliste". Dans ce cas, vous devez utiliser un format d'image matricielle tel que PNG, JPEG, WebP ou AVIF.
Les images matricielles ne présentent pas les mêmes propriétés intéressantes d'indépendance de la résolution ou du zoom. Lorsque vous agrandissez une image matricielle, les graphiques sont dentelés et flous. Par conséquent, vous devrez peut-être enregistrer plusieurs versions d'une image raster à différentes résolutions pour offrir une expérience optimale à vos utilisateurs.
Conséquences des écrans haute résolution
Il existe deux types de pixels: les pixels CSS et les pixels de l'appareil. Un seul pixel CSS peut correspondre directement à un seul pixel de l'appareil ou être pris en charge par plusieurs pixels de l'appareil. À quoi ça sert ? Plus l'appareil comporte de pixels, plus le contenu affiché à l'écran est détaillé.
Les écrans haute résolution (HiDPI) produisent de superbes résultats, mais il existe un compromis évident : les composants Image nécessitent plus de détails pour tirer parti du nombre de pixels plus élevé de l'appareil. Heureusement, les images vectorielles sont idéales pour cette tâche, car elles peuvent être affichées à n'importe quelle résolution avec des résultats nets. Vous devrez peut-être supporter un coût de traitement plus élevé pour afficher les détails les plus fins, mais l'élément sous-jacent est le même et n'est pas dépendant de la résolution.
En revanche, les images matricielles représentent un défi beaucoup plus important, car elles encodent les données d'image par pixel. Par conséquent, plus le nombre de pixels est élevé, plus la taille de fichier d'une image matricielle est importante. Prenons l'exemple d'un composant photo affiché à 100 x 100 pixels (CSS) :
| Résolution d'écran | Nombre total de pixels | Taille du fichier non compressé (4 octets par pixel) |
|---|---|---|
| x 1 | 100 x 100 = 10 000 | 40 000 octets |
| 2x | 100 x 100 x 4 = 40 000 | 160 000 octets |
| 3x | 100 x 100 x 9 = 90 000 | 360 000 octets |
Lorsque nous doublons la résolution de l'écran physique, le nombre total de pixels augmente d'un facteur quatre : doublez le nombre de pixels horizontaux, puis doublez le nombre de pixels verticaux. Par conséquent, un écran "2x" ne double pas seulement le nombre de pixels requis, mais le quadruple.
Qu'est-ce que cela signifie concrètement ? Les écrans haute résolution vous permettent de proposer de superbes images, ce qui peut être une excellente fonctionnalité de votre produit. Toutefois, les écrans haute résolution nécessitent également des images haute résolution. Par conséquent:
- Préférez les images vectorielles dans la mesure du possible, car elles sont indépendantes de la résolution et offrent toujours des résultats nets.
- Si une image raster est requise, diffusez des images responsives.
Caractéristiques des différents formats d'images matricielles
En plus des différents algorithmes de compression avec perte et sans perte, les différents formats d'image prennent en charge différentes fonctionnalités, telles que les canaux d'animation et de transparence (alpha). Par conséquent, le choix du "bon format" pour une image particulière dépend des résultats visuels et des exigences fonctionnelles appropriés.
| Format | Transparence | Animation | Navigateur |
|---|---|---|---|
| PNG | Oui | Oui (APNG) | Tous |
| JPEG | Non | Non | Tous |
| WebP | Oui | Oui | Tous les navigateurs modernes Consultez la section Puis-je utiliser ? |
| AVIF | Oui | Oui | Tous les navigateurs modernes Consultez la section Puis-je utiliser ? |
Il existe deux formats d'image matricielle universellement acceptés: PNG et JPEG. En plus de ces formats, les navigateurs modernes sont compatibles avec les formats d'image WebP et AVIF plus récents. Ces deux formats offrent une meilleure compression globale et plus de fonctionnalités. Quel format devez-vous utiliser ?
WebP et AVIF offrent généralement une meilleure compression que les anciens formats et doivent être utilisés dans la mesure du possible. Vous pouvez utiliser des images WebP ou AVIF, ainsi qu'une image JPEG ou PNG en remplacement. Pour en savoir plus, consultez Utiliser des images WebP.
En ce qui concerne les anciens formats d'images, tenez compte des points suivants:
- Avez-vous besoin d'une animation ? Utilisez des éléments
<video>.- Qu'en est-il des GIF ? Le format GIF limite la palette de couleurs à 256 couleurs maximum et crée des fichiers beaucoup plus volumineux que les éléments
<video>. L'APNG offre plus de couleurs que le GIF, mais il est également beaucoup plus volumineux que les formats vidéo de qualité visuelle raisonnablement équivalente. Consultez Remplacer les GIF animés par des vidéos.
- Qu'en est-il des GIF ? Le format GIF limite la palette de couleurs à 256 couleurs maximum et crée des fichiers beaucoup plus volumineux que les éléments
- Avez-vous besoin de conserver les détails les plus fins avec la résolution la plus élevée ? Utilisez PNG ou WebP sans perte.
- Le format PNG n'applique aucun algorithme de compression avec perte en dehors du choix de la taille de la palette de couleurs. Il produit donc l'image de la meilleure qualité, mais au prix d'une taille de fichier nettement plus élevée que les autres formats. Utilisez-les judicieusement.
- WebP dispose d'un mode d'encodage sans perte qui peut être plus efficace que le PNG.
- Si l'élément Image contient des images composées de formes géométriques, envisagez de le convertir au format vectoriel (SVG).
- Si l'asset Image contient du texte, arrêtez-vous et réfléchissez. Le texte des images n'est pas sélectionnable, ni indexable, ni "agrandissable". Si vous devez transmettre un look personnalisé (pour le branding ou d'autres raisons), utilisez plutôt une police Web.
- Optimisez-vous une photo, une capture d'écran ou un composant Image similaire ? Utilisez JPEG, WebP avec perte ou AVIF.
- Le format JPEG combine une optimisation avec perte et sans perte pour réduire la taille de fichier de l'élément image. Essayez plusieurs niveaux de qualité JPEG pour trouver le meilleur compromis entre qualité et taille de fichier pour votre composant.
- Les formats WebP avec pertes ou AVIF avec pertes sont d'excellentes alternatives au format JPEG pour les images de qualité Web. Toutefois, sachez que le mode avec pertes supprime certaines informations pour obtenir des images plus petites. Cela signifie que certaines couleurs peuvent ne pas être identiques à celles d'un fichier JPEG équivalent.
Enfin, notez que si vous utilisez un WebView pour afficher du contenu dans votre application spécifique à la plate-forme, vous avez le contrôle total du client et pouvez utiliser WebP exclusivement. Facebook et de nombreux autres utilisent WebP pour diffuser toutes leurs images dans leurs applications. Les économies réalisées sont tout à fait intéressantes.
Impact sur le Largest Contentful Paint (LCP)
Les images peuvent être des candidats du LCP. Cela signifie que la taille d'une image affecte son temps de chargement. Lorsqu'une image est candidate au LCP, il est essentiel de l'encoder efficacement pour améliorer ce métrique.
Vous devez vous efforcer d'appliquer les conseils de ce guide afin que les performances perceptives d'une page soient aussi rapides que possible pour tous les utilisateurs. Le LCP fait partie des performances perceptives, car il mesure la rapidité d'affichage du plus grand élément (et donc le plus perceptible) de la page.