Posté le 15/04/2016 - par Amy Wiggenhauser - dans Web Design
Les photos, pictogrammes et éléments graphiques sont des composants essentiels du design de nombreux sites web. Ils apportent de l'information, de l'originalité et sont des composants à part entière de l'identité graphique des pages. Il est donc très important de les utiliser correctement, en apportant une attention particulière à leur taille et à leur vitesse de chargement.
La taille et le poids des éléments est très importante, car les photos et les images ne doivent pas ralentir le temps de chargement des pages, sous peine de lasser les visiteurs. Pour cela, chaque élément graphique doit être dimensionné à la bonne taille et doit être si possible compressé. Le but est d'utiliser des images les plus légères possibles, avec la meilleure qualité possible !
La première étape est de déterminer la taille en pixel qu'aura l'image sur la page internet finale. Ensuite, redimensionner l'image à cette taille exactement (de nombreux logiciels de traitement d'image proposent cette option). Si l'image doit être visible sur plusieurs supports avec différentes tailles d'écran (ordinateur, smartphones, tablettes numériques, ...) il est préférable de prévoir plusieurs tailles d'images, chacune adaptée à l'un des supports. Ceci permettra d'éviter de charger une photo de 3000 pixels de large, sur un écran de téléphone dont la largeur est 10 fois moins grande.
Et, bien évidement, si une fois intégrée à la page, l'image n'est visible qu'en partie (par exemple si elle est en fond d'écran et masquée en partie par un bandeau d'entête ou une colonne sur le côté de l'écran), il est recommandé de découper l'image à la taille visible.
La plupart des logiciels de traitement d'image proposent de compresser les format PNG et JPG au moment de l'enregistrement de l'image, en prévisualisant le résultat. Ceci permet d'utiliser le niveau de compression le plus petit possible tout en conservant la qualité visuelle de l'image.
Pour aller plus loin, il existe des outils comme jpegoptim (pour le format JPG) ou optipng (pour le format PNG) qui permettent de compresser les images sans perte.
Pour alléger davantage les images, adapter le nombre de couleurs du fichier image aux couleurs qui sont réellement utilisées sur l'image. Par exemple, si votre icone n'utilise que du noir, penser à définir une palette de couleur noir et blanc uniquement.
Pour les fichiers avec des couleurs personnalisées, mais en nombre limité, il est possible avec la plupart des logiciels de définir des palettes personnalisées.
Bonne optimisation à tous !
Crédit photo : Freepik
Commentaires
Laisser un commentaire