Chez Google, nous recherchons en permanence des moyens d'accélérer le chargement des pages Web. Pour cela, vous pouvez réduire la taille des images Web. Les images représentent jusqu'à 60 à 65 % des octets sur la plupart des pages Web, et la taille des pages est un facteur important dans le temps total d'affichage. La taille des pages est particulièrement importante pour les appareils mobiles, où des images plus petites permettent d'économiser à la fois la bande passante et l'autonomie de la batterie.
WebP est un nouveau format d'image développé par Google et compatible avec Chrome, Opera et Android. Il est optimisé pour permettre l'affichage d'images plus rapides et plus petites sur le Web. Les images WebP sont environ 30% plus petites que les images PNG et JPEG avec une qualité visuelle équivalente. En outre, le format d'image WebP offre des fonctionnalités identiques à celles d'autres formats. Les options compatibles sont les suivantes :
Compression avec pertes:la compression avec pertes est basée sur l'encodage des images clés VP8. VP8 est un format de compression vidéo créé par On2 Technologies pour succéder aux formats VP6 et VP7.
Compression sans perte:ce format de compression sans perte est développé par l'équipe WebP.
Transparence:le canal alpha 8 bits est utile pour les images graphiques. Le canal alpha peut être utilisé avec le RVB avec pertes, une fonctionnalité qui n'est actuellement disponible dans aucun autre format.
Animation:elle accepte les images animées en couleur réelle.
Métadonnées:il peut contenir des métadonnées EXIF et XMP (utilisées par les appareils photo, par exemple).
Profil de couleur:il peut intégrer un profil ICC.
En raison d'une meilleure compression des images et de la prise en charge de toutes ces fonctionnalités, WebP peut être un excellent remplacement pour la plupart des formats d'image: PNG, JPEG ou GIF. Mieux encore, saviez-vous que WebP offre de nouvelles opportunités d'optimisation des images, telles que la prise en charge des images avec pertes avec transparence ? Oui. WebP est le couteau suisse des formats d'image.
Comment cette magie opère-t-elle ? Retrouvons-nous les manches et découvrons les dessous.
WebP avec pertes
La compression avec pertes de WebP utilise la même méthodologie que le format VP8 pour prédire les images (vidéo). VP8 est basé sur la prédiction de bloc et, comme tout codec basé sur les blocs, VP8 divise la trame en segments plus petits appelés macroblocs.
Dans chaque macrobloc, l'encodeur peut prédire les informations de mouvement et de couleur redondantes en fonction des blocs traités précédemment. Le cadre de l'image est "clé" dans le sens où il n'utilise que les pixels déjà décodés dans le quartier spatial immédiat de chacun des macroblocs et tente de remplir la partie inconnue de ceux-ci. C'est ce qu'on appelle le codage prédictif (consultez la section Codage intra-image de la vidéo VP8).
Les données redondantes peuvent ensuite être soustraites du bloc, ce qui se traduit par une compression plus efficace. Il ne nous reste qu'une petite différence, appelée résiduel, à transmettre sous forme compressée.
Après avoir été soumis à une transformation mathématiquement inversible (la célèbre DCT, qui signifie "Discrete Cosine Transform"), les résidus contiennent généralement de nombreuses valeurs nulles, qui peuvent être compressées beaucoup plus efficacement. Le résultat est ensuite quantifié et codé entropie. Fait intéressant, l'étape de quantification est la seule où les bits sont supprimés avec pertes (recherchez la division par QPj dans le diagramme ci-dessous). Toutes les autres étapes sont inversibles et sans perte.
Le schéma suivant illustre les étapes de la compression avec pertes WebP. Les caractéristiques qui font la différence par rapport à JPEG sont entourées en rouge.
WebP utilise la quantification de blocs et distribue les bits de manière adaptative entre différents segments d'image: moins de bits pour les segments à entropie faible et plus élevés pour les segments à entropie supérieure. WebP utilise l'encodage d'entropie arithmétique, offrant une meilleure compression que l'encodage de Huffman utilisé dans JPEG.
Modes intra-prédiction VP8
Les modes d'intraprédiction VP8 sont utilisés avec trois types de macroblocs:
- 4x4 luma
- Luma 16x16
- Chrominance 8x8
Quatre modes courants d'intraprédiction sont partagés par ces macro-blocs:
H_PRED (prédiction horizontale). remplit chaque colonne du bloc avec une copie de la colonne de gauche, L.
V_PRED (prédiction verticale). Remplit chaque ligne du bloc avec une copie de la ligne A ci-dessus.
DC_PRED (prédiction DC). Remplis le bloc avec une valeur unique en utilisant la moyenne des pixels de la ligne au-dessus de A et de la colonne à gauche de L.
TM_PRED (prédiction TrueMotion). Mode qui tire son nom d'une technique de compression développée par On2 Technologies. Outre les lignes A et L, TM_PRED utilise le pixel P au-dessus et à gauche du bloc. Les différences horizontales entre les pixels de A (en partant de P) sont propagées à l'aide des pixels de L au début de chaque ligne.
Le schéma ci-dessous illustre les différents modes de prédiction utilisés dans la compression avec pertes WebP.
Pour les blocs de luma 4x4, il existe six modes intra supplémentaires semblables à V_PRED et H_PRED, mais qui correspondent à la prédiction des pixels dans des directions différentes. Pour en savoir plus sur ces modes, consultez le guide Bitstream VP8.
Quantification de blocs adaptative
Pour améliorer la qualité d'une image, celle-ci est segmentée en zones présentant des caractéristiques visiblement similaires. Pour chacun de ces segments, les paramètres de compression (étapes de quantification, intensité de filtrage, etc.) sont réglés indépendamment. Cela permet une compression efficace en redistribuant les bits là où ils sont les plus utiles. Le format VP8 autorise un maximum de quatre segments (ce qui correspond à une limitation du flux de bits VP8).
Pourquoi le format WebP (avec pertes) est-il préférable à JPEG ?
Le codage de prédiction est l'une des principales raisons pour lesquelles WebP prévaut sur JPEG. La quantification adaptative en bloc fait également une grande différence. Le filtrage fonctionne à moyen/bas débit. L'encodage arithmétique booléen offre des gains de compression de 5 à 10 % par rapport à l'encodage de Huffman.
WebP sans perte
L'encodage WebP sans perte repose sur la transformation de l'image à l'aide de plusieurs techniques différentes. Ensuite, le codage entropie est effectué sur les paramètres de transformation et les données d'image transformées. Les transformations appliquées à l'image incluent la prédiction spatiale des pixels, la transformation de l'espace colorimétrique, l'utilisation de palettes émergentes localement, l'intégration de plusieurs pixels en un seul pixel, ainsi que le remplacement alpha. Pour le codage entropie, nous utilisons une variante du codage LZ77-Huffman, qui utilise un encodage 2D des valeurs de distance et des valeurs creuses compactes.
Transformation Predictor (Spatial)
La prédiction spatiale est utilisée pour réduire l'entropie en exploitant le fait que les pixels voisins sont souvent corrélés. Dans la transformation du prédicteur, la valeur de pixel actuelle est prédite à partir des pixels déjà décodés (dans l'ordre des lignes de recherche), et seule la valeur résiduelle (réelle – prévue) est encodée. Le mode de prédiction détermine le type de prédiction à utiliser. L'image est divisée en plusieurs zones carrées et tous les pixels d'un carré utilisent le même mode de prédiction.
Il existe 13 modes de prédiction différents. Les plus répandus sont les pixels gauche, supérieur, supérieur gauche et supérieur droit. Les autres sont des combinaisons (moyennes) de gauche, de haut, d'angle supérieur gauche et d'angle supérieur droit.
Transformation de couleur (décorrélation)
L'objectif de la transformation de couleur est de décorréler les valeurs R, V et B de chaque pixel. La transformation de couleur conserve la valeur du vert (G) en l'état, transforme le rouge (R) en vert et le bleu (B) en vert, puis le rouge.
Comme pour la transformation du prédicteur, l'image est d'abord divisée en blocs, et le même mode de transformation est utilisé pour tous les pixels d'un bloc. Pour chaque bloc, il existe trois types d'éléments de transformation de couleur: vert_en_rouge, vert_en_bleu et rouge_en_bleu.
Soustraire la transformation Green
La "soustraction du vert" soustrait les valeurs des verts des valeurs du rouge et du bleu de chaque pixel. Lorsque cette transformation est présente, le décodeur doit ajouter la valeur du vert à la fois au rouge et au bleu. Il s'agit d'un cas particulier de la transformation générale de décoration des couleurs présentée ci-dessus (suffisamment fréquente pour justifier une interruption).
Transformation Color Indexing (palettes)
S'il n'y a pas beaucoup de valeurs de pixels uniques, il peut être plus efficace de créer un tableau d'indices de couleur et de remplacer les valeurs de pixels par les index du tableau. C'est ce que permet la transformation d'indexation des couleurs. La transformation d'indexation des couleurs vérifie le nombre de valeurs ARVB uniques dans l'image. Si ce nombre est inférieur à un seuil (256), un tableau de ces valeurs ARVB est créé, qui est ensuite utilisé pour remplacer les valeurs de pixels par l'index correspondant.
Codage du cache de couleurs
La compression WebP sans perte utilise des fragments d'image déjà visibles pour reconstruire de nouveaux pixels. Elle peut également utiliser une palette locale si aucune correspondance intéressante n'est trouvée. Cette palette est mise à jour en continu afin de réutiliser les couleurs récentes. L'image ci-dessous montre que le cache de couleurs local est mis à jour progressivement avec les 32 couleurs récemment utilisées à mesure que l'analyse descend.
LZ77 Backward Reference
Les références inverses sont des tuples de longueur et de code de distance. La longueur indique le nombre de pixels dans l'ordre des lignes de recherche qui doivent être copiés. Le code de distance est un nombre indiquant la position d'un pixel précédemment détecté, à partir duquel les pixels doivent être copiés. Les valeurs de longueur et de distance sont stockées à l'aide du codage de préfixe LZ77.
Le codage de préfixe LZ77 divise les grandes valeurs entières en deux parties: le code de préfixe et les bits supplémentaires. Le code de préfixe est stocké à l'aide d'un code d'entropie, tandis que les bits supplémentaires sont stockés tels quels (sans code d'entropie).
Le schéma ci-dessous illustre la LZ77 (variante 2D) avec correspondance de mots (au lieu de pixels).
Lossy WebP avec Alpha
En plus du WebP avec pertes (couleurs RVB) et du WebP sans perte (RVB sans perte avec alpha), il existe un autre mode WebP qui permet un encodage avec pertes pour les canaux RVB et un encodage sans perte pour le canal alpha. Une telle possibilité (RVB avec perte et alpha sans perte) n'est actuellement pas disponible avec les formats d'image existants. Aujourd'hui, les webmasters ayant besoin de transparence doivent encoder les images sans perte au format PNG, ce qui entraîne une surcharge importante. WebP alpha encode des images avec peu de bits par pixel et constitue un moyen efficace de réduire la taille de ces images. La compression sans perte du canal alpha n'ajoute que 22% d'octets par rapport à l'encodage WebP avec pertes (qualité 90).
Globalement, le remplacement du format PNG transparent par le WebP avec pertes et alpha permet une économie de taille de 60 à 70% en moyenne. Il s'avère qu'il s'agit d'une fonctionnalité très intéressante pour les sites mobiles riches en icônes (everything.me, par exemple).
