La toute première question à se poser est de savoir si une image est réellement nécessaire pour obtenir l'effet recherché. Une bonne conception est simple et donnera toujours les meilleures performances. Si vous pouvez éliminer une ressource image, qui nécessite souvent un grand nombre d'octets par rapport au code HTML, CSS, JavaScript et à d'autres éléments sur la page, il s'agit toujours de 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 cet équilibre.
Vous devez ensuite déterminer s'il existe une autre technologie capable de fournir les résultats souhaités, 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 offrent toujours un rendu net à chaque résolution et niveau de zoom, souvent à une fraction des octets requis par un fichier image.
- Les polices Web permettent d'utiliser des polices de caractères esthétiques tout en préservant la possibilité de sélectionner, de rechercher et de redimensionner du texte, ce qui améliore considérablement la facilité d'utilisation.
S'il vous arrive d'encoder du texte dans un composant Image, arrêtez-vous et recommencez la procédure. Une typographie de qualité est essentielle à une bonne conception, une bonne image de marque et une bonne lisibilité, mais le texte dans les images nuit à l'expérience utilisateur : le texte n'est ni sélectionnable, ni inclus dans l'index de recherche, il n'est pas possible de zoomer, d'accéder ni de s'adapter aux appareils à PPP élevé. L'utilisation de polices Web nécessite son propre ensemble d'optimisations, mais elle répond à tous ces problèmes et constitue toujours un meilleur choix pour l'affichage de texte.
Choisir le bon format d'image
Si vous êtes certain 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 codant les valeurs individuelles de chaque pixel dans une grille rectangulaire.
Chaque format a ses avantages et ses inconvénients. Les formats vectoriels conviennent parfaitement aux images composées de formes géométriques simples, telles que des logos, du texte ou des icônes. Ils offrent des résultats nets pour toutes les résolutions et tous les paramètres de zoom, ce qui en fait un format idéal pour les écrans et les éléments haute résolution qui doivent être affichés dans différentes tailles.
Toutefois, les formats vectoriels sont insuffisants lorsque la scène est complexe (par exemple, une photo) : la quantité de balisage SVG pour décrire toutes les formes peut être excessivement élevée et la sortie peut ne pas être "photoréaliste". Dans ce cas, vous devez utiliser un format d'image matricielle tel que PNG, JPEG, WebP ou AVIF.
Les images matricielles n'ont pas les mêmes propriétés que la résolution ou l'indépendance du zoom. Lorsque vous augmentez la taille d'une image matricielle, vous voyez des graphismes irréguliers et flous. Par conséquent, vous devrez peut-être enregistrer plusieurs versions d'une image matricielle dans 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 de l'appareil. Un pixel CSS unique peut correspondre directement à un pixel d'appareil unique ou être soutenu par plusieurs pixels d'appareil. Quel est l'intérêt ? Eh bien, plus il y a de pixels sur l'appareil, plus le contenu affiché à l'écran sera détaillé.
Les écrans à DPI élevé (HiDPI) produisent de superbes résultats, mais il existe un compromis évident : les composants image nécessitent plus de détails pour bénéficier du nombre plus élevé de pixels de l'appareil. La bonne nouvelle est que les images vectorielles sont parfaitement adaptées à cette tâche, car elles peuvent être affichées dans n'importe quelle résolution avec des résultats nets. Les coûts de traitement peuvent être plus élevés pour rendre le détail plus fin, mais l'élément sous-jacent est le même et ne dépend pas de la résolution.
Les images matricielles, quant à elles, posent beaucoup plus de problèmes, 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. Examinons par exemple la différence entre un élément photo affiché à une résolution de 100 x 100 pixels (CSS) :
| Résolution d'écran | Nombre total de pixels | Taille du fichier non compressé (4 octets par pixel) |
|---|---|---|
| x1 | 100 x 100 = 10 000 | 40 000 octets |
| 2 fois | 100 x 100 x 4 = 40 000 | 160 000 octets |
| 3 | 100 x 100 x 9 = 90 000 | 360 000 octets |
Lorsque nous doublerons la résolution de l'écran physique, le nombre total de pixels augmente avec un facteur de quatre : le nombre de pixels horizontaux est doublé, le nombre de pixels verticaux est multiplié par deux. Ainsi, un écran "x2" double le nombre de pixels requis, mais qu'il quadruple également.
Qu'est-ce que cela signifie concrètement ? Les écrans haute résolution vous permettent de créer de superbes images, ce qui peut être une excellente caractéristique du produit. Cependant, les écrans haute résolution nécessitent également des images haute résolution. Par conséquent:
- Dans la mesure du possible, privilégiez les images vectorielles, 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'images matricielles
En plus des différents algorithmes de compression avec et sans perte, différents formats d'image sont compatibles avec 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 est une combinaison des résultats visuels souhaités et des exigences fonctionnelles.
| Format | Transparence | Animation | Visiteur |
|---|---|---|---|
| Image PNG | Oui | Non | Toutes |
| JPEG | Non | Non | Toutes |
| WebP | Oui | Oui | Tous les navigateurs récents. Consultez la section Puis-je utiliser ? |
| AVIF | Oui | Oui | Non. Consultez l'article Puis-je l'utiliser ? |
Deux formats d'image matricielle sont universels: PNG et JPEG. En plus de ces formats, les navigateurs récents acceptent le format WebP le plus récent, tandis que seuls certains sont compatibles avec le format AVIF. Ces deux nouveaux formats offrent une meilleure compression globale et davantage de fonctionnalités. Alors, 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 avec une image JPEG ou PNG en remplacement. 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'animations ? Utilisez des éléments
<video>.- Qu'en est-il des GIF ? GIF limite la palette de couleurs à 256 couleurs au maximum et crée des tailles de fichier beaucoup plus grandes que les éléments
<video>. Consultez Remplacer les GIF animés par des vidéos.
- Qu'en est-il des GIF ? GIF limite la palette de couleurs à 256 couleurs au maximum et crée des tailles de fichier beaucoup plus grandes que les éléments
- Avez-vous besoin de conserver les détails les plus fins avec la plus haute résolution ? Utilisez le format PNG ou WebP sans perte.
- Le format PNG n'applique aucun algorithme de compression avec pertes au-delà du choix de la taille de la palette de couleurs. Ainsi, il produira une image de la meilleure qualité possible, mais pour un coût bien plus élevé que les autres formats. Utilisez-le de façon réfléchie.
- WebP dispose d'un mode d'encodage sans perte qui peut être plus efficace que PNG.
- Si le composant Image contient des images composées de formes géométriques, envisagez de les convertir au format vectoriel (SVG).
- Si le composant Image contient du texte, arrêtez-le et recommencez la procédure. Il n'est pas possible de sélectionner, de rechercher ou de zoomer le texte des images. Si vous devez transmettre un style personnalisé (pour le branding ou pour 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 pertes ou AVIF avec pertes.
- Le format JPEG utilise une combinaison d'optimisations avec et sans perte pour réduire la taille du fichier de l'élément image. Essayez plusieurs niveaux de qualité JPEG afin de trouver le meilleur compromis entre la qualité et la taille du fichier pour votre élément.
- Le WebP avec pertes ou le format AVIF avec pertes peuvent être des alternatives JPEG acceptables, mais sachez que le mode avec pertes de WebP, en particulier, élimine certaines informations de chrominance pour obtenir des images plus petites. Cela signifie que les couleurs sélectionnées peuvent ne pas être identiques à celles d'un fichier JPEG équivalent.
Enfin, notez que si vous utilisez une WebView pour afficher du contenu dans votre application spécifique à une plate-forme, vous contrôlez entièrement le client et pouvez utiliser exclusivement WebP. Facebook et beaucoup d'autres utilisent WebP pour diffuser toutes leurs images dans leurs applications. Les économies en valent vraiment la peine.
Impact sur Largest Contentful Paint (LCP)
Les images peuvent être des candidats LCP. Cela signifie que la taille d'une image a une incidence sur son temps de chargement. Lorsqu'une image est candidate au LCP, l'encodage efficace de cette image est crucial pour améliorer le LCP.
Vous devez vous efforcer d'appliquer les conseils donnés dans cet article 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 vitesse d'affichage de l'élément le plus grand (et donc le plus perceptible) sur la page.