Optimisation JPEG pour le Web - Guide ultime

La compression d'image se trouve dans tous les formats de média natifs. Cependant, la différence entre les formats GIF, PNG et JPEG est Comment les informations sont compressées et affichées à l'écran. Il y a tellement de conseils pour composer de superbes supports d'image publiés sur le Web, et pourtant, de nombreux concepteurs ne comprennent toujours pas certains principes fondamentaux..

Dans ce guide, j'aimerais partager quelques idées pour une compression JPEG appropriée. Vous souhaitez optimiser vos images afin de réduire les temps de chargement des pages Web tout en maintenant un niveau de qualité satisfaisant. Il s’agit de trouver un équilibre entre la taille des fichiers et la description de l’écran. Il n’ya pas de solution parfaite à suivre pour les concepteurs. Cela prend un peu de pratique initiale, mais une fois que vous avez compris la compression JPEG, le développement de sites Web devient beaucoup plus facile à l'avenir..

Évitez de toujours économiser à 100%

Vous ne devriez presque jamais enregistrer vos images JPEG avec une qualité de 100%. Cette volonté ne pas produire le plus possible “optimisé” image. Il calcule en réalité via une formule de limite d'optimisation qui augmente les tailles de vos fichiers de manière exorbitante. Même en comparaison avec une qualité de 90% ou 95%, vous constaterez une baisse significative de la taille du fichier..

La plupart du temps, il vous sera recommandé d'enregistrer des images de qualité inférieure à 90%. Si vous ouvrez la boîte de dialogue Enregistrer pour le Web dans Photoshop, vous remarquerez qu’elles offrent des valeurs prédéfinies parmi lesquelles vous pouvez choisir. J'ai ajouté les valeurs JPEG possibles ci-dessous - remarquez les conventions de dénomination inhérentes.

Faible - dix%
Moyen - 30%
Haute - 60%
Très haut - 80%
Maximum - 100%

Même dans Adobe Photoshop, une qualité d'image de 60% est considérée comme "élevée". De nombreux développeurs Web se porteront garants entre 50% et 70%, ce qui est une fourchette sûre..

Combien bas est trop bas?

Les valeurs que vous choisissez pour l'optimisation dépendent entièrement du projet. Vous devrez déterminer quels types de graphiques produiront les fichiers les plus volumineux - ce sont ceux qui ont vraiment besoin de compression..

Je dirais qu'en dessous de 30%, vous coupez vraiment la qualité d'image fondamentale. Les autres designers jureront 50% comme un “limite” pour diminuer la valeur optimale. Mais le meilleur conseil ici est d'essayer différents réglages et de voir ce qui vous convient le mieux! Vous ne pouvez pas vous tromper avec quelques études de test optimisant les images JPEG pour le Web.

Options de compression

Nous devrions d’abord clarifier les deux termes «compression» et «qualité», qui sont inverses. Cela signifie que si vous enregistrez un fichier JPEG avec une compression de 40%, vous obtiendrez une qualité de 60% (comparé à une qualité maximale de 100% sans compression)..

Ce sont les options les plus élémentaires à utiliser - et elles devraient suffire lors de l’épargne pour le Web. Les utilisateurs généraux n'entrent pas dans des personnalisations beaucoup plus profondes. Le sous-échantillonnage engendre des problèmes plus complexes dans lesquels vous convertissez des images RVB en YCbCr (Luminance, Chroma Blue, Chroma Red)..

