[Apprenti] Enregistrer des images pour le web et les périphériques

Bonjour,

Il est possible que certains d'entre vous aient déjà vu la manipulation dans un tuto que j'ai réalisé.
J'ai malgré tout décidé de créer un tuto à part entière afin d'être sûre que le maximum d'entre vous en prennent connaissance car c'est une étape indispensable pour toute personne qui détient un blog, site ou publie régulièrement des images sur Internet.

Optimiser une image pour le web et les périphérique c'est la rendre plus légère. Certains d'entre vous pensent la compresser en jouant sur les dpi. Après m'être amusée à prendre vos images et voir leur poids après optimisation; je tiens à vous dire que cela ne suffit pas !

Pourquoi optimiser une images ?
- les moteurs de recherche prennent en compte le poids des pages dans leurs classements
- les moteurs de recherche prennent en compte le temps de chargement
- une image moins lourde s'affiche plus rapidement, ce qui est plus agréable pour vos visiteurs.

Bon c'est re-parti :

Donc au niveau des menus Fichier > Enregistrer pour le web et les périphériques...
(Raccourci Mac : Maj + Alt + Cmd +S, raccourci PC : Maj + Alt + CTRL +S)



1 - Présentation des éléments :



Cadre rouge :
-> Outil main (H) : permet de faire bouger l'aperçu et donc de vous déplacer dans la fenêtre
-> Outil sélection de tranche (C) : va permettre de sélectionner la tranche qui nous intéresse pour agir dessus. En effet on va devoir configurer chaque tranche une par une. cela permet ainsi dans une image mixte de décider quel sera le format de chaque éléments.
-> Outil zoom (Z) : permet de zoomer et de dé-zoomer. C'est un outil important pour vérifier la qualité du rendu de l'image ou de la photo afin de configurer correctement l'optimisation.
Par défaut on va zoomer pour dé-zoomer, maintenez la touche Alt enfoncée.
-> Vous avez le choix entre plusieurs vues, ici pour vous montrer les possibles j'ai opté pour 4 vignettes mais je vous conseille de choisir 2 vignettes pour avoir une meilleure vue d'ensemble

Cadre Bleu vous donne différentes informations
-> le type de format choisi (gif, png-8, png-24, jpeg)
-> le poids de l'image une fois optimisée
-> le temps de téléchargement de celle-ci. En cliquant sur l'icône vous pouvez choisir la vitesse de téléchargement.

Cadre Vert c'est la partie qui va nous permettre de regeler l'optimisation. On voit ça plus en détail de suite.

2 - Configurer l'optimisation :

Avant de commencer la présentation, je dois vous parler des différents formats d'image car vous allez devoir faire un choix.
Pour les photos, la question ne se pose pas on opte pour le format jpeg ! Tout simplement parce que les formats gif et png sont limités à 256 couleurs. Pour modifier le poids de la photo, vous devrez jouer sur la qualité

Pour les images, on va se tourner vers les autres formats : gif, png-8 et png-24.
Votre choix sera fonction de la qualité du rendu et du poids.
Sachez également que ce seul ces 3 formats permettent d'avoir un arrière plan transparent.


Pour une image jpeg :
Vous pouvez choisir via le premier menu déroulant une qualité d'image : Maximum, Elevée, Supérieure, Moyenne, Faible
Vous pouvez autrement via le second menu rentrer une valeur ou la choisir en faisant bouger le curseur.


Pour une image gif :
Vous pouvez choisir le nombre de couleur qui compose votre image

3 - Modifier la taille :


Un élément qui est vraiment utile, la modification de la taille à choisir avant d'enregistrer.
Là j'indique 640px car c'est la taille maximale pour le forum, l'ordi se charge de réduire l'image en respectant les proportions.

4 - Enregistrer :


Rien de compliqué, sélectionnez le dossier de destination et cliquer sur Enregistrer.
Pour être sûr(e) que vous enregistrez bien en optimisé vérifiez que le titre de la fenêtre est bien : Enregistrer une copie optimisée sous

Voilà c'était la version soft de l'optimisation d'image.
Il y avait des détails en plus sur ce tuto :
-> [Débutant] Optimiser ses images pour le web
Il s'inscrit dans le cadre d'une série, vous pouvez y aller si vous êtes curieux.

C'est fini bonne optimisation  

Merci Fu pour le tuto ^^

Merci pour le tuto!

Merci pour ce tuto! Je sais que pour Gimp on a besoin d'un plug-in pour pouvoir faire ça.