Choisir une image et savoir l’optimiser pour son site pro

Pour rendre un affichage optimal des images de votre site Internet professionnel, le choix du format doit être impérativement réalisé en fonction de son utilisation.

Choisir un format

Sur Internet, seulement trois formats sont actuellement reconnus et correctement affichés par les navigateurs : le JPEG, le GIF et le PNG. Pour un meilleur rendu visuel, certains de ces formats d’images sont plus recommandés selon l’utilisation que vous souhaitez en faire (logo, photo, icône) ainsi que les caractéristiques de votre image (taille, qualité, poids).

Pour une image comprenant du texte : le PNG

Ce format fournit une image parfaitement claire qui ne comporte pas de détérioration, même si vous décidez de la réduire. Au contraire, le format JPEG va rendre une image plutôt baveuse, parfois floue sur les bords, car le passage précipité d’une couleur à une autre produit un effet de dégradé sale relativement visible. Du côté du GIF, bien que l’image propose un bon rendu, le poids trop disproportionné condamne son utilisation.

Pour une image avec transparence : le PNG

La transparence correspond à l’opacité de l’image. Cette technique offre la possibilité de distinguer d’éventuels autres éléments graphiques présents en arrière plan. L’utilisation du PNG est à favoriser pour ce type d’image car il propose un résultat plutôt satisfaisant. Le GIF déçoit très largement par la qualité médiocre qu’il affiche étant donné qu’il supporte très peu l’effet de transparence. Enfin, le format JPEG est incompatible avec la transparence.

Pour un logo, une icône, un dessin, un graphique : le PNG voire le GIF

Le PNG offre une image de très bonne qualité. La restriction des couleurs imposées par le format n’a pas d’effet négatif sur l’image. Mêmes remarques pour le GIF qui peut être également utilisé pour ce type d’image. Quant au JPEG, il retranscrit lui aussi une image propre, bien finalisée mais son poids est un peu trop important par rapport aux deux précédents.

Pour une photographie, une image haute qualité : le JPEG

Le JPEG est incontestablement le format à privilégier. Du fait de son large panel de couleurs (16,7 millions), il offre à la fois une qualité parfaite et un poids optimal pour le web. Le GIF est à proscrire car il va dégrader considérablement la qualité de l’image. Le PNG peut donner une image de bonne qualité néanmoins son poids sera bien trop lourd pour envisager de l’insérer sur une page web.

Pour une animation : le GIF

Seul le GIF supporte les images animées.

Optimiser le poids de son image pour le web

Au-delà de la représentation visuelle, bien optimiser votre image va vous permettre de gagner un temps conséquent lors de l’affichage d’une page Internet et va réduire la place que prend l’image sur votre serveur. Pour vous aider à manipuler vos images, voici quelques conseils pratiques que vous pourrez réaliser avec le logiciel de retouche gratuit The Gimp.

Changer de format

Une fois que vous avez ouvert The Gimp, cliquez sur « Fichier » puis « Ouvrir ». Sélectionnez votre image et validez. Cliquez une nouvelle fois dans l’onglet « Fichier », puis « Enregistrer sous ». Une fois la boîte de dialogue ouverte, cliquez sur « Sélectionner le type selon l’extension » puis dans la liste déroulante choisissez le format que vous souhaitez.

Compression

Qu’est ce que c’est ? La compression d’une image permet de rendre celle-ci beaucoup plus légère que son poids initial en supprimant des données inutiles ou redondantes, tout en conservant les mêmes dimensions.

Pourquoi ? Une image trop lourde sur votre site web ralentira l’affichage et augmentera le temps de chargement d’une page sur un navigateur. Avant de commencer, sachez que la compression d’une image JPEG peut parfois être destructrice pour sa qualité. A l’inverse, le PNG et le GIF supportent la compression sans perte de qualité.

Comment ? Après avoir suivi la même procédure que précédemment, en fonction du format que vous avez choisi la méthode de compression est un peu différente :
Le JPEG : déplacez le curseur « Qualité ». En cochant l’option d’aperçu, une fonction vous permet de voir les modifications apportées en temps réel. Pratique pour juger la qualité et déterminer votre choix.
Le PNG : déplacez le curseur « Niveau de compression ». Plus le taux est important, plus l’image sera compressée.
Le GIF : pas de fonctionnalité prévue. Le GIF ne se compresse qu’en diminuant la taille et la résolution de l’image.

Résolution et taille

Qu’est ce que c’est ? La taille correspond à la largeur et la hauteur de votre image. La résolution d’une image correspond quant à elle au nombre de points par unité de surface de l’image, soit le rapport entre le nombre de pixels et les dimensions.

Pourquoi ? Puisque votre image est destinée au web une résolution de 72 pixels par pouce suffit amplement. La taille dépend en revanche de l’utilisation que vous voulez en faire.

Comment ? Une fois que vous avez ouvert The Gimp, cliquez sur « Fichier » puis « Ouvrir ». Sélectionnez votre image et validez. Cliquez ensuite dans l’onglet « Image », puis « Echelle et taille de l’image ». Une fois la boîte de dialogue ouverte, choisissez la taille que vous souhaitez donner à votre image en vérifiant que celle-ci est exprimée en pixels. Dans les deux champs suivants, insérez la résolution de 72 pixels/in pour les axes X et Y. Avant de valider, vérifiez bien si elle est bien exprimée en pixels/in.