Auteur Sujet: WebP, le nouveau format d'image qui devrait remplacer le Jpeg sur le web (Lu 23984 fois)

xp25 · « **Réponse #24 le:** 11 juin 2022 à 14:08:05 »

Citation de: vivien le 11 juin 2022 à 13:19:26

Dans quel cas c'est utile xp25 ?

Bin sous Windows pour les voir dans l'explorateur mais surtout quand je fais des recherches images Google de matériels et qu'il n'y a que la version sauvegardé par Google qui n'est pas en "6045x5145px" pour ajouter/intégrer/agrémenter à un message sur lafibre $:-\$

Bien que ça reste marginal pour le moment

Sinon moi j'utilise "save-image-as-type" :

https://chrome.google.com/webstore/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd

Google fourni un Codec pour Windows et sa visionneuse -> https://storage.googleapis.com/downloads.webmproject.org/releases/webp/WebpCodecSetup.exe

Via -> https://www.soon7.net/revue-du-web/comment-afficher-les-images-webp-dans-windows/

Optix · « **Réponse #25 le:** 12 juin 2022 à 22:10:03 »

@Vivien :

Quand on veut afficher une image WebP "afficher dans un nouvel onglet", il faut fixer le MIME Type (soit le Content-Type en HTTP), car sinon, soit il affiche des hiéroglyphes soit il télécharge l'image (et affiche le file://).

Dans la conf Apache, peut-être rajouter un : "AddType image/webp .webp" dans ta conf Apache.

Merci

vivien · « **Réponse #26 le:** 13 juin 2022 à 13:54:27 »

C'est un problème qui concerne Chrome.

Apache fait appel au fichier /etc/mime.types

Cf le fichier : /etc/apache2/mods-enabled/mime.conf

Code: [Sélectionner]

<IfModule mod_mime.c>

        #
        # TypesConfig points to the file containing the list of mappings from
        # filename extension to MIME-type.
        #
        TypesConfig /etc/mime.types

        #
        # AddType allows you to add to or override the MIME configuration
        # file mime.types for specific file types.
        #
        #AddType application/x-gzip .tgz
        #
        # AddEncoding allows you to have certain browsers uncompress
        # information on the fly. Note: Not all browsers support this.
        # Despite the name similarity, the following Add* directives have
        # nothing to do with the FancyIndexing customization directives above.
        #
        #AddEncoding x-compress .Z
        #AddEncoding x-gzip .gz .tgz
        #AddEncoding x-bzip2 .bz2
        #

J'ai donc rajouté le type webp directment dans le fichier /etc/mime.types en suivant ce qui est fait pour webm qui est déjà définit :

# cat /etc/mime.types | grep "/web"
video/webm webm
image/webp webp

J'en ai profité pour rajouter les types Mime pour :
- WebP (le format le plus efficace supporté par tous les navigateurs)
- HEIF : même si je ne crois pas à l'utilisation du HEIF hors de écosystème Apple (Le HEIF dépend de plusieurs brevets et est donc soumis à des royalties, ce qui l’exclut de fait des logiciels libres).
- AVIF : même ce format n'est pas encore utilisable avant quelques années (son support est limité à Chrome / Firefox). Pas de support sous Edge ou Safari.
- JPEG XL : Lancé en 2021 par le Joint Photographic Experts Group (la même organisation qui a développé la norme JPEG originale), JPEG XL vise à remplacer à long terme l'ancien JPEG. Il n'est encore supporté par aucun navigateur (il faut activer un flag pour l’activer sous Firefox / Chrome / Edge)

Code: [Sélectionner]

image/webp                                      webp
image/heif					heif
image/heif-sequence				heifs
image/avif                                      avif hif
image/avif-sequence                             avifs
image/jxl					jxl

Optix · « **Réponse #27 le:** 13 juin 2022 à 15:36:09 »

