La toute première question à vous poser est de savoir si une image est, nécessaire pour obtenir l'effet recherché. Une bonne conception est simple et offre toujours les meilleures performances. Si vous pouvez supprimer une ressource image, qui nécessite souvent un grand nombre d'octets par rapport au code HTML, CSS, JavaScript et à d'autres éléments de 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 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 les résultats souhaités, mais de manière plus efficace:
- Effets CSS (ombres ou dégradés, par exemple) et animations CSS permet de créer des éléments indépendants de la résolution, offrant toujours un rendu net, quelle que soit la résolution et le niveau de zoom. souvent à une fraction des octets requis par un fichier image.
- Les polices Web permettent d'utiliser de belles polices de caractères. tout en conservant la possibilité de sélectionner, rechercher et redimensionner le texte, ce qui améliore considérablement la convivialité.
Si vous encodez le texte dans un composant Image, arrêtez-le et révisez-le. Une bonne typographie est essentielle à une bonne conception, un branding et une bonne lisibilité, mais l'utilisation du texte dans les images est médiocre: il est impossible de sélectionner le texte, d'effectuer des recherches ou de zoomer sur celui-ci. difficilement accessible et peu convivial pour les appareils à haute résolution. L'utilisation de polices Web nécessite son propre ensemble d'optimisations, mais il répond à toutes ces préoccupations et est toujours un meilleur choix pour afficher du texte.
Choisir le bon format d'image
Si vous êtes sûr qu'une image correspond à la bonne option, vous devez sélectionner soigneusement le type d'image adapté à la tâche.
- Graphiques vectoriels utiliser des lignes, des points et des polygones pour représenter une image.
- Graphiques matriciels représenter une image en codant les valeurs individuelles de chaque pixel dans une grille rectangulaire.
Chaque format présente des avantages et des inconvénients. Les formats vectoriels sont particulièrement adaptés 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, quelle que soit la résolution et le niveau de zoom. ce qui en fait un format idéal pour les écrans et les assets haute résolution qui doivent s'afficher dans différentes tailles.
Toutefois, les formats vectoriels sont courts lorsque la scène est compliquée (par exemple, une photo): la quantité de balisage SVG permettant de décrire toutes les formes peut être extrêmement élevée. et il se peut que le résultat ne soit toujours pas "photoréaliste". Dans ce cas, vous devez utiliser un format d'image matricielle (PNG, JPEG, WebP ou AVIF, par exemple).
Les images matricielles n'ont pas les mêmes propriétés de résolution ou de zoom indépendamment Lorsque vous augmentez la taille d'une image matricielle, vous obtenez des images dentelées et floues. 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 repose sur plusieurs pixels d'appareil. Pourquoi ? Eh bien, plus il y a de pixels de l'appareil, plus le détail du contenu affiché à l'écran est précis.
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. La bonne nouvelle, c'est que les images vectorielles sont parfaitement adaptées à cette tâche, car elles peuvent s'afficher quelle que soit leur résolution, avec des résultats de grande netteté. le coût de traitement peut être plus élevé pour obtenir un rendu plus précis, alors que l'élément sous-jacent est le même et qu'il est indé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 pixel 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 élément photo de 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 doublerons la résolution de l'écran physique, le nombre total de pixels augmente par quatre fois: double le nombre de pixels horizontaux, multiplié par deux le nombre de pixels verticaux. Par conséquent, un « 2x » l'écran double, mais quadruple le nombre de pixels requis !
Qu'est-ce que cela signifie concrètement ? Les écrans haute résolution vous permettent de fournir de belles images, ce qui peut être une excellente caractéristique du produit. Toutefois, 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 ne dépendent pas de la résolution et fournissent toujours des résultats nets.
- Si une image matricielle est nécessaire, 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, 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" d'une image donnée combine les résultats visuels souhaités et les exigences fonctionnelles.
| Format | Transparence | Animation | Navigateur |
|---|---|---|---|
| Image PNG | Oui | Non | Tous |
| JPEG | Non | Non | Tous |
| WebP | Oui | Oui | Tous les navigateurs récents Consultez la section Puis-je utiliser cette fonctionnalité ? |
| AVIF | Oui | Oui | Non. Consultez la section Puis-je utiliser ? |
Deux formats d'images matricielles sont tous compatibles: PNG et JPEG. En plus de ces formats, les navigateurs récents sont compatibles avec le format WebP, qui est plus récent, tandis que seuls certains sont compatibles avec le format AVIF, plus récent. Ces deux nouveaux formats offrent une meilleure compression globale et davantage de fonctionnalités. Quel format utiliser ?
WebP et AVIF offrent généralement une meilleure compression que les formats plus anciens, et doivent être utilisés lorsque cela est 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 formats d'image plus anciens, tenez compte des points suivants:
- Avez-vous besoin d'animations ? Utilisez des éléments
<video>.- Et les GIF ? GIF limite la palette de couleurs à 256 couleurs au maximum,
et crée des fichiers beaucoup plus volumineux que les éléments
<video>. Voir Remplacer les GIF animés par des vidéos.
- Et les GIF ? GIF limite la palette de couleurs à 256 couleurs au maximum,
et crée des fichiers beaucoup plus volumineux que les éléments
- Avez-vous besoin de préserver la précision des détails avec la plus haute résolution ? Utilisez le format PNG ou le format WebP sans perte.
- PNG n'applique aucun algorithme de compression avec pertes au-delà du choix de la taille de la palette de couleurs. Cela permet d'obtenir une image de la plus haute qualité, mais au coût d'une taille de fichier considérablement supérieure à celle des autres formats. Utilisez-les à bon escient.
- 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 réexaminez-le. Le texte des images ne peut pas faire l'objet d'une recherche ni d'un zoom. Si vous devez personnaliser l'apparence de votre site (pour des raisons de branding ou autres), utilisez plutôt une police Web.
- Optimisez-vous une photo, une capture d'écran ou un élément image similaire ? Utilisez le format JPEG, WebP avec pertes ou AVIF avec pertes.
- JPEG utilise une combinaison d'optimisation avec et sans perte pour réduire la taille de fichier du composant Image. Essayez plusieurs niveaux de qualité JPEG afin de trouver le meilleur compromis entre qualité et taille de fichier pour votre élément.
- Les fichiers WebP avec perte ou AVIF avec pertes peuvent être des alternatives JPEG acceptables, mais sachez que le mode avec perte de WebP, en particulier, élimine certaines informations de chrominance 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 une WebView pour afficher le contenu dans votre application spécifique à la plate-forme, vous avez le contrôle total du client et pouvez utiliser exclusivement WebP. Facebook et bien d'autres utilisent WebP pour diffuser toutes leurs images dans leurs applications : les économies en valent vraiment la peine.
Impact sur la métrique Largest Contentful Paint (LCP)
Les images peuvent être des candidats au LCP. Cela signifie que la taille d'une image affecte son temps de chargement. Lorsqu'une image est candidate pour le LCP, il est crucial de l'encoder efficacement pour améliorer le LCP.
Vous devez vous efforcer d'appliquer les conseils donnés dans cet article afin que les performances perceptuelles 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 du plus grand élément (et donc le plus perçu) de la page.