Comment bien redimensionner et compresser ses photos ?

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 !

Choix du format

Pour les photos, le format recommandé sur la toile est le JPEG (ou JPG).
Pour les icônes ou les pictogrammes, il est souvent nécessaire de leur ajouter un fond transparent, afin qu'ils puissent s'intégrer correctement sur la couleur de fond de la page, sans démarcation. Pour cela, il est préférable d'utiliser le format PNG ou GIF.
Le format GIF est souvent utilisé pour des images de petite taille ou des images animées. En effet le format GIF permet de créer des animations qui peuvent ensuite être intégrées facilement aux pages web.
Pour les animations ou les images avec un fond transparent, il sera plus pratique d'utiliser un logiciel comme GIMP ou Photoshop qui permettent de travailler avec des calques.

Traitement de l'image

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.

Compresser l'image

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.

Les couleurs

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.