Optimiser une image pour le web avec Gimp

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 :

https://www.gimp.org/downloads/

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.

Fenêtre échelle et taille de l'image

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.

Fenêtre exporter l'image de GIMP

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.

Fenêtre exporter l'image comme JPEG

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.

Fenêtre exporter l'image comme PNG

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

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.

S’abonner
Notification pour
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires