Prendre la bonne décision
Réduire la taille d'une image avec CSS ne réduit pas la taille du fichier à télécharger. L'image source doit être adaptée à la taille de l'écran sur lequel elle sera affichée. Prévoir des largeurs différentes pour les ordinateurs et les téléphones mobiles réduit les transferts de données inutiles. Fournir des informations sur la taille évite également les sauts de mise en page lors du chargement du contenu.
Quels éléments doivent être pris en compte dans l'application ?
L'image principale qui apparaît sur le premier écran et celle de la galerie en dessous n'ont pas la même priorité. Ne retardez pas inutilement l'affichage de l'image principale de la page ; ne chargez les images non visibles que lorsque cela est nécessaire. Choisissez le format en fonction du type d'image ; la préservation des contours nets d'un logo est différente de la compression d'une photo.
Vérification et étape suivante
Après la compression, ne vous contentez pas de regarder la taille du fichier. Vérifiez l'absence de distorsions au niveau du texte, des visages, des traits fins et des transitions sombres. Les descriptions des images doivent être pertinentes ; les images décoratives ne doivent pas entraîner de répétitions inutiles pour le lecteur d'écran.
Votre liste de contrôle
- Générez une taille source adaptée à l'écran.
- Attribuez la priorité appropriée à la première image.
- Vérifiez visuellement la compression.