class: full-page, slide-intro # Autopsie d'un JPG --- class: content-centered # Pourquoi parler de JPEG ? - la web perf est un sujet d'actualité - le JPEG est massivement utilisé - ... bien qu'il date du début des années 90 - ... et qu'il est parfois incompris ou mal réglé - Un exemple simple de compression perceptuelle (images, audio, vidéo...) --- class: content-centered # JPEG : historique - **J**oint **P**hotographic **E**xperts **G**roup a créé le standard *Information technology – Digital compression and coding of continuous-tone still images* - Le groupe a démarré 1986, le standard a été publié en 1992 (apprové par l'ISO et l'ITU) - Méthode de compression d'image - Format de fichier associé : **J**peg **F**ile **I**nterchange **F**ormat (JFIF) --- class: content-centered # Images : >50% du payload .center[  [HTTP Archive (2011-2015)](http://httparchive.org/trends.php?s=All&minlabel=Jun+1+2011&maxlabel=Apr+1+2015#bytesImg&reqImg) ] --- class: content-centered # Sommaire - Fonctionnement de la compression JPEG - Metadatas - REX web perf & outils utiles --- class: content-centered # Que se cache-t-il derrière ? .center[  ] --- class: content-centered # Vision naïve d'une image .center[  ]   - 400 x 268 = 107 200px - RGB = 3 bytes - 321 600 ≠ 111 858 ≠ 9 412 --- class: content-centered # Une combinaison de méthodes ### Compression sans perte (lossless) - Techniques issues de la théorie de l'information - Algèbre linéaire ### Compression avec perte (lossy) - Techniques psychovisuelles - Quantification --- class: content-centered # Encodage et décodage .center[  ] - Temps de traitement et optimisations sur l'encodeur - Décodeur plutôt rapide et standardisé --- class: content-centered # Division par blocs de 8x8 .center[  ] - Compression par bloc de 64 pixels (Minimum Coded Unit) - Artefacts visibles à l'œil nu - [Bon compromis](http://www.faqs.org/faqs/mpeg-faq/part3/) de taille entre localité et performances (à l'époque) --- class: content-centered # Zoom sur un bloc 8x8 .column-left[  ] .column-right[  ]   - 8x8 c'est petit, surtout pour les résolutions actuelles - Chaque MCU est considérée comme un vecteur de taille 64 ordonné en zig-zag --- class: content-centered # Changement de perspective .center[  ] - **RGB ➔ YCbCr** (Luminance et chrominance) - Changement de base dans l'espace vectoriel des MCU - Lossless (tant qu'on n'arrondit pas) - L'œil humain est bien plus sensible à la luminance --- class: content-centered # Subsampling en chrominance .center[  ] - Reduction de la chrominance moins bien perçue par l'œil humain - Méthode lossy du [chroma subsampling](http://en.wikipedia.org/wiki/Chroma_subsampling) - Symboles abscons (4:4:4, 4:2:2, 4:4:0...) connus aussi en vidéo --- class: content-centered # Discrete Cosine Transform .column-left[ - Sur chaque composant (Y, Cb, Cr) de chaque MCU - Dur à expliquer, partie la plus coûteuse en CPU - Permet de décomposer sur une base de fréquences spatiales ] .column-right[  ] --- class: content-centered # DCT côté maths .column-right[  ] - Proche de la Discrete Fourier Transform (connu et optimisé) - Bonne approximation de la [Karhunen-Loève Transform](http://en.wikipedia.org/wiki/Karhunen%E2%80%93Lo%C3%A8ve_theorem) ou ACP - Pour les processus markoviens stationnaires d'ordre 1  - Adapté aux variations faibles d'une MCU à l'autre --- class: content-centered # Propriétés de l'ACP .column-right[  ] - Décomposition en variables aléatoires décorrélées - Compaction d'énergie sur des signaux réels ➔ beaucoup d'information sur peu de coordonnées [*source*](http://www.ee.columbia.edu/~xlx/ee4830/) --- class: content-centered # Quantification .center[  ] - C'est juste un arrondi avec un pas (diviseur) donné - L'approximation est irrécupérable (lossy) - L'opération est appliquée pour chaque coefficient de la décomposition en DCT --- class: content-centered # Quantification adaptative .center[  ] - La perception de l'œil humain privilégie les basses fréquences - Une table de quantification par composant (Y, Cb, Cr) stockée dans le fichier - Des tables déduites empiriquement sont fournies par le standard - Le réglage qualité multiplie ces tables par une constante dépendant de l'encodeur --- class: content-centered # Techniques de compression lossless .center[  ] - Compression des zéros dans les hautes fréquences ([RLE](http://en.wikipedia.org/wiki/Run-length_encoding)) - [DPCM](http://en.wikipedia.org/wiki/Differential_pulse-code_modulation) sur la moyenne (DC) de chaque MCU - Encodage de [Huffman](http://en.wikipedia.org/wiki/Huffman_coding) : optimal pour des données iid si le dictionnaire est déduit de l'image - Des dictionnaires génériques sont fournis par le standard --- class: content-centered # Récapitulatif .column-right[  ] .column-left[ - Subsampling chroma - Découpage en MCU (8x8) - Passage en DCT - Quantification - Compression lossless ] ### Et la décompression c'est à l'envers ! --- class: content-centered # JPEG progressif .center[  ([source](http://sixrevisions.com/graphics-design/jpeg-101-a-crash-course-guide-on-jpeg/)) ] - Juste une question d'ordre d'écriture des MCU dans le fichier - Faites du progressif, sans hésitation ! --- class: content-centered # Optimisations et tuning ### Plusieurs leviers en baseline - Subsampling de CbCr - Optimisation des tables de quantification - Optimisation des dictionnaires de Huffman par rapport à l'image - Progressif ### Leviers pas toujours supportés - Compression arithmétique --- class: content-centered # Les opérations lossless .center[  ] - Rotation ➔ réarrangement des MCU - Passage en progressif ➔ réarrangement de l'ordre des coefficients dans le fichier - Flou ➔ mise à zéro des hautes fréquences - Retaillage (multiple de 8x8) ➔ sélection de MCU - Optimisation de la taille du fichier ➔ recompression avec table de Huffman optimisée --- class: content-centered # Les mauvaises idées .column-left[ - Compresser à la qualité maximum ➔ lossy quand même (arrondis) - Une taille pour toutes les images ➔ perte de qualité sur les images complexes - Zipper un JPEG ➔ ajout d'un header: augmente la taille - Compresser des images discontinues (texte) ➔ artefacts type [Gibbs](http://en.wikipedia.org/wiki/Gibbs_phenomenon) ] .column-right[  ] --- class: full-page, slide-metadata # Metadatas --- class: content-centered # Exiftool ```sh $ exiftool picture.jpg ``` ```sh File Size : 494 kB Image Size : 1920x1265 File Type : JPEG MIME Type : image/jpeg Exif Byte Order : Little-endian (Intel, II) XMP Toolkit : Adobe XMP Core 5.3-c011 66.145661 Original Document ID : xmp.did:999DEC701EB0E311801EFDD03E7C1154 Document ID : xmp.did:6C302F067BD111E4A0FFFBC0293A508B Instance ID : xmp.iid:6C302F057BD111E4A0FFFBC0293A508B Creator Tool : Adobe Photoshop CS6 (Windows) Derived From Instance ID : xmp.iid:25D692D731CB11E4BB03A7E70526CA15 Derived From Document ID : xmp.did:25D692D831CB11E4BB03A7E70526CA15 DCT Encode Version : 100 APP14 Flags 0 : [14], Encoded with Blend=1 downsampling APP14 Flags 1 : (none) Color Transform : YCbCr Encoding Process : Baseline DCT, Huffman coding Bits Per Sample : 8 Color Components : 3 Y Cb Cr Sub Sampling : YCbCr4:4:4 (1 1) ``` --- class: content-centered # Trois formats - EXIF - IPTC - XMP --- class: content-centered # EXIF (1995) - **EX**changeable **I**mage **F**ile - Lors de la prise de photo - Informations techniques - 64kb max, no UTF-8, no timezone --- class: content-centered # IPTC (1990) .center[  ]   - **I**nternational **P**ress **T**elecommunications **C**ouncil - **I**nformation **I**nterchange **M**odel - Texte, audio, video, images, etc - Auteur, copyright, description, etc - Deprecated --- class: content-centered # XMP (2001) .center[  ]   - e**X**tensible **M**etadata **P**latform - EXIF + IPTC en XML - Extensible, UTF-8, i18n - Support faible --- class: content-centered # Fragmentation - Info dupliquée - Reconciliation - Support limité - Tags propriétaires --- class: content-centered # Compression - Sur le web, on supprime tout - ... sauf l'auteur et la license   ```shell jpegtran -optimize -copy none file.jpg ``` --- class: full-page, slide-tools # Outils --- class: content-centered # Outils .center[  ] - jpegoptim -m85 --strip-all - cjpeg-dssim jpegoptim --- class: content-centered .thumbnails[ -  `-m90, 342Ko, 0.000528` -  `-m80, 219Ko, 0.001259` -  `-m70, 172Ko, 0.002076` -  `-m60, 141Ko, 0.003032` -  `-m50, 121Ko, 0.003785` -  `-m40, 104Ko, 0.005191` -  `-m30, 86Ko, 0.007569` -  `-m20, 64Ko, 0.013038` -  `-m10, 38Ko, 0.034276` ] --- class: content-centered # From the trenches ```shell File Size : 117 kB Flash : Off, Did not fire Focal Length : 50.0 mm Photoshop Thumbnail : (Binary data 6959 bytes) History Action : derived, saved, saved... History Software Agent : Adobe Photoshop Lightroom... Thumbnail Image : (Binary data 6959 bytes) ``` - Boulimie de metadata (11% du poids du fichier) --- class: content-centered # From the trenches .center[  ] - Qualité trop haute (~98/100 sous Gimp) - Taille écran 228x274px - 117ko ➔ 23ko (qualité 80/100) --- class: content-centered # Le futur du JPEG ? - Les successeurs : JPEG 2000 (so last century), wavelets compression, multiresolution tiling... - Le JPEG est largement suffisant dans la plupart des cas de diffusion - Le gain des méthodes plus avancées est trop faible (<15%, [source](http://www.elektronik.htw-aalen.de/packjpg/_notes/PCS2007_PJPG_paper_final.pdf)) - Ouvert et gratuit (les brevets sont valables 20 ans) --- class: content-centered # Good is often enough - Côté vidéo le besoin a encouragé les avancées (H.264, H.265) - Les principaux gains liés à notre perception ont majoritairement été exploités (audio, vidéo, image...) - DVD Audio, HD audio, 4K sont souvent plutôt des besoins marketing que véritablement avérés --- ## Sources http://www.impulseadventure.com/photo/jpeg-compression.html http://fr.wikipedia.org/wiki/JPEG#D.C3.A9coupage_en_blocs http://fr.wikipedia.org/wiki/Codage_de_Huffman http://en.wikipedia.org/wiki/File:JPEG_process.svg http://www.ams.org/samplings/feature-column/fcarc-image-compression http://upload.wikimedia.org/wikipedia/commons/2/23/Dctjpeg.png http://en.wikipedia.org/wiki/Quantization_(image_processing) https://ece.uwaterloo.ca/~z70wang/research/ssim/ Bec Brown : http://finda.photo/image/6954 Taylor Swayze : http://finda.photo/image/8420 Ariana Prestes : http://finda.photo/image/4937 http://en.wikipedia.org/wiki/Autopsy#/media/File:Rembrandt_Harmensz._van_Rijn_007.jpg