Trucsweb.com

Trucsweb 1997-2017

Le site des Trucsweb a maintenant 20 ans! 20 ans de partage.

jours restants pour la campagne de financement 2017-2037 ;- )
Je vous remercie d’envisager de faire un don afin de perpétuer cette longue tradition francophone qui a maintenant 20 ans.

Merci,
Django Blais, L’Isle-Verte (Québec)


Infographie

Format des images

RDFFav

Formats d’image Web BPG et WebP

Dans la série « guéguerre des brevets » - Le web est il prêt pour le no man’s land du « Better Portable Graphics » et le très Google « Web Picture »?BPG, WebP, JPEG, PNG, apha channel, Fabrice Bellard

Comparaison : Image JPEG vs BPG Comparaison : Image WebP vs BPG

Dans la série « guéguerre des brevets » - Le web est il prêt pour le no man’s land du « Better Portable Graphics » et le très Google « Web Picture »?

Pour une fois que je ne tape pas sur Google, qui a l’unique solution native (ben oui c’est son navigateur Chrome!). Cette foi c’est tous les navigateurs et les brevets qui brettent comme on dit par chez nous! Selon Google, 60% des octets transmis sur la toile seraient des images, et le WebP procurerait de 30% à 80% de réduction d’espace face à JPEG et PNG3. Dans le contexte de la crise de l’énergie et des changements climatiques, j’irais jusqu’à dire que c’est un crime contre l’humanité pour une géguerre de brevet! ; -) Mais est-ce que le web est prêt pour le « BPG » et le WebP? Poser la question c’est y répondre. Sans aller plus loin, je dirais non pour quatre raisons, et ça n’a rien à voir avec le manque de compatibilité.

  1. La première, est-ce qu’il y a un réel besoin? Si on laisse les cas de conscience à l’industrie! Le WebP est 75% plus compressé que le JPEG, mais on retrouve partout des images sans aucune compression, ou en haute résolution 2x affichées pour un 1x. Il est question essentiellement de poids. Il suffit d’avoir deux images au lieu de quatre dans son carrousel pour le régler! En d’autres mots, une utilisation avec parcimonie de ce qui demande beaucoup de ressources. En ce sens qu’on a d’autres chats à fouetter! D’autant que le format PNG, particulièrement depuis la transparence du canal alpha (apha channel), fait très bien l’affaire dans la moitié des cas!

  2. Deuxièmement, j’arrive en bon programmeur à me débrouiller en quelques heures avec les deux formats, à la merci d’un seul logiciel. Mais les édimestres? Ceux qui composent le contenu Web. Sont-ils en mesure de produire ce type d’image? On ne leur demande déjà pas de produire les nombreux formats vidéos, préférant la simplicité de YouTube!

  3. Selon Florent Verschelde 2015-10-30 02:47:49 PDT, le HEVC est protégée par un brevet (MPEG LA et HEVC Advance). Cela signifie que Firefox, qui n’utilise que du code ouvert, ne peut pas supporter le format BPG. Je devrais même, selon Wikipedia, payer la licence HEVC Advance a un taux de redevance maximal de 2,60 $ par appareil pour avoir une image BPG dans cette page!

  4. Outre Google Chrome, le format WebP est à ce jour incompatible avec la plupart des navigateurs.

C’est quand même trippant!

Enfin, pour un puriste c’est trippant, on se sent à l’avant garde! Et il n’y a rien là, maintenant que le gros du travail a été fait par les Fabrice Bellard de ce monde... Si pour les photographies c’est trop demandé à l’édimestre. Pour le concepteur, quoi de plus simple que de compresser en masse les images génériques d’un site Web et ainsi couper du coup 50% du poids total?

Le génie derrière l’évolution du vidéo est d’avoir mélangé un peu de tout (tout va bien quand t’as le brevets). Particulièrement bien fait pour les couleurs uniformes, les ciels bleus. Ainsi on ne voit plus les fonds fuzzy du JPEG, que l’on retrouve même en télévision HD. À l’inverse, même chose pour les détails souvent pixelisés des images indexées. Personnellement j’ai un faible pour le format BPG si ce n’était de la patch JavaScript de 56 Ko! Mais disons-le, les deux formats s’équivalent au niveau du poids, permettent une compression spectaculaire avec davantage de clarté. Au prix du détail toute foi. Mais ces deux formats d’images ne sont pas destinés pour l’imprimé, mais bien spécifiquement faits pour le Web.

Je ne lance pas souvent de fleurs à Google, mais voilà une de ses meilleures initiatives, depuis longtemps. Il faut savoir déjà que le format JPEG n’est pas public et qu’il pourrait tout aussi bien un jour demander des comptes! Alors déjà Google a acheté le format WebP et a ouvert le code en 2010. Mais une guerre fratricide s’en ai suivi entre Google et Mozilla.

Aujourd’hui encore le support WebP de Firefox laisse à désirer, mais Fabrice Bellard nous a concocté un petit JavaScript qui permet de lire le format d’image BPG avec la plupart des navigateurs. Je n’ai pas scruté à la loupe son code, mais à première vue je dirais qu’il fait une conversion base64 en ligne de l’image en format PNG. Doublement brillant, une bonne compression et une solution portable! C’est une patch et même illégale, mais Google n’a pas mieux fait avec son WebP.