(Source de l'image: Kara Monroe)

le luminance ou le réglage de la luminosité est toujours maintenu à la valeur la plus élevée possible en compression JPEG. Avec cette valeur de luminosité sur un canal séparé, il est plus facile d'optimiser les valeurs de couleur individuelles du rouge et du bleu. Ceci est également connu comme sous-échantillonnage de la chrominance. Les concepteurs intéressés à se salir les mains adoreront en savoir plus sur cet algorithme de compression. Découvrez ce superbe article de blog sur l'échantillonnage en chrominance spécifiquement axé sur les images JPEG.

(Source de l'image: Derek Hatfield)

Remarque intéressante, Adobe Photoshop n’utilise pas toujours le sous-échantillonnage pour la compression. Toutes les images enregistrées via le “Enregistrer pour le Web” la boîte de dialogue utilisera uniquement le sous-échantillonnage de la chrominance en dessous d'une valeur de qualité de 50%.

Différents médias Web

Le Web regorge également de différents types de supports d’image. Vous pouvez avoir des photos, des icônes, des boutons, des badges et des tonnes d'autres graphiques. Mais il est à noter que comparer la qualité entre un bouton et une photo n'a aucun sens.

Lorsque vous utilisez des photographies ou des images détaillées, envisagez de créer un lien vers un fichier JPEG séparé moins compressé. Vous pouvez ensuite configurer des vignettes sur votre site avec un taux de compression plus élevé et des fichiers beaucoup plus petits. Le seul inconvénient est que vous devrez fournir deux ensembles d'images pour une médiathèque. Observez les nombreux graphiques différents que vous avez cousus sur un site Web et envisagez des techniques d'optimisation pour chaque site individuellement..

Planification d'un modèle graphique

Vous voulez avoir un système de fichiers organisé assez facile à explorer. Certains webmasters choisiront d'héberger leurs photos ailleurs sur le Web, tels que Flickr ou Picasa. Cependant, vous souhaiterez toujours utiliser un outil de compression pour réduire la taille des images, mais la façon dont vous les affichez sur votre site varie. Cela est particulièrement vrai avec la montée en puissance des appareils mobiles avec accès à Internet.

J'ai trouvé un article intéressant sur l'encodage JavaScript JPEG qui se produirait dans votre code frontal. Les galeries d’images de haute qualité n’offrent guère d’avantages, mais elles peuvent réduire les temps de chargement des visiteurs mobiles. Ce serait également une technique utile pour lier à chaud des images ou recadrer les vignettes de manière dynamique..

Yahoo! est un autre outil intéressant à découvrir. Smush.it. C'est une application Web basée sur un navigateur où vous pouvez télécharger une image et Smush.it supprimera tous les octets supplémentaires inutiles pour optimiser la taille du fichier. C'est 100% sans perte, ce qui signifie que la qualité de l'image ne se dégradera pas du tout. Et mieux encore, vous pouvez télécharger par lots des images à partir d'URL directes si vous les hébergez sur votre site Web ou sur un serveur tiers..

Outils supplémentaires

Il y a beaucoup de logiciels à essayer en ce qui concerne la manipulation d'images. Tous les octets supplémentaires que vous pouvez supprimer de la taille de chaque fichier sont cruciaux. Il n'y a pas beaucoup de logiciels sur le marché, mais les options disponibles sont étonnantes..

IrfanView

Ce logiciel gratuit pour Windows vous permet de visualiser et d’optimiser n’importe quel ensemble de grandes images. J'aime particulièrement ce logiciel car il prend en charge la conversion par lots à partir d'images de plusieurs répertoires. Vous pouvez appliquer les mêmes fonctions sur des centaines d’images JPEG automatiquement.

Ce qui est encore mieux, c’est le support des plugins par des développeurs tiers. RIOT (Radical Image Optimization Tool) en est un exemple. Ce plugin fonctionne pour d'autres éditeurs graphiques open source similaires tels que GIMP. Il offre une vue double-image où vous pouvez ajuster manuellement les paramètres de compression pour chacune de vos images..

Le support logiciel est merveilleux et les fonctionnalités de RIOT sont très faciles à utiliser. Outre la compression d'image, vous avez également la possibilité de supprimer des métadonnées supplémentaires telles que EXIF et Adobe XMP. Ces bits de données supplémentaires ne peuvent que s’ajouter à la taille totale de votre fichier et sont rarement nécessaires..

ImageOptim pour Mac

Si vous utilisez OS X et avez besoin d'une application de compression puissante, ne cherchez plus. ImageOptim est un puissant outil pour compresser des images sur le Web, parfois même mieux que Photoshop..

L’ensemble de l’application prend en charge la fonctionnalité glisser-déposer, ce qui facilite l’optimisation de grands ensembles d’images. De même, vous pouvez exécuter des commandes directement à partir du terminal et configurer des scripts shell. Consultez la page de code de Google pour plus d'informations et pour l'assistance technique..

Il y a eu quelques problèmes mineurs avec la dernière version 1.3.3 stable dans le rendu des images JPEG pixellisées dans Opera. Essayez de vérifier toutes vos images optimisées dans les 4 principaux navigateurs - Chrome, Safari, Firefox et Opera (et peut-être IE). Si quelque chose semble asymétrique, vous pouvez essayer de télécharger ImageOptim 1.3.0 qui convertit un peu plus propre.

Ressources utiles

JPEG 101: Un cours intensif sur JPEG
Paramètres de compression appropriés pour enregistrer des images JPG pour WordPress
Techniques d'optimisation JPEG intelligentes
Comment optimiser les images JPEG pour les sites Web
Tout ce que vous devez savoir sur la compression d'images

Conclusion

La compression JPEG est délicate car vous devez trouver le bon équilibre entre qualité et substance. Alors que la vitesse de nos connexions Internet modernes augmente, il reste nécessaire de réduire la taille des pages Web. De nouveaux frameworks tels que jQuery et Typekit peuvent s’alimenter sur des centaines de kilo-octets supplémentaires, même sur une conception bien optimisée.

Je dois encore recommander Adobe Photoshop comme premier logiciel de retouche d'image. Il existe d’autres exemples susceptibles d’être mieux adaptés au processus d’optimisation JPEG. Mais les concepteurs Web peuvent se débrouiller avec des solutions Open Source encore moins connues. Si vous avez des astuces ou des idées similaires sur la compression JPEG, veuillez les partager dans l'espace de discussion ci-dessous..