Exporter vos images pour le Web

Tutoriel, optimiser vos images

Outils utilisés :
Adobe Photoshop

Il va de soit qu’il ne faut pas exporter sur le Web des images trop lourdes, ce qui a pour conséquence un affichage des pages long, parfoit très long sans compter les nombreux autres inconvénients. Pour commencer rendez vos pages Web légères en optimisant vos images !

Dans ce tutoriel apprenez à exporter vos images pour Web avec Photoshop.

Nous allons travailler avec le logiciel Photoshop mais vous pouvez si vous le souhaitez adapter cette procédure sur un logiciel tel que Gimp ou un autre équivalent.

Procédure

Pour commencer, choisissez une image ou une photographie que vous ouvrez dans Photoshop.

Si le fichier est très lourd, il est préférable de réduire au préalable la taille de l’image. Pour ce faire, dans le menu Image choisir Taille de l’image.
(Sinon passer directement à l’étape exporter pour le Web et les périphériques)

@minini

@minini

La fenêtre Taille de l’image s’affiche et indique les informations relatives à la taille et résolution de l’image

@minini

Vérifier que les éléments :
 mettre les styles à l’échelle, conserver les proportions et réechantillonage sont cochés. Afficher la résolution à 72, la taille de l’image diminue automatiquement et proportionnellement, vous pouvez la réduire davantage en modifiant la taille, je vous conseille entre 500px et 600px pour des images à intégrer sur un site ou un blog.
Valider pour appliquer les modifications.

@minini

Il reste maintenant à exporter l’image pour le Web.
Dans le menu choisir fichier puis enregistrer pour le Web et les périphériques.
Cette fonction permet d’optimiser les fichiers pour le Web dans différents formats tel que JPG, PNG, GIF, ... nous allons nous intéresser au format JPG, conseillé pour l’exportation des images pour le Web (au cas échéant au format PNG 24 pour les images avec un fond transparent).

@minini

Une nouvelle fenêtre s’ouvre. Ici nous allons définir les propriétés que nous allons donner à notre image.
 Choisir le format JPG ou PNG24 pour les images avec des zones de transparences
 Donne une qualité entre 60 et 80 (en fonction de la qualité initiale de l’image)
 Fixer une taille, conseillé entre 500px et 600px (dans notre cas l’image à déjà une taille de 600px de hauteur que nous avons déterminé au préalable.

Une fois les réglages fais cliquez sur enregistrer.

 Enregistrer l’image Ajoutez par exemple une extension de nom tel que « web » à votre image pour la différencier du fichier original
ex : original_web.jpg.

Fermez votre fichier.
Choisir menu, fichier puis fermer
Enregistrez les modifications, « non », ceci est votre fichier original.

@minini

C’est tout, votre image est optimisée et prête à être envoyé sur le Web !

Pour les plus initiés, penser à utiliser un script et un traitement par lot.