Com­pres­ser des images : un impératif pour le Web

Les images com­pres­sées ont un effet positif sur la vitesse de char­ge­ment des sites Web. Comment compresse-t-on des images de manière à ce que la perte de qualité d’image ne soit pas visible ? Quelles pos­si­bi­li­tés sont mises à votre dis­po­si­tion ? Découvrez ici un aperçu de la com­pres­sion d’images.

Pourquoi com­pres­ser des images ?

Les images et photos en haute ré­so­lu­tion sont monnaie courante sur Internet aujourd’hui. Le nombre de pixels des pho­to­gra­phies nu­mé­riques augmente et le volume de ces fichiers également. Il faut faire attention à la taille de vos fichiers, aussi bien pour les envoyer par email que pour les utiliser sur votre site Web. Sans surprise, plus votre fichier est léger et plus sa trans­mis­sion est rapide, ce qui est avan­ta­geux pour deux raisons :

• Un processus de char­ge­ment rapide augmente la sa­tis­fac­tion des visiteurs (en par­ti­cu­lier de ceux disposant d’un accès mobile à Internet).
• Un temps de char­ge­ment rapide a un effet positif sur le ré­fé­ren­ce­ment auprès des moteurs de recherche.

Le bon format d’image sur le Web

Avant d’intégrer des images sur votre site Web, il convient de vérifier leur format. Tous les formats ne sont pas ap­pro­priés sur Internet : en voici cinq à utiliser sans hésiter en fonction de vos besoins.

• JPG/JPEG : le format JPG est l’un des formats nu­mé­riques les plus fréquents. Il peut re­pré­sen­ter jusqu’à 16,7 millions de couleurs et être largement compressé. Toutefois, cette com­pres­sion des fichiers JPG cause la plupart du temps une perte de qualité. Ils sont par­ti­cu­liè­re­ment adaptés à l’en­re­gis­tre­ment de photos ou encore d’il­lus­tra­tions com­pre­nant des photos, notamment celles qui con­tien­nent de nom­breuses couleurs ainsi que de forts con­trastes.
• PNG : le format PNG peut présenter entre 256 (PNG8) et 16,7 millions de couleurs et est également très fré­quem­ment utilisé sur Internet. À l’inverse du format JPG, le format PNG peut être compressé pra­ti­que­ment sans perte de qualité. Les fichiers PNG sont pratiques pour l’en­re­gis­tre­ment d’il­lus­tra­tions, logos ou textes. Les images les moins colorées peuvent être com­pres­sées en une petite fraction de leur version originale comme PNG.
• WebP : le format WebP est un format d’image moderne développé par Google pour permettre une meilleure com­pres­sion avec une qualité d’image élevée. Il prend en charge la com­pres­sion avec et sans perte, ce qui permet de réduire la taille des fichiers par rapport au JPEG et au PNG. Grâce à des al­go­rithmes efficaces tels que l’encodage prédictif, WebP peut com­pres­ser les images jusqu’à 30 % plus petites que JPEG pour une qualité com­pa­rable. De plus, le format supporte la trans­pa­rence (canal alpha) et les ani­ma­tions, ce qui en fait une al­ter­na­tive po­ly­va­lente au PNG et au GIF.
• SVG : le format SVG (Scalable Vector Graphics) est un format d’image basé sur XML et utilisé pour les gra­phiques vec­to­riels. Comme il est basé sur des des­crip­tions ma­thé­ma­tiques de formes et de lignes, la qualité de l’image est conservée in­dé­pen­dam­ment de la mise à l’échelle. Con­trai­re­ment aux formats basés sur les pixels, le SVG peut être fortement réduit avec de simples op­ti­mi­sa­tions de code et une com­pres­sion gzip sans com­pro­mettre la qualité visuelle. Ce format est par­ti­cu­liè­re­ment idéal pour les logos, les icônes et les il­lus­tra­tions Web.
• GIF : les fichiers GIF sont aussi très largement utilisés, même si le nombre de couleurs est limité à 256. Le format GIF permet la création de petites ani­ma­tions grâce à la jux­ta­po­si­tion d’une multitude d’images. Ces ani­ma­tions sont très po­pu­laires sur les réseaux sociaux.

