Ce tutoriel vous permettra d’apprendre à optimiser vos images pour le web avec le logiciel gratuit GIMP.
Télécharger GIMP
Vous pouvez télécharger GIMP gratuitement à l’adresse suivante :
Déterminez la taille de l’image pour votre page web
La première manipulation consistera à redimensionner l’image aux dimensions adaptées à votre page web. Il est en effet inutile d’intégrer une image de 5000px de large pour l’afficher ensuite sur 300 pixels dans votre page…
Si vous ne savez pas du tout à quelles dimensions vous devez régler votre image. Insérez votre image dans votre page sans la dimensionner et faites des tests en dimensionnant votre image en HTML comme dans l’exemple ci-dessous :
<img src="image.jpg" width="200">
Il suffit alors de faire varier la valeur de width jusqu’à ce que vous ayez le résultat souhaité. Vous connaitrez ainsi la largeur d’affichage de votre image.
Vous pouvez également faire des tests avec l’attribut height, mais attention à ne pas mettre une valeur pour la hauteur et une valeur pour la largeur en même temps car vous pourriez dans ce cas la déformer l’image.
Redimensionnez votre image
Maintenant que vous connaissez la largeur que vous souhaitez pour votre image, il suffit d’ouvrir votre image dans GIMP, puis d’aller dans le menu Image / Échelle et taille de l’image…. Dans la fenêtre qui s’ouvre, saisissez la largeur ou la hauteur désirée puis validez avec le bouton Échelle.
Notez qu’il n’est pas nécessaire de modifier la résolution de l’image puisque celle-ci n’est pas prise en compte pour un affichage dans une page web.
Exportez l’image pour le web
L’image est prête, il faut maintenant l’exporter dans un format adapté pour le web. Les principaux formats utilisés pour le web sont .png, .jpg ou .gif.
Export de l’image
Pour exporter votre image, cliquez dans sur le menu Fichier / Exporter. Dans la fenêtre qui s’ouvre, cliquez sur la flèche devant le texte Sélectionner le type de fichier, puis choisissez le format d’export que vous souhaitez utiliser et cliquez sur Exporter.
Une fenêtre contenant les paramètres correspondant au format sélectionné va alors s’afficher…
Format .jpg
Si vous choisissez le format .jpg, vous allez pouvoir déterminer le taux de compression de votre image. Avant de jouer avec le curseur Qualité, cochez la case Afficher l’aperçu dans la fenêtre d’image afin de pouvoir observer les effets de la compression sur le résultat final. Adaptez la qualité de votre image à votre convenance tout en observant l’indication sur la taille du fichier qui varie. Lorsque le résultat vous convient, vous pouvez cliquer sur Exporter.
Format .png
Si vous exportez votre fichier en .png, utilisez toujours une compression maximum. La compression n’aura pas d’effet sur la qualité de l’image ou le temps d’affichage, mais uniquement sur la durée de l’exportation.
Sauf mention contraire*, l'article Optimiser une image pour le web avec Gimp et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.