Comment optimiser les images pour le web ?
Publié le :
Optimiser une image pour le web peu ce faire dés la création de l'image.
Nous pouvons :
choisir dans quel format la diffuser : png, jpg, gif, svg,
simplifier le graphisme d'un dessin en limitant le nombre de couleurs utilisées,
limiter la complexité ou le découpage des formes,
utiliser des formes de base scalables.
La «compression de l'image » (étape finale) devra diminuer son poids sans altérer la qualité de la visualisation sur un écran.
Ces optimisations permettent de :
- Diminuer les temps de chargement des images de votre site sur l'appareil du visiteur,
- diminuer le temps de chargement de la page web,
- limiter la consommation de bande passante (réduction coût d'abonnement ou du service)
et augmenter la possibilité de connexions simultanées.
Il en résulte :
- Une satisfaction accrue des visiteurs, surtout pour ceux qui utilisent un appareil mobile pour naviguer sur votre site comme c'est le cas dans plus de 60 % des cas aujourd'hui.
- Une amélioration du taux de rebond ; plus le site est rapide et plus vous augmentez les chances de visite des autres pages.
- Un abaissement des coûts des transferts de données ; si vos fichiers sont stockés dans un conteneur d'objets type Amazon S3, optimiser ses images est indispensable.
Compression d'image PNG
Pour optimisé une image PNG, Adobe Photoshop Element™ propose dans son menu «Fichier » une option enregistrer pour le web. Malgré cela, il subsiste dans le fichier des données d'entête qui augmentent parfois inutilement le poids du fichier (surtout pour une icône ou des graphismes de faibles dimensions).
Le logiciel GIMP permet aussi une certaine optimisation.
Mais une compression supplémentaire non destructive, peut-être obtenue avec des outils en lignes ou un logiciel spécifique.
Outils en ligne Compresspng
Voici l'exemple du site Compresspng qui fait le travail rapidement et simplement.
Nous remarquons aussi qu'il propose des fonctionnalités pour compresser les fichiers JPEG, PDF, SVG et GIF.
Copie d'écran de la page Compresspng.com/fr/.
Avec Compresspng, il suffit, en cliquant sur le bouton SÉLECTIONNER, de choisir les images sur votre PC.
Fenêtre de dialogue du PC pour choisir les images à envoyer.
Il faut attendre la fin du processus de compression pour télécharger ses images optimisées.
Écran montrant les images originales et optimisées avec les commandes de changement des couleurs et le boutons de téléchargement.
En cliquant au milieu de la vignette de l'image (fait apparaître PARAMÈTRES à la place du pourcentage), il est possible de visualiser et de comparer l'image originale (9,88 Ko) avec celle compressée (3,88 Ko et 119 couleurs). Le cas échéant, vous pouvez modifier le nombre de couleurs utilisées si le résultat ne vous convient pas.
Amélioration possible
L'exemple ci-dessus vous montre une première compression avec 59 % de réduction pour un poids de 3888 octets. Après avoir cliqué au milieu de la miniature, nous lisons 119 ; c'est le nombre de couleurs utilisées pour notre image actuelle.
Mais c'est une image assez simple et
Avec ce genre de graphisme, nous utilisons une règle simple. Si nous désirons garder un lissage propre des bords des formes il faut 16 couleurs dégradées de la couleur de base.
J'ai 4 couleurs : rouge (#ff0000), gris foncé (#333333), gris clair (#888888) et blanc pour le fond (#ffffff).
Le blanc est uniforme il compte pour une couleur utilisée.
Pour le autres je fait donc la multiplication de 3 fois 16 couleurs, ce qui donne 48 et j'ajoute 1 pour le blanc. J'optimise avec les boutons ou le curseur à 49 couleurs (j'ai pris 50 pour arrondir et simplifier) et je clique sur le bouton OK.
Un processus recalcule l'optimisation et j'obtiens ma nouvelle image à 50 couleurs pour un gain de 67 %. le poids de l'images est maintenant de 3147 octets.
Le logo lazone51 en png non optimisé (en 1), version compressée (en 2)
et la version optimisée (en 3).
Voici donc un outils assez simple d'utilisation. Suivez ce lien pour utiliser compresspng (https://compresspng.com/fr/).
Logiciel d'optimisation à installer sur votre ordinateur
Une autre méthode consiste à installer un logiciel dédié à l'optimisation des png.
OptiPNG
OptiPNG est un optimiseur PNG qui « recompresse » les fichiers image dans une taille plus petite, sans perte d'information.
Un atout supplémentaire est que ce programme convertit également les formats externes (BMP, GIF, PNM et TIFF) en PNG optimisé tout en effectuant des vérifications et des corrections d'intégrité PNG.
Attention, c'est un programme qui fonctionne à l'aide de la ligne de commande (windows et linux).
Le logiciel se télécharge ici : https://sourceforge.net/projects/optipng/.
Caesium
Compression d'image jusqu'à 90 % pour Windows
Offrant une interface simple mais efficace avec un aperçu en temps réel, Caesium est capable d'un traitement d'images multiples en même temps. Les utilisateurs avancés trouveront des fonctionnalités supplémentaires, telles que des options de stockage de métadonnées ou la prise en charge de la structure de dossiers.
ImageOptim
ImageOptim est un logiciel pour Mac. Le site propose aussi des liens vers des alternatives pour Windows et Linux.
Écran du logiciel ImageOptim
Lien pour découvrir et téléchargez ImageOptim.
Images au format jpeg
Dès qu'il s'agit de photos au lieu d'illustrations dessinées, il est souvent plus rentable de diffuser l'image au format jpeg (extention .jpg). Mais ce peut-être aussi le cas avec des illustrations complexes ou de grandes tailles (supérieures à 1024 pixels de coté par exemple).
Il faut également optimiser ces images pour l'écran et la navigation web. Nous pourrons utiliser, avec la même démarche que ci-dessus, l'optimiseur en ligne compressjpeg.
Encodage base64
Quand vous avez une image légère ou une icône png qui sert pour l'affichage dans l'onglet de navigation, il peut-être plus judicieux de « l'écrire » dans le code html de votre page web sous forme de « texte ». Ceci est intéressant pour des images simples et si nous avons besoin d'économiser des requêtes et accélérer le chargement du site.
Il faut d'abord optimiser votre image png avec l'outils de compression indiqué ci-dessus.
Vous allez ensuite sur le site base64-image.de.
Vous pouvez y télécharger plusieurs images à la fois d'un maximum de 1 Mo chacune au format JPG, PNG, GIF, WebP, SVG ou BMP.
Le site base64-image.de et son interface simple pour l'envoi de fichiers.
Voici un exemple avec un logo de lazone51 en 180 pixels de côté (peu servir d'icône apple-touch-icon).
Copie d'écran du résultat de l'encodage en base64.
Le code de l'image encodée en base64 pèse 4,20 Ko.
Si votre navigateur le permet, l'image encodée en base64 apparaît ci-dessous.
Voilà à quoi à quoi ressemble l'encodage base64 de l'image png : au départ figure toujours « data:image/png;base64, », ensuite figure une chaîne de caractères qui « représente » l'image.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/
...
TQmxV5mQSMpseHunDt7R3uvd1td6P/tbt3o5/f+9GP0Y7+P
+NNZUfZ7Og2AAAAAElFTkSuQmCC"
Extrait de code de l'image encodée en base64.
Pour implémenter ce code dans le html il faut copier le code dans l'attribut « src » de la balise « img ».
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/
...
TQmxV5mQSMpseHunDt7R3uvd1td6P/tbt3o5/f+9GP0Y7+P
+NNZUfZ7Og2AAAAAElFTkSuQmCC" title="Le titre" alt="Le texte alternatif"/>
Implémentation d'une image base64 dans le html.
Intérêts de l'encodage base64
Même si le code de l'image représente un poids en octets plus élevé que l'image en elle-même nous retirons 2 avantages de l'opération :
- Le code intégré dans la page html sera compressé à la sortie du serveur et pèsera donc 50 % de moins,
- nous gagnons une requête entre le client et le serveur ; le client est donc servi plus rapidement.