Or donc, un peu comme les religions, les deux formats proviennent de la même source : la compression vidéo. HEVC pour l’un et VP8 pour l’autre. Contrairement au JPEG, les deux utilisent l’indexation ou l’« image matricielle » comme les formats GIF et PNG. Bien sûr la transparence du canal alpha(apha channel) comme le PNG. Les animations, à la manière GIF et même les métadonnées comme EXIF, ICC profile et XMP! Personnellement c’est pour moi très intéressant, au niveau sémantique bien que la première chose qu’on apprend c’est comment supprimer ces informations pertinentes pour sauver... des octets!

En pratique

Le mieux à faire c’est de télécharger l’excellent logiciel de conversion Penelope. Il y a aussi un Plug-in pour Photoshop.

PenelopePenelope Image converter (7,808 KB)

  • Super rapide, grande qualité avec une bonne interface.
  • Supporte les formats JPEG, PNG, GIF, TIFF, BMP, WebP et BPG.

Télécharger l’application gratuite Penelope.

BPG de Fabrice Bellard
Image BPG

- Site officiel : bellard.org/bpg/
- Les spécifications du BPG
- Code source « libbpg » sur Github

  • Taux de compression élevé. Les fichiers sont beaucoup plus petits que le format JPEG pour une qualité similaire ;
  • Pris en charge par la plupart des navigateurs Web avec un petit décodage Javascript (bpgdec8.js : 56 KB) ;
  • Basé sur un sous-ensemble du « standard ouvert » de la compression de vidéo HEVC.
  • Prend en charge les mêmes « chroma formats » du JPEG (niveaux de gris, YCbCr 4:2:0, 4:2:2, 4:4:4) pour réduire les pertes au cours de la conversion. Le canal alpha est pris en charge. Les mode RGB, YCgCo et CMYK sont également pris en charge ;
  • Prise en charge native de 8 à 14 bits par canal pour une plage dynamique plus élevée ;
  • La compression sans perte est prise en charge (Lossless compression) ;
  • Divers métadonnées (telles que le EXIF, le profile ICC et XMP) peuvent être inclus ;
  • Soutien de l’animation.

Voilà un exemple avec le format BPG. Bien que ce format soit absolument incompatible avec tous les navigateurs, le correctif JavaScript la transforme en image 100% compatible! Voilà le script bpgdec8.js suivi de l’image l_oz2012.bpg. Noter le délai d’affichage, le temps que le script fasse la conversion.

Image en format BPG
Exemple d’image BPG (2,27 Ko)
<script type="text/javascript" src="http://bellard.org/bpg/bpgdec8.js"></script>

<figure style="background-color:#c6c3bd;text-align:center;">
 <img src="http://www.trucsweb.com/documents/images/logos/l_oz2012.bpg" alt="Image en format BPG" />
  <figcaption>Exemple d’image BPG (2,27 Ko)</figcaption>
</figure>
Google WebP
Google WebP

- Site officiel : developers.google.com/speed/webp/
- Les spécifications du WebP

Google présente le format WebP comme mieux adapté que les compresseurs précédents et surtout à la haute résolution (densités de pixels des écrans actuels (110 à 240 ppi).

Voilà un exemple avec le format WebP. Noter la possibilité de spécifier une couleur de fond CSS directement sur l’image...

Image en format WebP
Exemple d’image WebP (3,11 Ko) (incompatible Firefox, Edge et IE 11)
<figure style="text-align:center;">
  <img src="http://www.trucsweb.com/documents/images/logos/l_oz2012.webp" alt="Image en format WebP" width="300" height="100" style="background-color:#c6c3bd;margin:0 auto;" />
  <figcaption>Exemple d’image WebP (3,11 Ko) <small>(incompatible Firefox, Edge et IE 11)</small></figcaption>
</figure>
Exemple combiné avec la balise <picture> (Version PNG à 8,6 Ko)

Ça commence à avoir de l’allure, c’est même accessible et compatible dans une certaine mesure. La beauté du HTML et de la balise <picture> dans cet exemple, c’est de pouvoir spécifier plus d’une source par image. Le navigateur charge uniquement le premier format compatible (Lire « Retina et les images adaptatives - (Attribut sizes et picture) » pour plus de détails) :

<script type="text/javascript" src="http://bellard.org/bpg/bpgdec8.js"></script>

<figure style="background-color:#c6c3bd;text-align:center;">
  <picture>
    <source srcset="/documents/images/logos/l_oz2012.bpg" type="image/bpg">
    <source srcset="/documents/images/logos/l_oz2012.webp" type="image/webp">
    <img src="/documents/images/logos/l_oz2012.png" alt="BPG (2,27 Ko), WebP (3,11 Ko), PNG à (8,6 Ko)" />
  </picture>
  <figcaption>Exemple BPG, WebP et PNG combiné</figcaption>
</figure>
Exemple avec format (Type mime) d’image
Exemple BPG, WebP et PNG combiné
Côté serveur

Pour servir les deux format d’images, il faut ajouter le type MIME :

  • Pour WebP : image/webp
  • Pour BPG : image/bpg ou image/png
En conclusion

That it! On a toujours bien sauvé 6 Ko! Avec un WebP incompatible et un BPG qui affiche une ressource d’image brisée pendant que le runtime fait la fastidieuse conversion. En 6 ans le WebP n’a pas réussi à s’imposer ni même approcher une apparente utilisation. Quant au « Better Portable Graphics », il a beau aussi être une sacrée avancée, c’est David contre Goliath! Pendant que cette guerre de pouvoir fait rage, le format SVG fait du chemin. Il faut dire toutefois que le SVG n’a rien pour pour remplacer le format JPEG, il faudra bien trancher un jour! QUE LES NAVIGATEURS FASSENT LEUR JOB!

Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

8/10 sur 1 revues.
       Visites : 1104 - Pages vues : 1221
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@