Option 1 : com­pres­ser des images en ligne

Si vous voulez com­pres­ser des photos sans avoir à installer un logiciel spécial, vous pouvez aussi fa­ci­le­ment optimiser vos images en ligne. Pour cela, il existe dif­fé­rentes offres sur le Web qui vous per­met­tent de les com­pres­ser gra­tui­te­ment. Les outils diffèrent gé­né­ra­le­ment par les formats de fichiers dis­po­nibles, les degrés de com­pres­sion possibles et ont souvent des li­mi­ta­tions quant au nombre de com­pres­sions possibles. Découvrez certaines des meil­leures solutions ci-dessous.

Op­ti­mi­zilla

L’outil en ligne Op­ti­mi­zilla de Mediafox Marketing vous permet de té­lé­char­ger et de com­pres­ser jusqu’à 20 images si­mul­ta­né­ment. La condition préalable est que les images soient au format JPEG ou PNG. Pour ce faire, l’ap­pli­ca­tion Web utilise une com­bi­nai­son de dif­fé­rents al­go­rithmes de com­pres­sion, qui se ca­rac­té­ri­sent par un bon rapport entre com­pres­sion et qualité d’image. Vous pouvez utiliser le curseur pour définir le degré de com­pres­sion avant de té­lé­char­ger les résultats in­di­vi­duel­le­ment ou en com­bi­nai­son sous forme de fichier ZIP.

Pour vous aider à trouver les meilleurs réglages possibles, Op­ti­mi­zilla vous soutient avec des vignettes de l’original et de son équi­valent compressé. De plus, l’outil spécifie la taille du fichier respectif. Toutes les images té­lé­char­gées sont au­to­ma­ti­que­ment sup­pri­mées des serveurs du four­nis­seur au bout d’une heure.

TinyPNG

TinyPNG permet, con­trai­re­ment à ce que son nom suggère, non seulement la com­pres­sion des fichiers PNG, mais aussi des fichiers JPEG. Dans la version standard gratuite, vous pouvez optimiser jusqu’à 20 images de ces deux formats si­mul­ta­né­ment, la taille maximale autorisée pour chaque image étant limitée à 5 mé­gaoc­tets.

L’outil Voormedia a un niveau de com­pres­sion prédéfini qui ne peut pas être ajusté, mais réduit la taille de l’image jusqu’à 80 %. Glissez-déposez les photos sou­hai­tées dans la zone affichée, puis té­lé­char­gez les résultats au format JPEG, PNG ou sous forme de fichier ZIP. Vous pouvez également les té­lé­char­ger vers le service de stockage Cloud Dropbox.

iLoveIMG

iLoveIMG est une suite en ligne d’outils de retouche photo pratiques. L’équipe de dé­ve­lop­pe­ment basée à Barcelone fournit des ap­pli­ca­tions avec les­quelles les images peuvent être recadrées, mises à l’échelle, con­ver­ties et même com­pres­sées. Pour cette dernière option, cliquez sur le bouton « Com­pres­ser l’image » et insérez le matériel d’image désiré à l’aide du glisser-déposer ou du na­vi­ga­teur de fichiers. Les formats possibles sont JPEG, PNG, SVG et GIF.

Alors que iLoveIMG n’a qu’un seul mode de com­pres­sion par défaut, l’outil offre plusieurs options d’ex­por­ta­tion dif­fé­rentes : il n’est pas seulement possible de té­lé­char­ger les résultats sur le disque dur local, mais aussi de les té­lé­char­ger sur Google Drive et Dropbox et de trans­fé­rer un lien de té­lé­char­ge­ment vers les images com­pres­sées. Si vous n’êtes pas satisfait du résultat de la com­pres­sion, vous pouvez sim­ple­ment l’effacer en cliquant sur l’icône de la corbeille.

