Optimiser vos images

Pour optimiser votre image, vous faites comment ? Dans Photoshop ? Enregistrer pour le web ? C’est bien. Oui, mais comment ? Petit retour d’expérience sur les modes d’enregistrement & Cie pour optimiser au mieux une image destinée au web.

Retour sur Photoshop :

Je ne vais pas faire un rapport détaillé sur les différents formats d’images existants, mais sachez néanmoins que le format JPEG – qui est un des plus utilisé sur le Web – est un format dit “avec perte”, ce qui veut dire que c’est un format compressible : vous pouvez changer son taux de compression. si vous enregistrez pour le WEB, Ça va d’une qualité de 0 à 100. 0 étant la compression maximale, donc la plus mauvaise qualité.

Enregistrer votre JPEG :

Quand vous enregistrez une image dans Photoshop, vous pouvez aisément faire une comparaison juste avant d’appliquer l’enregistrement (entre celle d’origine vs celle que vous êtes en train de modifier).

Le but finalement, c’est d’avoir une image avec un poids moindre et pour ça vous devez augmenter la compression. Mais à un certain moment, vous ne pouvez plus descendre en dessous d’un certain seuil de qualité sans que votre image s’en trouve fortement altérée visuellement (c’est le rapport qualité / poids ; on ne peut pas tout avoir ma bonne dame !).

Mais avant de vous lancer à l’attaque, savez-vous que Photoshop garde certaines métadonnées de votre image ?

Exemple : Photoshop garde vos tracés et vos positions de règles en mémoire. C’est intéressant pour ceux qui travaillent dans le print (pour récupérer un masque sur un JPEG par exemple), mais totalement inutile pour le monde du web. Et ça prend de la place !

Enregistrer pour le web :

Ce mode disponible sous Photoshop, va supprimer tout ça. Voici quelques astuces :

Enregistrer une image sous Photoshop

Dans le menu du panneau, à droite, vous avez le choix de mettre votre image :

  • en mode optimisée ou en mode progressive,
  • changer la couleur du cache
  • même, mettre du flou.

Progressif / optimisé : en mode progressif l’image s’affichera entièrement dès le chargement de la page, mais en très basse résolution (qualité 0), et se téléchargera progressivement. Tout dépend en fait du débit de votre connexion internet. Ce mode est intéressant, car dès le départ l’utilisateur verra l’image entièrement quelque soit son débit et surtout, il ne verra pas de “zones vides”.

Note : pour les PNG c’est pareil sauf que c’est le mode entrelacé.

Je vous renvoie sur l’article de Sebsauvage qui en avait parlé brièvement sur son blog.

Le flou : Je pense que cette option est très peu utilisée, mais peut servir dans certain cas spécifique. En ajoutant du flou, votre image peut perdre sensiblement du poids (je dis “peu” car en fait tout dépendra de la qualité initiale de votre image). Vous pouvez régler finement la qualité du flou (2 chiffres après la virgule). Il peut être utile lorsque votre image a des crénelures ou des effets de pixels “en escalier” sur certains contours.

Cache : Si votre JPEG contient de la transparence, couleur transparente sera la couleur de cache. Ne sert visiblement à rien pour l’optimisation sur un JPEG. Mais utile si vous ne voulez pas du blanc de base pour remplacer la transparence.

Mes paramètres :

Pour mes paramètres, tout dépend de la situation et de la taille de l’image bien évidemment. Mais si on veut faire une “moyenne” je ne dépasse généralement jamais une qualité de 80, à l’oeil nu on voit très rarement la différence entre du 80 et du 90, et parfois j’ajoute du flou (0,2 en moyenne) pour régler finement. Mais si vous avez Fireworks, pensez à enregistrer vos images web dans ce logiciel qui gère mieux l’optimisation.

Des optimiseurs d’images :

Pour perdre encore plus de poids, il existe des outils en ligne sur le net (parfois disponible sous forme de logiciels) .

Le meilleur : JpegMini

JpegMini est certainement le meilleur outil d’optimisation de JPEG, pour une image vous pouvez perdre jusqu’à 80% de poids ! L’algorithme de compression est basé sur la perception de l’oeil humain, vous ne verrez pas de moirage ou de crénelage sur votre image, car le logiciel analyse chaque image indépendamment. Un logiciel est disponible sur Windows et mac, mais avec un nombre d’optimisations limité par jour si vous n’êtes pas premium.

JPEGMini

Quelques dérivés :

Pour les PNG :

Les multitâches (Jpeg, png & cie)