Nickel, fonctionne au top (càd comme les autres types d'image quoi) partout

Merci !

vivien · « **Réponse #28 le:** 16 juin 2022 à 12:03:46 »

Citation de: vivien le 11 juin 2022 à 10:40:41

J'ai pris un Samsung S6 edge, un vieux mobile sous Android 7.0 afin de vérifier dans un cas défavorable.
A chaque fois j'ai fais le test d'envoyer et recevoir une image webp

- Firefox 101.2.0 : Images WebP lisibles
- Samsung Internet 17.0.4.3 : Images WebP lisibles
- Galerie 5.4.21.4 : Images WebP lisibles
- WhatsApp Messenger 2.22.12.77 : Images WebP lisibles
- Telegram pour Android 8.7.4 : Images WebP lisibles
- Messenger 364.0 : Images WebP lisibles
- Tchap 2.2.1 (messagerie de l'état, basée sur Matrix cf https://fr.wikipedia.org/wiki/Matrix_(protocole)) : Images WebP lisibles

J'ai aussi testé Twitter web : Les images WebP sont acceptées mais converties en jpeg.

Si WebP est bien géré sous Android depuis longtemps (en même temps, c'est Google), c'est moins bien géré dans Windows : Certaines versions de l’explorateur de fichier de Windows 10 ne permet pas de voire directement des images WebP, même si Paint sait ouvrir des fichiers WebP. Idem pour le gestionnaire de ficher sous Linux, le support est possible, mais pas installé par défaut (il y a un bug ouvert pour : "
Please add webp loader to gdk-pixbuf". J'ai également noté une incompatibilité avec Outlook 2019 : Les images WebP ne sont pas lisibles.

Je continue les tests pour vérifier le support de WebP :
- Libre Office : le support de l’import/export des images WebP est pour Libre Office 7.4 qui sortira le 22 août 2022.
- Office : Import / export des images WebP disponible dans Microsoft 365 (annoncé en aout 2021). Pas de support dans Office 2019. Je ne sais pas si Office 2021 inclus la prise en charge de WebP.
- Skype : Il est possible d'envoyer / recevoir des images WebP, mais elles ne s'affichent pas directement dans Skype (on clique sur l'image et elle s'ouvre dans le navigateur web)
- Signal : Images WebP lisibles directement dans l'application Android et desktop.
- Slack : Images WebP utilisables et lisibles directement

vivien · « **Réponse #29 le:** 02 juillet 2022 à 20:37:55 »

Je suis impressionné par la compression proposée par WebP depuis des images qui n'ont pas subies de compression avec perte avant (je ne suis pas pour compresser une image existante déjà compressé avec de la perte donc en Jpeg en WebP)

Pour la compression avec perte, que j'utilise par exemple pour une image mêlant texte et photos, la compression WebP est moins gênante visuellement que le jpeg (j'utilisais souvent le format png pour des images mêlant texte et photos - maintenant il est possible d'utiliser WebP et de réduire la taille dans des facteurs qui peuvent être jusqu'à x10 avec une perte quasiment invisible)

Pour la compression sans perte (l'image est strictement la même), voici deux exemples représentatifs de ce que j'obtiens pour ce type de contenu :

Les images sources des deux exemples :
Image sur la politique d'activation IPv6 : format PNG (336 Ko) / format WebP (62 Ko - compression sans perte)
Image le fonctionnement de l'API : format PNG (302 Ko) / format WebP (100 Ko - compression sans perte)

zergflag · « **Réponse #30 le:** 02 juillet 2022 à 23:33:26 »

Le gain de place pour certaines plateformes qui stockent beaucoup d'images comme Instagram, WebP pourrait leurs faire gagner beaucoup de places non ? actuellement c'est en JPEG pour Instagram

vivien · « **Réponse #31 le:** 02 juillet 2022 à 23:58:29 »

Jusqu'à présent, WebP n'était synonyme que de gain de vitesse de chargement de page, car les images devaient être double encodées en WebP, mais aussi en Jpeg pour les navigateurs qui ne supportent pas le WebP.

Aujourd'hui presque tous les sites web qui proposent des images WebP ont un double encodage des images.

Depuis deux ans es navigateurs qui ne supportent pas WebP baissent régulièrement et enfin mi-2022 on peut considérer que presque tous es visiteurs d'un site supportent WebP.

La où il y a encore le plus de navigateurs incompatible WebP en juillet 2022 (avec la mise à jour Microsoft de juin 2022 pour lancer Edge à la place de Internet Explorer, IE11 est enfin mort), c'est Safari.

Safari ne décode pas lui même WebP, il faut que le système d'exploitation le fasse et le minimum c'est macOS 11.0+ iOS 14.0+ iPadOS 14.0+. Ces trois systèmes ont été lancés il y a presque 2 ans. Beaucoup ont fait la mise à jour, mais pas tous.

Sur les vieux Mac, avec Mac OS 10.x, la solution c'est de mettre Chrome ou Firefox en navigateur.
Sur iOS par contre, si on est sur iOS 13 ou plus ancien, il n'y a pas de solution autre que la mise à jour car un navigateur comme Chrome est obligé d'utiliser Safari pour le rendu des pages (obligation Apple)

Bref, le support de WebP par Safari est encore récent et je comprends que certains sites comme Instagram n'ai pas encore passé le cap.

xp25 · « **Réponse #32 le:** 03 juillet 2022 à 00:35:52 »

Quel script utilise un site pour détecter et afficher le .Jpeg au lieu du .WebP quand il n'est pas pris en charge par le navigateur ?

hwti · « **Réponse #33 le:** 03 juillet 2022 à 01:11:26 »

Citation de: xp25 le 03 juillet 2022 à 00:35:52

Quel script utilise un site pour détecter et afficher le .Jpeg au lieu du .WebP quand il n'est pas pris en charge par le navigateur ?

Peut-être que certains sites le font dans le script, mais il n'y a pas de méthode officielle donc ce n'est pas très élégant.
Il est possible de le faire côté serveur, en se servant de l'entête "Accept" : il y a un peu de différences, mais si la liste contient "image/webp", alors on est certain qu'il supporte le format.
Il est aussi possible d'utiliser l'élement <picture> pour spécifier des URL avec différents formats, le navigateur utilisant le premier qu'il supporte : https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#utilisez_largement_les_formats_dimage_modernes

vivien · « **Réponse #34 le:** 03 juillet 2022 à 08:10:25 »

Si tu regardes dans les requêtes envoyées par ton navigateur web, tu vois que a chaque requête il envoie au serveur dans le header "Accept" les formats d'images modernes supportés, ce qui permet au serveur de délivrer du WebP ou même du AVIF quand c'est supporté et du Jpeg / PNG quand ce n'est pas supporté.

Voici le header "Accept" envoyé par Chrome 103 :

Code: [Sélectionner]

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

Exemple avec Firefox 102 sur lafibre.info de l'intégralité de ce qu’envoie le navigateur a chaque requête :

Code: [Sélectionner]

GET /index.php HTTP/2
Host: lafibre.info
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: fr,fr-FR;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
DNT: 1
Connection: keep-alive
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1

A noter que Chrome envoie toujours le fait qu'il supporte le format d'image APNG (Animated Portable Network Graphics) alors que Firefox, qui le supporte depuis sa version 3.0 (lancé en 2008) ne le mentionne pas / plus. C'est peut-être car le support d'APNG est arrivé tardivement dans Chrome (il faut au minimum Chrome 59, lancé en juin 2017).

Pour moi ce ne semple pas intéressant de double encoder les images (et si on fait une bête compression Jpeg => WebP le gain est bien plus faible, 35% en moyenne, alors qu'en travaillant directement l'image en WebP on a soit une meilleur qualité soit un taux de compression plus intéressant)

Je passe au WebP car il est enfin supporté par tous les navigateurs web.

xp25 · « **Réponse #35 le:** 03 juillet 2022 à 09:47:27 »

Merci à tout deux pour ces explications claires