Option 2 : com­pres­ser des images avec Photoshop

Bien entendu, vous pouvez également com­pres­ser vos images avec des pro­grammes de trai­te­ment d’images pro­fes­sion­nels. Photoshop, leader de l’industrie, doit na­tu­rel­le­ment être mentionné. En plus de ses fonctions de con­cep­tion créative et d’op­ti­mi­sa­tion du matériel pho­to­gra­phique, l’outil d’Adobe offre diverses options pour modifier le format d’image et ajuster la taille de l’image. L’option « Sau­ve­gar­der pour le Web », proposée par Adobe pour optimiser les photos et les images des pages d’accueil et autres, est par­ti­cu­liè­re­ment pratique pour les ex­ploi­tants de sites Web. Dans ce mode, non seulement les formats Web GIF, PNG, WebP et JPEG sont dis­po­nibles pour la com­pres­sion, mais aussi le format graphique raster WBMP (Wireless Bitmap), conçu pour les appareils mobiles.

Dès que vous éditez une image en mode op­ti­mi­sa­tion Web Photoshop, une nouvelle fenêtre s’ouvre dans laquelle vous pouvez non seulement définir les formats cibles spécifiés, mais aussi optimiser la photo souhaitée pour votre site Web en termes de pro­fon­deur, de couleur et de taille. Dans la fenêtre de pré­vi­sua­li­sa­tion, l’outil d’Adobe compare l’image originale et l’image cible (y compris les in­for­ma­tions absolues sur la taille du fichier), de sorte que vous pouvez fa­ci­le­ment voir l’impact de chaque étape de com­pres­sion sur la qualité.

Option 3 : com­pres­ser des images avec des logiciels gratuits et des pro­grammes open source

Photoshop montre à quel point il est pratique de com­pres­ser des photos avec des ap­pli­ca­tions de bureau. Celles-ci offrent non seulement beaucoup plus de fonctions par défaut, mais pré­sen­tent également l’avantage, par rapport aux outils Web, de pouvoir être utilisées sans connexion Internet. Pour réduire la taille des images de votre site Web, cependant, il ne doit pas né­ces­sai­re­ment s’agir d’une solution de qualité su­pé­rieure comme l’outil phare d’Adobe ou d’une autre al­ter­na­tive payante. Si vous avez un budget serré ou si vous n’êtes pas intéressé par des fonctions d’édition plus complexes, un logiciel libre ou open source peut vous aider à obtenir des résultats d’op­ti­mi­sa­tion de première classe en termes de photos, d’images, etc. Mais parmi les nombreux outils gratuits, lequel vaut vraiment le coup ?

IrfanView

Depuis 1996, le vi­sua­li­seur d’images IrfanView est l’une des solutions gratuites les plus po­pu­laires pour les PC Windows. Selon le fabricant, les chiffres mensuels de té­lé­char­ge­ment sont en moyenne d’un million. Cela est prin­ci­pa­le­ment dû au modèle de licence attractif de l’outil : l’uti­li­sa­tion privée est to­ta­le­ment gratuite, ce n’est que dans le cas d’une uti­li­sa­tion com­mer­ciale que vous devez acheter une licence pour un modique montant (à payer une seule fois).

Par défaut, le vi­sua­li­seur d’images prend en charge de nombreux formats tels que PNG, JPEG, GIF, BMP, WebP et bien d’autres. Une fois qu’une image est insérée, elle peut être convertie dans ces formats à tout moment. Cependant, lorsqu’il s’agit de com­pres­ser des images spé­ci­fi­que­ment pour le Web, il est re­com­mandé d’utiliser la fonction « En­re­gis­trer pour le Web », qui peut être ajoutée via un plugin. Cette extension vous permet d’optimiser les piles d’images et de photos, tout en utilisant le curseur pour ajuster la qualité de l’image originale. Une image de pré­vi­sua­li­sa­tion et la taille du fichier compressé vous donnent un aperçu du résultat final attendu.

