Dans la gestion d'un site web, la mise à jour des images de page est une opération courante. Si la taille des images n'est pas bien gérée, elles peuvent apparaître floues ou ralentir le chargement de la page. Cet article, d'un point de vue pratique de maintenance, présente plusieurs approches pour déterminer la taille des images, à l'intention des responsables de sites d'entreprise.
Définir d'abord l'usage de l'image, puis décider de la taille
Le rôle de l'image dans la page influence les exigences de taille. Par exemple :
- Image bannière : occupe généralement une large zone de la page, la taille doit être déterminée en fonction de la largeur de la page et de la maquette, souvent 1920px de large, mais l'affichage réel peut être recadré, il faut donc s'assurer que le contenu clé se trouve dans la zone de sécurité.
- Image produit ou image d'illustration : a généralement une zone d'affichage fixe, la taille doit correspondre à cette zone pour éviter toute déformation.
- Vignette : utilisée pour les listes ou les recommandations, de petite taille, mais doit rester nette, souvent 200px × 200px ou 400px × 300px.
Critère de décision : vérifiez d'abord la largeur et la hauteur d'affichage de l'image dans le modèle de page (via les outils de développement du navigateur), puis préparez l'image à une taille double pour les écrans haute résolution.
Adapter en fonction de la mise en page et des besoins responsive
Les sites d'entreprise doivent généralement être compatibles avec les mobiles et les ordinateurs. La taille des images ne doit pas être conçue uniquement pour le bureau. Si l'image est redimensionnée proportionnellement sur mobile, il est recommandé de préparer une taille plus grande (par exemple 1920px de large), mais en contrôlant la taille du fichier ; si elle est recadrée sur mobile, il faut considérer la position du contenu important.
Pratiques utiles :
- Pour les images pleine largeur, préparez une largeur de 1920px, hauteur proportionnelle, et limitez la taille du fichier à 200 Ko (via des outils de compression).
- Pour les images de contenu, la largeur doit correspondre à la largeur maximale de la zone de contenu, par exemple 1200px.
- Pour les avatars ou petites icônes, utilisez directement le double de la taille d'affichage réelle, par exemple si l'affichage est de 50px, préparez 100px.
Contrôler la taille du fichier, équilibrer netteté et vitesse de chargement
La taille de l'image ne concerne pas seulement les pixels, mais aussi la taille du fichier. Des images trop lourdes ralentissent la page et nuisent à l'expérience utilisateur. Recommandations :
- Utilisez des outils de compression d'images (comme TinyPNG) pour réduire la taille du fichier dans une plage raisonnable.
- Pour les photos, convertissez-les au format WebP (si le navigateur le prend en charge) ou utilisez JPEG avec une qualité de 70 à 80.
- Pour les icônes ou graphiques simples, utilisez SVG ou PNG.
Critère : la taille du fichier d'une image ne doit pas dépasser 300 Ko, et le total des images au-dessus de la ligne de flottaison ne doit pas dépasser 1 Mo.
Nommer et sauvegarder pour faciliter la maintenance future
Lors de la mise à jour des images, il est recommandé d'utiliser des noms de fichiers significatifs, comme « nom-produit-scène-taille.jpg », pour faciliter la recherche ultérieure. Conservez également les fichiers sources et les versions recadrées pour une utilisation ultérieure à différents endroits.
Vérifier l'affichage après la mise à jour
Après le téléchargement de nouvelles images, vérifiez l'affichage sur différents appareils (ordinateur, mobile) pour vous assurer qu'il n'y a pas d'étirement, de flou ou de recadrage inapproprié. Utilisez les outils de développement du navigateur pour simuler différentes tailles d'écran.
En résumé, lors de la mise à jour des images d'une page, définissez d'abord l'usage et la mise en page, puis déterminez les dimensions en pixels, tout en contrôlant la taille du fichier, et en nommant et sauvegardant correctement. Ainsi, vous garantissez à la fois l'effet visuel et la vitesse de chargement.
