La chasse aux octets est ouverte
Vous et moi vivons dans un monde qui va vite, très vite. Régulièrement, les grands pontifes du hightech inondent le marché des technologies avec leurs appareils de plus en plus petits, élégants, chers… et performants (ça fait plein de choses, et ça le fait vite).
Cette surenchère du progrès a des conséquences sur nous: nous devenons impatients, nous voulons avoir accès à un grand nombre d’informations en très peu de temps. Nous vivons à une ère où quelques secondes peuvent faire la différence.
Certes, ce que je dis là est de l’ordre du poncif. Mais si vous possédez un site internet, vous avez tout intérêt à ce que son temps de chargement soit le plus court possible, afin d’éviter de perdre des visiteurs avant même le début de la visite. (Oui, les visiteurs sont cruels, mais je pense que vous-même, en tant qu’internaute, pouvez les comprendre.)
Autrement dit: optimisez votre site, supprimez tout ce qui l’alourdit, et si ce n’est pas possible, allégez le poids des fautifs. Et, ces fautifs, qui sont-ils? Les images, en grande partie, et vous allez en comprendre la raison.
Pourquoi alléger les images, et pas le texte?
Pour commencer, remettons-nous dans le contexte. L’ordinateur fonctionnant sur un système binaire, toute information transitant par lui doit être traduite en une suite de 0 et de 1, les bits. Plus il y a de bits, plus l’information occupe de l’espace de stockage et s’alourdit.
Notre alphabet ne comportant que 26 caractères de base, un texte est par définition léger, car chaque caractère peut se permettre d’être représenté par une chaîne très courte de 0 et de 1: 8 bits, exactement, ce qui constitue une unité à part, l’octet. Cette nouvelle unité, à l’instar du bit, du mètre, du gramme, etc, a sa propre table de conversion:
- 1 000 octets = 1 kilo octet (ko)
- 1 000 ko = 1 méga octet (mo)
- et ainsi de suite jusqu’à épuisement total des préfixes scientifiques.
Essayez maintenant d’imaginer ce système appliqué aux images. De la même manière qu’un texte se fragmente en caractères, une image se fragmente en pixels (px), c’est-à-dire, pour rappel, en petits carrés de couleur. Or, des couleurs, il en existe des millions, il faut des quantités astronomiques de bits pour donner une identité numérique à chacune ! On est bien loin de nos 26 lettres de base qui peuvent tenir sur un octet chacune !
Heureusement, il existe des systèmes de simplification qui utilisent une palette de couleurs réduite, et qui, du coup, permettent de mémoriser les couleurs d’une image avec moins d’informations. Il n’en reste pas moins qu’une image sollicite la plupart du temps bien plus de 26 couleurs, et que, par conséquent, les images pèsent toujours forcément beaucoup plus lourd que du simple texte.
Notre objectif pour aujourd’hui est d’apprendre à retravailler une image de manière à la faire peser moins de 100 ko, ce qui nous permettrait d’obtenir à l’arrivée de belles pages internet rapides à charger, sans pour autant avoir dû verser dans le régime « texte sec ».
Cure d’amaigrissement express: les outils en ligne
Une recherche rapide sur votre moteur de recherche préféré vous apprend qu’il existe des sites se proposant d’optimiser vos images pour vous. La solution paraît alléchante, mais restons prudents.
Il en existe plusieurs: Web Image Resizer, Compressor.io, Reduction-image.com… Prenons par exemple l’outil du site Blue Lagoon, qui a l’avantage de nous présenter un avant-après des informations sur l’image retravaillée tout en conservant une présentation très claire. Je lui ai soumis une photo de qualité professionnelle avec les caractéristiques suivantes:
- poids: 931 ko
- largeur: 1687 px
- hauteur: 1126 px
et à l’arrivée, j’obtiens ceci:
La perte de poids est drastique (24 ko au final…), mais on perd pas mal en qualité, d’autant plus que les nouvelles dimensions ont été imposées.
Ci-dessous: à gauche, photo avant, à droite, photo après.
Plutôt décevant, n’est-ce pas? A la vue de ce résultat (que j’ai d’ailleurs retrouvé avec les tous autres outils en ligne que j’ai testés), vous comprendrez pourquoi j’ai jugé préférable de partir sur une solution qui ne soit pas instantanée, mais qui reste très facile à mettre en place et permet un peu plus de précision: Photofiltre.
(Pour ceux qui seraient définitivement fâchés avec l’informatique, et qui gèrent leur site avec WordPress, une solution personnalisée vous attend à la fin de l’article.)
Prenez les choses en main et obtenez un résultat de qualité avec Photofiltre
Le roi des logiciels de traitement d’image, c’est le célèbre et imposant Photoshop. Si vous en disposez déjà, à vrai dire, cet article ne vous sera probablement pas très utile !
Par contre, si Photoshop n’est pas votre ami (il faut savoir qu’il est d’une part très coûteux et d’autre part pas très simple à prendre en main), sachez que tout n’est pas perdu, bien au contraire.
Il existe en effet un autre logiciel d’édition d’image, plus accessible et totalement gratuit, il s’agit, vous l’aurez déjà compris, de Photofiltre, que vous pouvez télécharger ici si ce n’est pas déjà fait.
Commencez par faire de la place en recadrant votre image
Imaginons que je veuille illustrer un article de blog avec une image de 560 ko. 560, c’est déjà trop, une page Internet mettrait trop de temps à s’afficher avec une telle charge sur les épaules. Commençons par voir si nous ne ne pourrions pas nous débarrasser d’une partie de l’image. Voyons ce que nous avons:
Et voici ce que nous pouvons obtenir, avec pour résultat une perte de près de 20% du poids de la photo originelle:
Etudions ensemble pas à pas la démarche à suivre pour arriver à ce résultat.
Mais ne nous arrêtons pas en si bon chemin: malgré le découpage, l’image est peut-être encore trop grande dans son ensemble, et vous voudrez peut-être la faire rétrécir sans perdre davantage de contenu. Suivez le guide!
Réduisez la taille sans perdre de pixels: le redimensionnement
Avant d’aborder cette étape, il est bon de vous interroger sur ce que vous comptez faire de votre image. En effet, la taille finale que vous allez lui donner dépendra de l’usage auquel elle est destinée et de l’importance qu’elle devra avoir in situ, en contexte.
Il est également utile de tenir compte de la largeur dont vous disposez pour afficher le contenu de votre page: si votre image est plus large que votre bloc de contenu, le design de votre site risque de s’en trouver déformé.
Néanmoins, quelque soit la finalité, je ne saurai que trop vous conseiller d’éviter les extrêmes. Une image qui fait 2000 pixels de côté est trop lourde pour transiter sur internet (publication, envoi par email…), mais ne tombez pas dans l’excès inverse: à quoi vous servirait une photo de la taille d’un ongle?
Il n’y a pas de règle générale, mais gardez toutefois à l’esprit qu’il vaut mieux éviter de dépasser les 700 voire les 800 px de largeur. (En revanche, sentez-vous libre de choisir la hauteur qui vous convient, à partir du moment où le thème de votre site le permet.)
Voici comment il vous faut procéder pour réduire la taille de votre image.
Sans doute vous sera-t-il nécessaire de faire plusieurs essais avant de trouver la taille appropriée. Après l’étape 3, si vous n’êtes pas satisfait, pressez simultanément les touches Ctrl et Z de votre clavier pour annuler la modification de taille, et repartez à l’étape 1.
Par défaut, la case « conserver les proportions » devrait être cochée, mais si ce n’était pas le cas, je vous recommande de le faire avant de toucher à la largeur ou à la hauteur: cela vous permettra d’éviter la déformation de l’image.
Faites « perdre du ventre » à votre image grâce à la compression
Choisissez le bon format d’image
A présent que nous avons passé en revue les options les plus évidentes, intéressons-nous à la nature même de notre image, le format, afin de voir si nous ne pourrions pas en retirer un avantage.
Les images que vous êtes amené à manipuler possèdent, de base, un format défini, mais qui peut être changé à volonté. Vous verrez passer beaucoup d’images ayant l’un de ces trois formats (ou extensions): JPG, PNG. ou GIF.
L’information est facile à obtenir avec Photofiltre, comme vous avez pu le voir sur une précédente capture d’écran. Mais comment choisir entre les trois? Voici un petit récapitulatif des inconvénients et avantages de chacun:
- JPG: C’est sans doute le format d’image le plus utilisé sur Internet, car bien exploité, il permet d’obtenir un bon compromis entre le poids et la qualité. Son gros défaut, c’est qu’il ne gère pas la transparence, néanmoins, comme vous serez sans doute amené à utiliser beaucoup d’images JPG, et qu’il est pleinement adapté à la compression, c’est avec lui que nous poursuivrons notre travail.
- PNG: Ce format est particulièrement axé sur la qualité de la photo, ce qui a pour conséquence de générer des images souvent un peu lourdes. Néanmoins, il gère la transparence, ce qui en fait le format de prédilection pour des éléments graphiques tels que des logos.
- GIF: Comme le GIF ne supporte que 256 couleurs, les images enregistrés dans ce format sont particulièrement légères, mais si elles comportent à la base de nombreuses nuances de couleurs, le résultat sera forcément médiocre. A l’instar du PNG, le GIF gère la transparence. A réserver pour des illustrations, des éléments graphiques, ou des photos en noir et blanc.
A présent que vous y voyez un peu plus clair (du moins je l’espère !), nous allons pouvoir passer aux travaux pratiques. Voyons comment nous pouvons compresser notre image grâce à l’enregistrement au format JPG.
Exploitez le potentiel du format JPG
Arrivé à cette étape, vous constaterez qu’une boîte de dialogue vous demande de choisir un taux de compression. Il s’agit en fait tout simplement d’optimiser le poids de l’image sans (trop) toucher à sa qualité visuelle. Ou, pour le dire autrement, cela consiste, en résumé, à se débarrasser des informations superflues (les pixels dont la suppression ne provoque aucun changement à l’œil nu).
Dans le cas d’une image JPG, le taux de compression idéal avec Photofiltre tourne autour de 80%: pas de dégradation de l’image, mais un affichage plus rapide sur une page internet.
Mais, bien entendu, ce n’est pas une règle immuable! Un taux de compression de 50%, par exemple, pourrait ne pas être très visible sur une première image et être totalement désastreux sur une seconde image.
La seule chose vraiment essentiel à retenir, c’est que plus vous baisserez le pourcentage, plus l’image perdra en qualité. Prenez quelques minutes pour y réfléchir, faites plusieurs essais si besoin est et finalisez la sauvegarde.
Une fois tout ceci fait, vous devriez être en possession d’une image agréable à l’œil, mais avec un poids tournant autour de 100 ko, voire moins. Dans le cas contraire, essayez de baisser un peu plus la qualité de l’image lors de la compression.
Comme promis, un petit bonus pour les utilisateurs de WordPress
Au tout début de l’article, nous avions vu qu’il était possible d’optimiser une image sans passer par un logiciel. Hé bien, sachez que WordPress, en plus d’autoriser le redimensionnement temporaire d’un fichier pour qu’il prenne moins de place sur un article sans perdre ses caractéristiques d’origine, propose également d’alléger vos images, avec un résultat tout de même un peu meilleur à l’œil que les horribles services en ligne.
Sachez simplement que si vous décidez de passer par cette solution, le fichier que vous aurez mis en ligne sera définitivement modifié. Veillez donc à bien conserver une copie de l’original sur votre disque dur lorsque vous faites ce genre de démarche.
Pour commencer, allez dans le panneau d’administration de votre site, et modifiez un article existant ou créez-en un nouveau selon vos besoins.
Cliquez sur le bouton 
qui se trouve juste au-dessus de la barre d’outils, sélectionnez l’onglet 
si vous n’avez pas déjà envoyé votre image sur le serveur, uploadez-la telle quelle et cliquez sur sa miniature dans la bibliothèque de médias (toujours dans la même fenêtre).
Sur la droite, vous devriez avoir quelque chose qui ressemble à ça (au cas où vous vous poseriez encore la question, oui, j’aime les livres):
Cliquez sur le lien modifier l’image. Regardez à nouveau sur la droite, vous avez normalement ceci sous les yeux:
Et là, si vous avez été bien attentif à la lecture de l’article, vous devriez vous dire: bon sang, mais c’est bien sûr ! Je viens d’apprendre à faire ces deux étapes avec Photofiltre ! Et vous auriez raison. Compression mise à part, nous pouvons faire peu ou prou la même chose avec notre ami WordPress.
Pour recadrer, sélectionnez directement sur l’image la partie que vous voulez garder et cliquez sur le bouton recadrer:
Pour redimensionner, indiquez les dimensions souhaitées dans le cadre en haut à droite et cliquez sur 
pour valider les changements.
Vérifiez qu’il y a bien la mention 
qui s’affiche au-dessus de l’image avant de revenir à votre article.
Voilà, j’espère que cet article vous sera utile. N’hésitez pas à vous faire connaitre et à poster des commentaires ci-dessous !
Cet article Alléger une image pour le web est apparu en premier sur Pixeliart.