• Optimisation>Des images -
• Publié le : 26-05-2014 | Modifié le : 28-12-2014

Les bases

La lecture de cet article Optimiser les images pour le web vaut mieux qu'un grand discours. Ainsi que l'utilisation après la transformation dans gimp de ce logiciel PNGoo, le GUI de pngquant (Pour un aperçu de la qualité pngquant vs pngcrush vs optipng vs pngnq). Cet outil est spécialisé dans les png.
La solution de facilité Kraken.io, la compression est faite sans perte de qualité.

Le résultat:

taille de l'image original 400 Ko, définition 826x438, et une profondeur de couleur à 24.

1. Chez kraken.io 64 235 octets
2. Maison 41 705 octets

Dans Gimp: J'ai testé le redimensionnement, à éviter, car il ya des effets d'escalier sur la police. Par contre j'ai baissé la résolution à 24 (Dans image, échelle et taille de l'image). Puis fichier, export as, le chemin, exporter, exporter l'image comme png, cocher Interlacing(Adam 7), Compression Level 5, Exporter.
Dans PNGoo: Importer votre image, Color settings, choisisser le nombre de couleurs en fonction de l'aperçu visuel, décocher dither(permet de gagner quelques octets), OK, puis go!.

Pour cet exemple, le seul effet visible et l'ombre portée de la fenêtre (sale dégradé gris), c'est un choix à faire la compression ou le rendu visuel. De plus il faut préparer son image en amont (chose que je n'avais pas faite lors de mon premier test), pour une capture d'écran, certain réglages sont à prévoir dès le départ, lissage des polices, transparence des fenêtres, fond d'écran. Le gain peut être assez important comme vous le verrez dans la partie suivante.

Un peu plus loin.

J'ai repris l'image de départ, plus ou moins, mais j'ai suivi le conseille du Hollandais volant, en retirant mon fond d'écran. Donc mon image dés le départ ne pèse que 220 Ko, avec une définition généreuse pour le web de 824x481, et une profondeur de couleur à 24.
Donc rien qu'en retirant le fond d'écran j'ai perdu environ 200 Ko pour une taille plus grande(824x481 contre 826x438)!

Le résultat:

Poids de l'image optimisée: 16 289 octets, ce qui malgré la taille, correspond plus à des poids d'images pour le web.

Pour bien comprendre le processus, je m'y suis pris en trois fois, dans un premier jet j'avais une image d'un poids de 400 Ko, puis en me penchant sur l'optimisation des images j'arrive finalement à une image de même définition, mais qui ne pèse plus que 16.2 Ko, avec une perte de qualité pas trop importante. Ici il n'y a plus de fond d'écran et les ombres portées des fenêtres sont mal rendues.

Intégration "responsive" à minima.

Donner ce code css à toutes vos images, pour qu'elles puissent se dimensionner de façon générique sur tous types de surface d'affichage.

Encore plus loin.

Vous trouverez dans le lien suivant une technique pour charger les images hors champ en différé. Chargement progressif de vos images en JavaScript (Lazy-load) chez bulledev. Cette technique demande un certain calibrage, les premières images ne doivent pas être concernées sinon vous aurez un retour d'erreur de vitesse chez Google PageSpeed Insights.