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 à suivre

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

1.png

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)

2.png
3.png

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

4.png

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.

5.png

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).

6.png

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

 Donner 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.

8.png

 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.

10.png

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.

0 réponses

Laisser un commentaire

Rejoindre la discussion?
N’hésitez pas à contribuer !

Laisser un commentaire

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