La toute première question à vous poser est de savoir si une image est réellement nécessaire pour obtenir l'effet souhaité. Si vous pouvez éliminer une ressource d'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 que mille mots. C'est donc à vous de trouver le juste équilibre.
Ensuite, vous devez déterminer s'il existe une autre technologie qui pourrait donner de meilleurs résultats, mais de manière plus efficace :
- Les effets CSS (tels que 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, quelle que soit la résolution et le niveau de zoom, souvent avec une taille en octets inférieure à celle d'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 du texte, ce qui améliore considérablement la facilité d'utilisation.
Si vous vous retrouvez un jour à encoder du texte dans un composant Image, arrêtez-vous et réfléchissez-y à nouveau. Une typographie de qualité est essentielle pour un bon design, une bonne image de marque et une bonne lisibilité. Cependant, le texte dans les images offre une mauvaise expérience utilisateur : le texte n'est pas sélectionnable, ni consultable, ni zoomable, ni accessible, et n'est pas adapté 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 afficher 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 bon type d'image pour la tâche.
- Les graphiques vectoriels utilisent des lignes, des points et des polygones pour représenter une image.
- Les images matricielles 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 idéaux pour les images composées de formes géométriques moins complexes, comme les logos, le texte ou les icônes. Ils offrent des résultats nets à chaque résolution et à chaque niveau de zoom, ce qui en fait un format idéal pour les écrans haute résolution et les composants qui doivent être affichés à différentes tailles.
Toutefois, les formats vectoriels ne sont pas adaptés aux scènes complexes (par exemple, une photo) : la quantité de balises SVG nécessaires pour décrire toutes les formes peut être prohibitive et le résultat peut ne pas être "photréaliste". Dans ce cas, vous devez utiliser un format d'image matricielle tel que PNG, JPEG, WebP ou AVIF.
Les images raster ne présentent pas les mêmes propriétés intéressantes que les images vectorielles (indépendance de la résolution et du zoom). Lorsque vous agrandissez une image raster, vous obtenez des graphiques flous et dentelés. Par conséquent, vous devrez peut-être enregistrer plusieurs versions d'une image matricielle à différentes résolutions pour offrir une expérience optimale à vos utilisateurs.
Implications des écrans haute résolution
Il existe deux types de pixels : les pixels CSS et les pixels d'appareil. Un seul pixel CSS peut correspondre directement à un seul pixel d'appareil ou être soutenu par plusieurs pixels d'appareil. Quel est l'intérêt ? Plus il y a de pixels sur l'appareil, plus le contenu affiché à l'écran est détaillé.
Les écrans haute résolution (HiDPI) produisent de magnifiques 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é des appareils. Bonne nouvelle : 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 payer des frais de traitement plus élevés pour afficher les détails les plus fins, mais l'élément sous-jacent est le même et est indépendant de la résolution.
En revanche, les images raster posent un défi beaucoup plus important, car elles encodent les données d'image pixel par pixel. Par conséquent, plus le nombre de pixels est élevé, plus la taille du fichier d'une image matricielle est importante. Considérez la différence entre un élément 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 est multiplié par quatre : le nombre de pixels horizontaux est doublé, tout comme 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 belles images, ce qui peut être une excellente fonctionnalité produit. Toutefois, les écrans haute résolution nécessitent également des images haute résolution. Par conséquent :
- Privilégiez les images vectorielles chaque fois que possible, car elles sont indépendantes de la résolution et offrent toujours des résultats nets.
- Si une image matricielle est requise, diffusez des images responsives.
Caractéristiques des différents formats d'image matricielle
En plus des différents algorithmes de compression avec et sans perte, les différents formats d'image sont compatibles avec différentes fonctionnalités, telles que l'animation et les canaux de transparence (alpha). Par conséquent, le choix du "bon format" pour une image donnée est une combinaison des résultats visuels appropriés et des exigences fonctionnelles.
| Format | Transparence | Animation | Navigateur |
|---|---|---|---|
| PNG | Oui | Oui (APNG) | Tous |
| JPEG | Non | Non | Tous |
| WebP | Oui | Oui | Tous les navigateurs récents. Consultez Puis-je utiliser ? |
| AVIF | Oui | Oui | Tous les navigateurs récents. Consultez 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 nouveaux formats offrent une meilleure compression globale et plus de fonctionnalités. Alors, quel format devez-vous utiliser ?
Les formats WebP et AVIF offrent généralement une meilleure compression que les anciens formats. Il est donc recommandé de les utiliser dans la mesure du possible. Vous pouvez utiliser des images WebP ou AVIF avec une image JPEG ou PNG comme solution de secours. Pour en savoir plus, consultez Utiliser des images WebP.
En ce qui concerne les anciens formats d'image, 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 au maximum et crée des fichiers beaucoup plus volumineux que les éléments
<video>. Le format APNG offre plus de couleurs que le format 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 au maximum et crée des fichiers beaucoup plus volumineux que les éléments
- Vous devez préserver les détails 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 au-delà du choix de la taille de la palette de couleurs. Il produit ainsi une image de la meilleure qualité possible, mais au prix d'une taille de fichier beaucoup plus importante que les autres formats. À utiliser avec parcimonie.
- WebP dispose d'un mode d'encodage sans perte qui peut être plus efficace que PNG.
- Si l'image contient des formes géométriques, pensez à la convertir au format vectoriel (SVG).
- Si le composant Image contient du texte, arrêtez-vous et réfléchissez-y à nouveau. Le texte des images ne peut pas être sélectionné, recherché ni agrandi. Si vous devez transmettre un aspect 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.
- JPEG utilise une combinaison d'optimisation avec et sans perte pour réduire la taille du fichier de l'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 réduire la taille des images. 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 à une plate-forme, vous avez un contrôle total sur le client et vous pouvez utiliser WebP exclusivement. Facebook et de nombreuses autres entreprises utilisent WebP pour diffuser toutes leurs images dans leurs applications. Les économies réalisées valent vraiment la peine.
Impact sur le Largest Contentful Paint (LCP)
Les images peuvent être des candidats LCP. Cela signifie que la taille d'une image affecte son temps de chargement. Lorsqu'une image est un candidat LCP, il est essentiel de l'encoder efficacement pour améliorer le LCP.
Vous devez vous efforcer d'appliquer les conseils de ce guide afin que les performances perceptuelles d'une page soient aussi rapides que possible pour tous les utilisateurs. Le LCP fait partie des performances perceptuelles, car il mesure la vitesse d'affichage du plus grand élément de la page (et donc le plus perceptible).