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

Décembre 2016


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


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.

Autres outils gratuits


MS Paint
Paint Net

Crédit photo : SSilver - Fotolia.com

A voir également :

Ce document intitulé «  Choisir une image et savoir l’optimiser pour son site pro  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.