Tutoriel : Optimiser une image pour le web

Avant d'aborder le sujet, il est important de savoir que les images sont affichées sur le web avec une résolution de 72ppp (points ou pixels par pouces), et qu'il est préférable qu'elles soient en jpeg, png ou gif pour une meilleure compression et compatibilité avec les navigateurs.


Tout d'abord, qu'entend-t-on par optimiser une image pour le web ?

Le but de cette manoeuvre est d'avoir une image de qualité qui fasse le minimum de "poids", en effet il serait dommage d'avoir une image de 2mo a afficher sur un site web, celle-ci mettrais beaucoup trop de temps à s'afficher, il est donc important de réduire ce "poids" au maximum tout en gardant une qualité d'image respectable.


Les différents formats :

3 formats sont a privilégier pour cette optimisation:

-le format jpeg (.jpg), format de compression, 16 millions de couleurs, surtout adapté pour les photos et images avec beaucoup de couleurs différentes, il peut s'avérer destructeur si le taux de compression est trop fort.
-le format gif (.gif), 256 couleurs, très utilisé pour les icones, il supporte la transparence et peut être utilisé pour des images sans trop de dégradés de couleurs, son principal atout est qu'il peut être animé.
-le format png (.png), 256 couleurs également, il supporte la transparence, mais peut supporter les dégradés de transparence, souvent plus léger que le gif pour les icones, il peut être utile dans de nombreux cas, notamment en remplacement du gif mais ne peut être animé.


Comment s'y prendre ?

Nombreux outils peuvent vous permettre d'optimiser vos images :

Avec Photoshop :
-Faites Image > Taille de l'image
-Mettez la résolution à 72 pixels/pouces
-Validez
-Faites Fichier > Enregistrer pour le web et les périphériques
-Choisissez le format approprié:
-JPEG: photos
-GIF: icones ou images destinées a être animées
-PNG8: icones
-PNG24: icones ou images avec dégradés de transparence (celà peut aussi servir a dé-pixeliser les contours d'une images si elle l'est trop)
-Paramétrez pour que l'image soit la plus fidèle et la moins lourde possible (taille apparaissant en dessous de l'aperçu)
-Pour le JPEG, une compression entre 60 et 80% est généralement le mieux
-Pour le GIF et PNG8, si votre image ne possède pas de dégradé choisissez sans tramage, modifiez les paramètre jusqu'a avoir le rendu que vous voulez
-Pour le PNG24, l'entrelacement permet de faire apparaitre l'image progressivement
-Enregistrez

Avec Paint.net :
-Faites Image > Redimmensionner
-Changez la résolution en 72 pixels/pouces
-Faites Fichier > Enregistrer sous
-Choisissez quel format vous voulez
-Paramétrez
-Faites OK

Avec d'autres outils :
Changez toujours la résolution en 72ppp, cela ne sert à rien qu'elle soit plus grande et c'est déjà une grande source de "perte de poids"
Essayez ensuite de voir si il existe une fonction conçue pour l'optimisation web, sinon enregistrez au mieux votre image.


Et voilà, vos images sont optimisées et prêtes a être uploadées.

On peut citer un convertisseur d'images ainsi que bien d'autres support vidéos et audios notamment, il est gratuit et très fonctionnel. Il s'appelle Format Factory et je vous le recommande vivement.

Format Factory est gratuit, simple à prendre en main et entièrement traduit en français. Sur la gauche de l'interface, une colonne permet de choisir le type de destination: vidéo, audio, image, appareil mobile ou DVD, CD et ISO.

Télécharger Format Factory

Merci Fredolefou pour ton tuto .