PROJET AUTOBLOG


shaarli-Liens en vrac de sebsauvage

Site original : shaarli-Liens en vrac de sebsauvage

⇐ retour index

à propos de « Dev.Opera — Native Responsive Images »

mardi 26 août 2014 à 09:04
Quand je regarde ces évolutions abracadabrantesques de la norme HTML pour faire face aux écrans à multiples résolutions, je ne peux pas m'empêcher de rager qu'on se traîne toujours cette merde de JPEG alors qu'on aurait même pas eu besoin de ces bricolages avec les Wavelets.

La compression d'image par Wavelets (ondelettes) est une méthode différente du JPEG qui existe depuis près de 20 ans. JPEG et MP3 sont basés sur les transformées de Fourier, et sont notoirement mauvais à l'encodage de hautes fréquences ponctuelles (une étoile sur un ciel sombre en JPEG, ou une percussion en MP3).  Les wavelets n'ont pas ce défaut, ce qui permet une meilleure qualité (ou donc une meilleure compression à qualité équivalente).

Mais l'avantage fantastique de la compression d'images par Wavelets est que le décodage de l'image peut se faire de manière progressive.   Je m'explique:
Pour des images responsives en JPEG, vous devez créer *plusieurs* JPEG à des résolutions différentes. Vous partez de l'image pleine résolution, et vous créez plusieurs copies à des résolutions inférieures. Le navigateur (ou votre javascript) va choisir laquelle charger en fonction du périphérique.

Avec les wavelets, plus vous décodez d'octets de l'image d'origine, plus l'image s'affine. Le navigateur peut donc décider d'arrêter le chargement de l'image s'il juge qu'il en a assez par rapport au périphérique sur lequel il l'affiche. Ainsi, vous n'avez plus à avoir plusieurs copies de votre image: Vous pouvez laisser l'image de 8 Mo sur le serveur.  Un navigateur sur un tout petit écran pourra décider de ne charger que les 16 premiers kilo-octets, ce qui lui suffira pour afficher l'image en entier.  L'internaute met son téléphone en mode paysage ?  Le navigateur peut charger 16 ou 32 ko supplémentaire pour l'afficher dans une meilleure qualité.
Vous êtes sur un écran Retina ?  Le navigateur peut afficher l'image en entier dès les premiers kilo-octets reçus, et charger - par exemple - jusqu'à 1 Mo pour avoir une image bien fine.
Aucun besoin de ré-encoder votre image à différentes résolutions/densités de pixels.

Les wavelets existent depuis plus de 20 ans, mais n'ont jamais décollé (tout le monde restant campé sur le JPEG). Toujours le problème de l’œuf et de la poule.  Le comité JPEG est arrivé très tardivement avec son JPEG-2000 (qui implémente les wavelets), mais sous forme d'un format bardé de brevets et de licences (dont personne n'a voulu, bien entendu). C'est trop tard. Nous sommes coincés avec le JPEG, tout comme nous sommes coincés avec le MP3 malgré l’existence de formats bien meilleurs (Vorbis, Opus...). Les wavelets sont une très bonne technologie de compression pour les images, mais aucun format n'a su s'imposer.

Et nous voilà à bricoler des horreurs en javascript ou dans les balises <img> parce que le JPEG ne permet pas le décodage progressif. Pouark. (Certes on a du JPEG progressif, mais ça reste un pis-aller et ne permet pas nativement de faire du multi-résolution).

Des fois, voir de superbes technologies ne pas être utilisées (wavelets, Vorbis, Opus, 7z/LZMA...) ça me dégoûte.

PS: Les wavelets peuvent également être utilisées pour compresser des modèles 3D, ce qui est bigrement intéressant pour les jeux en ligne: Les modèles 3D peuvent être progressivement envoyés au client. Quand ce dernier se rapproche de l'objet, le chargement de l'objet se poursuit (et le modèle 3D s'affine).  Cela évite également d'avoir à conserver plusieurs modèles 3D à des résolutions différentes (ce que font tous les jeux 3D).
(Permalink)