Aujourd'hui, nous allons parler d'un sujet qui me tient à cœur, la compression d'image ! Je plaisante à moitié, mais il y a quelque chose d'étrangement satisfaisant à réduire d'énormes pourcentages la taille d'un fichier image sans diminuer la qualité.

L'inspiration pour cet article est venue d'un article très populaire dans le groupe Facebook Beaver Builders. Je venais de filmer un didacticiel vidéo sur l'activation et l'utilisation du nouvel algorithme Guetzli de Google dans ImageOptim et j'ai été choqué par toutes les autres options que je ne connaissais pas auparavant. Dans cet article, nous allons parler de quelques astuces et outils pour compresser des images pour le Web.

Terminologie initiale

Avant d’aller plus loin, établissons une terminologie commune.

JPEG, PNG, SVG – Ce sont les trois types de fichiers image les plus populaires sur le Web. Pour ce didacticiel, nous allons principalement nous concentrer sur les fichiers JPEG et PNG, car ce sont eux qui bénéficient le plus de la compression et de l'optimisation.

Les fichiers JPEG sont généralement meilleurs pour les images haute fidélité telles que les photos et les graphiques Web dépourvus de transparence.

Les fichiers PNG sont parfaits pour des choses comme les icônes et les logos ou tout ce qui nécessite de la transparence. Les fichiers PNG peuvent également être considérablement optimisés après leur sortie de Photoshop ou de l'outil d'édition graphique de votre choix.

Sans perte et avec perte – Ce sont des méthodes de compression. La compression sans perte signifie que votre image ne perdra aucune qualité. Littéralement aucun. Cela implique de supprimer les métadonnées de l'image ou tout ce qui n'affecte pas la qualité.

Avec perte signifie que l’algorithme de compression réduira la qualité de votre image. Vous obtiendrez de meilleurs résultats de compression mais vous sacrifierez la qualité de l'image. La plupart des outils de compression avec perte fournissent un curseur de pourcentage afin que vous puissiez choisir l'équilibre entre la qualité et la taille du fichier.

Astuce : pour les arrière-plans d'images de grande taille, je floute souvent un peu l'image ou j'ajoute un calque de couleur opaque sur la photo. Réduire les détails et/ou normaliser la couleur est un bon choix de style esthétique qui réduit considérablement la taille du fichier. Vous pouvez voir cela en action sur notre page d’emplois.

Combien dois-je compresser les images ?

L’objectif de la compression d’image est de réduire autant que possible la taille du fichier sans trop sacrifier la qualité. Il s’agit autant d’un art que d’une science et le niveau de « qualité acceptable » variera en fonction de la situation.

Un studio de photographie souhaitera probablement mettre en valeur son travail avec la plus haute qualité, tandis qu'un site Web immobilier sera peut-être prêt à sacrifier la qualité en échange de l'affichage de plus d'images sur la page.

La plupart des logiciels de retouche d'images vous permettent d'exporter des images de qualité variable. Cependant, si vous utilisez un outil de compression d'image dédié, il est parfois préférable de fournir à ce logiciel la meilleure qualité possible et de laisser ses algorithmes de compression fonctionner à partir de là.

Options des outils de compression d'images

Comme je l'ai découvert récemment, les options ne manquent pas en matière d'outils et de services de compression d'images.

ImageOptim

J'ai commencé avec ImageOptim et je le préfère toujours. ImageOptim n'est disponible que sur OSX, mais il prend en charge la compression avec et sans perte pour les fichiers JPEG et PNG. Il peut également être configuré pour utiliser l'algorithme de compression relativement nouveau de Google, Guetzli. Guetzli, en moyenne, peut réduire la taille des fichiers de 20 à 30 % de plus que les autres algorithmes.

ImageOptim est un programme qui se trouve dans le Dock de votre Mac et vous pouvez simplement glisser et déposer des images sur l'icône du programme et il les compressera. J'ai tendance à optimiser une ou deux images à la fois, donc cette solution fonctionne très bien pour moi. Mais si vous travaillez sur un grand nombre d’images ou sur des images avec des fichiers de grande taille, certaines des autres options pourraient être un meilleur choix pour les gros travaux.

Smush de WPMU Dev

Smush est un plugin WordPress gratuit de WPMU Dev qui peut être configuré pour optimiser les images existantes dans votre installation WordPress et/ou lorsque vous les téléchargez sur WordPress. Smush est génial car le gros du travail est effectué par les serveurs de WPMU Dev et ils optimisent et redimensionnent tous deux les images.

Si vous créez des sites Web pour des clients, en particulier ceux qui aiment télécharger des images de plusieurs mégaoctets directement depuis leur appareil photo numérique, Smush est une excellente option à configurer et à oublier.

MinusculePNG

TinyPNG est un compresseur d'images basé sur le Web. Vous pouvez télécharger vos images (jusqu'à 5 bm) et télécharger la version compressée. Cela utilisera de la bande passante, ce n'est donc peut-être pas la meilleure option si vous utilisez une connexion Internet lente ou payante. Il prend en charge les types de fichiers JPEG et PNG. C'est gratuit. Il ne semble offrir aucun contrôle sur le niveau de qualité de la compression.

Après avoir joué avec TinyPNG, je pense que je préfère toujours ImageOptim, mais ce serait une excellente option pour les utilisateurs Windows, les tâches ponctuelles rapides ou les utilisateurs qui recherchent spécifiquement un compresseur Web. Ou, si vous essayez de décharger le traitement vers le cloud plutôt que sur votre machine locale.

Imaginer

Imagify est une autre option SASS basée sur le Web qui fournit un plugin WordPress dédié pour optimiser et redimensionner les images lorsque vous les téléchargez ou directement depuis la zone d'administration de WordPress. Le plugin Imagify WordPress bénéficie d'une impressionnante évaluation moyenne de 4,5 étoiles et de nombreuses critiques notent que la qualité d'image obtenue avec Imagify est meilleure que celle des alternatives.

Imagify propose un forfait gratuit qui vous permet de télécharger et d'optimiser des images de moins de 2 Mo. La version optimisée des images restera disponible en téléchargement depuis leurs serveurs pendant 24 heures.

JPEGMini

JPEGMini est un service SASS qui devrait plaire aux personnes à la recherche d'une solution performante. Imaginez que vous soyez chargé d'optimiser des dizaines de milliers d'images de produits haute résolution pour une boutique de commerce électronique. JPEGMini vous permettrait de décharger tout ce traitement sur leurs serveurs cloud, vraisemblablement rapides et optimisés.

Pixel court

ShortPixel est un autre SASS basé sur le Web. Si vous souhaitez transférer la compression d'images sur un serveur cloud, c'est une excellente option à découvrir. Leur forfait gratuit vous permet d'optimiser jusqu'à 100 images par mois et ils proposent des forfaits premium à partir de 5 $/mois pour plus. ShortPixel dispose également d'un plugin WordPress et ils sont les favoris du reste de l'équipe BB.

Imaginer

Quel est votre préféré ?

Si vous visitez le fil Facebook original qui a inspiré cet article, vous verrez plusieurs autres options et des personnes qui préfèrent l'une ou l'autre pour diverses raisons. Est-ce qu'il nous manque votre favori ? Dites-nous ce que c'est et pourquoi vous l'aimez dans les commentaires.

De plus, si vous êtes du genre à manger, dormir et respirer la performance, cette interview de Jon Brown sur les meilleures pratiques modernes en matière de performance vous séduira probablement.