GIMP

En cherchant des al­ter­na­tives Photoshop dans le secteur open source, on tombe iné­vi­ta­ble­ment sur GIMP (GNU Image Ma­ni­pu­la­tion Program). Le programme graphique pour Linux, macOS et Windows, sorti en 1998, est con­vain­cant depuis des années en raison de la variété de ses fonctions, qui rappelle fortement le modèle com­mer­cial d’Adobe. Il supporte main­te­nant plus de trente formats de fichiers, dont les formats WebP, GIF, JPEG et PNG, qui sont es­sen­tiels pour le Web. Vous pouvez donc convertir vos fichiers images dans l’un de ces formats Web à tout moment à l’aide du logiciel GIMP.

En plus de convertir les images dans un format de fichier plus petit, GIMP fournit également des options d’ex­por­ta­tion avancées qui vous per­met­tent de com­pres­ser sim­ple­ment une image. Utilisez le curseur pour régler le degré de com­pres­sion. Les options avancées sont également pratiques : par exemple, si vous activez la propriété « Pro­gres­sive », le résultat est lé­gè­re­ment plus grand, mais les zones in­di­vi­duelles sont chargées dans un certain ordre, de sorte que même après un court temps de char­ge­ment, une vue ap­proxi­ma­tive de l’image entière peut être affichée.

PNG­Gaunt­let

Le logiciel gratuit PNG­Gaunt­let fournit une interface uti­li­sa­teur graphique (en anglais) pour les trois outils open source PNGOUT, OptiPNG et DeflOpt, tous dé­ve­lop­pés pour l’op­ti­mi­sa­tion et la com­pres­sion des images au format PNG. L’ap­pli­ca­tion, qui n’est dis­po­nible que pour Windows, est donc la solution parfaite pour créer de très petits logos, gra­phiques et lettrages au format PNG pour votre projet Web. Outre le PNG lui-même, les formats JPEG, GIF, TIFF et BMP sont également possibles comme formats de sortie pour le processus de com­pres­sion ou de con­ver­sion.

Il y a deux façons de com­pres­ser vos photos avec PNGG­Gaunt­let : vous pouvez accéder à la con­fi­gu­ra­tion standard en insérant une ou plusieurs images et en appuyant sur « Optimiser », ou vous pouvez d’abord sé­lec­tion­ner une con­fi­gu­ra­tion in­di­vi­duelle en ajustant les pa­ra­mètres des trois outils im­plé­men­tés à l’aide du bouton du même nom. Peu importe ce que vous choi­sis­sez, l’outil freeware vous montre la nouvelle taille du fichier image et la taille du fichier sau­ve­gardé par rapport à l’original en pour­cen­tage après une com­pres­sion réussie.

Ima­geOp­tim

Si vous souhaitez com­pres­ser les images et photos de votre site Web et que vous avez besoin d’un outil open source pour macOS, Ima­geOp­tim, développé par Kornel Lesinski, est une bonne solution. Le programme sous licence GPL combine une poignée d’outils d’amé­lio­ra­tion d’image tels que MozJPEG, pngquant et SVGO, per­met­tant non seulement la sup­pres­sion des mé­ta­don­nées EXIF sans im­por­tance, mais aussi la com­pres­sion générale de divers types d’images et de matériel pho­to­gra­phique (JPEG, SVG, GIF, PNG).

Glissez-déposez les fichiers image désirés dans Ima­geOp­tim, après quoi le programme lance im­mé­dia­te­ment la com­pres­sion. Vous pouvez modifier les pa­ra­mètres à tout moment et ajuster le niveau de com­pres­sion ou ajouter ou supprimer des options : pour cela, cliquez sur les trois points. Ensuite, un clic sur « Répéter » suffit pour effectuer à nouveau la con­ver­sion.