JPEG est le type d'image le plus utilisé sur le Web, et à juste titre: depuis des décennies, JPEG est presque invariablement le choix idéal pour encoder des photos. Le cas d'utilisation est clairement visible dans le nom: JPEG signifie "Joint Photographic Experts Group", le comité chargé de publier la première norme en 1992. Vous verrez l'extension de fichier d'un JPEG soit .jpg, soit .jpeg, bien que cette dernière soit rare dans l'usage moderne.
Bien que la compression sans perte compresse passivement les données d'image de la meilleure façon possible, la compression avec pertes de JPEG recherche des opportunités d'améliorer l'efficacité de la compression avec de minuscules modifications, souvent imperceptibles des données d'image. Le format JPEG encode les données d'image sous la forme de blocs de pixels de 8 x 8 et décrit les blocs (et non les pixels individuels qu'ils contiennent) de manière logique.
Cela peut ressembler à une distinction académique sur papier : « GIF utilise une grille composée de pixels, tandis que JPEG utilise une grille composée de petites grilles de pixels. » En pratique, cette utilisation de blocs plutôt que de pixels signifie que le format JPEG est bien adapté à un cas d'utilisation beaucoup plus courant pour les images: le type de dégradés superposés subtils qui constituent une photo du monde réel.
La description, même d'un dégradé simple à un seul pixel, à l'aide d'un encodage de style GIF serait extrêmement complexe:
La première ligne, les colonnes un à neuf sont #00CC00. La première ligne, la colonne dix est #00BB00. La première ligne, la colonne onze est #00AA00. La première ligne, la colonne douze, est le numéro 009900. La première ligne, la colonne treize est le numéro 008800. La première ligne, la colonne quatorze est le #007700. La première ligne, la colonne quinze est #006600. La première ligne, la colonne seize est #005500.
Il est beaucoup plus efficace de décrire un gradient à l'aide d'un encodage de style JPEG:
Le bloc 1 est #00CC00. Le bloc 2 est un dégradé compris entre #00CC00 et #005500.
Ce qui est encore plus important, c'est la quantification du niveau de détail "haute fréquence" d'une image, souvent de manière imperceptible. Par conséquent, enregistrer une image au format JPEG implique généralement de réduire la qualité de cette image d'une manière mesurable, mais pas nécessairement visible. Comme vous l'avez appris, la quantification de palettes de style GIF est une opération relativement simple: réduire le nombre de couleurs dans une image permet d'obtenir des fichiers plus petits, mais d'une manière facile à repérer à l'œil humain.
JPEG, en revanche, est astucieux quant à la manière dont la quantification est effectuée: la compression avec pertes de JPEG tente de quantifier une source d'image d'une manière qui correspond globalement à la façon dont nos propres systèmes psycho-visuels quantifient le monde qui nous entoure. En effet, le format JPEG tente de masquer des détails que nous n'avions pas remarqués au départ, afin d'effectuer une compression supplémentaire au-delà de nous.
Le système psychovisuel humain est très efficace pour "compresser" les images que vous prenez en permanence. Lorsque je jette un coup d'œil à l'extérieur de mon petit jardin, je peux immédiatement traiter une énorme quantité d'informations: par exemple, des fleurs colorées individuelles ressortent. J'enregistre tout de suite que le sol est d'un gris poussiéreux et que les feuilles tombent. Mes plantes ont besoin d'eau. Ce que je vois, mais que je ne traite pas complètement, sont la forme, la taille, l'angle et la nuance de vert exacts de chaque feuille. Je peux bien sûr rechercher activement ce niveau de détail, mais ce serait tout simplement trop d'informations à absorber passivement, sans véritable avantage. Mon système psychovisuelle procède donc à une petite quantification, en distillant ces informations jusqu'à ce que « les feuilles tombent ».
En effet, JPEG fonctionne de la même manière. La compression avec pertes du JPEG réduit le niveau de détail d'une image d'une manière qui ne serait peut-être pas enregistrée du tout dans nos systèmes psychovisuels naturellement "avec pertes", si cela est raisonnable, et offre beaucoup plus d'opportunités d'économies de bande passante que la compression sans perte seule.
Par exemple, le format JPEG tire parti de l'une de nos principales faiblesses psychovisuelles: nos yeux sont plus sensibles aux différences de luminosité que aux différences de teinte. Avant d'appliquer toute compression, le format JPEG utilise un processus appelé "transformation du cosinus discret" pour diviser l'image en fréquences distinctes ("couches", en quelque sorte) représentant la luminance (luminance) et la chrominance (couleur), ou encore "luma" et "chroma".
La couche de luma est très peu compressée et ne supprime que les petits détails que l'œil humain ne perçoit probablement pas.
Les couches de chrominance sont considérablement réduites. Plutôt que de simplement quantifier la palette des couches de chrominance comme GIF, JPEG peut effectuer un processus appelé "sous-échantillonnage" dans lequel une couche de chrominance est stockée à une résolution inférieure. Lorsqu'elles sont recombinées en étirant efficacement les couches de chrominance de résolution inférieure sur la couche de luma, la différence est souvent imperceptible. De légères différences de teinte peuvent être visibles si nous comparons la source de l'image d'origine et notre JPEG côte à côte, mais uniquement lorsque nous savons exactement ce qu'il faut rechercher.
Cela dit, JPEG n’est pas parfait. Aussi astucieux que le JPEG consiste à commettre des passages de compression furieux, il peut devenir évident s'il est trop loin. En fait, si vous avez passé beaucoup de temps sur le Web, en particulier ces derniers jours, vous avez peut-être remarqué que la compression JPEG était trop poussée:
Une compression trop agressive des données d'image entraîne une réduction du niveau de détail que nos systèmes psycho-visuels ignorent naturellement. L'illusion est donc brisée. Il devient évident qu'il manque des détails. Étant donné que le format JPEG fonctionne en blocs, les coutures entre ces blocs peuvent commencer à apparaître.
JPEG progressif
Le format JPEG progressif (PJPEG) réorganise efficacement le processus de rendu d'un JPEG. Les fichiers JPEG de référence sont affichés de haut en bas à mesure que le transfert progresse, tandis que le format JPEG progressif divise le rendu en un ensemble de "analyses" en taille réelle (également effectuées de haut en bas), chaque analyse augmentant la qualité de l'image. L'image entière apparaît immédiatement, bien qu'elle soit floue, et s'améliore à mesure que le transfert se poursuit.
Cela semble être une différence strictement technique sur le papier, mais il y a un énorme avantage perceptuel: en fournissant immédiatement une version en taille réelle de l'image au lieu d'un espace vide, le PJPEG semble plus rapide qu'un JPEG de référence pour l'utilisateur final. En outre, à l'exception des plus petites images, l'encodage d'une image au format PJPEG se traduit presque toujours par une taille de fichier inférieure à celle d'un fichier JPEG de référence. Ce n'est pas beaucoup, mais chaque octet aide.
Il existe toutefois un petit compromis: le décodage de PJPEG est plus complexe côté client, ce qui implique une charge légèrement plus chargée sur le navigateur et sur le matériel de l'appareil lors du rendu. Cette surcharge de rendu est difficile à quantifier en termes exacts, mais elle est très mineure et peu susceptible d'être perceptible, sauf avec des appareils très sous-alimentations. Il s'agit d'un compromis qui vaut la peine d'être fait. En d'autres termes, l'approche progressive est une approche par défaut raisonnable lors de l'encodage d'une image au format JPEG.
Utiliser JPEG
Vous pourriez vous sentir un peu dépassé par toutes ces informations. Cependant, il y a de bonnes nouvelles pour votre travail quotidien: les spécificités plus techniques de la compression JPEG sont supprimées, et affichées sous la forme d'un seul paramètre de "qualité" : un entier compris entre 0 et 100. 0 fournit la plus petite taille de fichier possible et, comme vous pouvez vous en attendre, la pire qualité visuelle. Lorsque vous passez de 0 à 100, la qualité et la taille des fichiers augmentent. Ce paramètre est subjectif, bien sûr : tous les outils n'interpréteront pas la valeur 75 de la même manière, et la qualité perceptuelle varie toujours en fonction du contenu de l'image.
Pour comprendre le fonctionnement de ce paramètre de compression, utilisons un outil Web courant d'optimisation des fichiers image: Squoosh.
Géré par l'équipe Chrome, Squoosh propose une comparaison côte à côte entre différentes méthodes d'encodage et de configuration des sorties d'image, avec des options de configuration allant d'un curseur "Qualité" globale de 0 à 100, et la possibilité d'ajuster les détails de la chrominance et du rééchantillonnage de la luminance. Plus le nombre de "qualité" est faible, plus la compression est élevée et plus le fichier obtenu est petit.
Ici, avec la "qualité" définie sur 60, la taille du fichier est réduite de 79%. Ne vous laissez pas avoir par les implications de cette étiquette: les différences de qualité sur la majeure partie de l'échelle seront imperceptibles à l'œil humain, même lors d'une comparaison côte à côte.
Pour convertir votre image source en fichier JPEG progressif, cochez la case "Affichage progressif" sous "Options avancées". Certaines de ces options de configuration sont presque certainement plus détaillées que ce qu'un projet Web moyen ne nécessite, mais elles peuvent vous permettre d'examiner de plus près l'impact de ce que vous avez appris sur l'encodage JPEG sur la taille et la qualité des fichiers dans des cas d'utilisation réels.
Dans la pratique, il n'y a pas grand-chose à faire, malgré la complexité de l'utilisation du format JPEG en interne. Squoosh n'est qu'une des nombreuses méthodes d'enregistrement de JPEG optimisés, qui utilisent toutes une méthode similaire pour déterminer le niveau de compression: un seul entier compris entre 0 et 100.
Déterminer le niveau de compression idéal pour vos images est un jeu d'enfant, étant donné que toute la complexité de l'encodage JPEG est réduite à un seul entier, en particulier lorsqu'une grande partie repose sur le contenu d'une image. Comme pour le clignotement ou la respiration, tenir compte des paramètres de compression JPEG modifie la façon dont nous les percevons.
Avec le recul, après avoir écrit tout cela, mon traitement psychovisuel est devenu plus manuel. maintenant, je regarde les individus qui s'en va, même si, pour ainsi dire, la photo n'a pas changé. La configuration de la compression JPEG est donc un peu difficile: vous savez exactement quels types de défauts visuels rechercher. En pensant d'abord à la compression de l'image, vous vous concentrez sur des feuilles individuelles. Nous sommes habitués à repérer un léger floutage et un artefact de compression occasionnel. Plus vous recherchez les artefacts lors de l'ajustement de vos paramètres de compression JPEG, plus vous avez de chances de les trouver, alors qu'un utilisateur ne le ferait probablement pas. Même s'il savait exactement quoi rechercher, il est peu probable qu'il visite une page avec une compression JPEG.
Pour cette raison, évitez de pousser l'instinct à améliorer une image à la recherche d'artefacts, ou même regardez de trop près les parties de nos images où vous savez que les artefacts apparaîtront en premier. Pour les utilisateurs, de légers artefacts se fondent dans les minuscules détails que leurs systèmes psycho-visuels avec pertes font généralement oublier. En fait, même si vous comprenez les astuces que JPEG essaie de jouer, vous ne remarquerez pas ces mêmes artefacts en naviguant sur le Web, sauf si vous les recherchez. Pour cette raison, il est presque toujours possible de définir un niveau de compression JPEG légèrement inférieur à ce que vous pensez, en particulier lorsque l'image est affichée plus petite que sa taille intrinsèque en raison du style direct ou des contraintes définies par la mise en page environnante.