Cette page a été traduite par l'API Cloud Translation.

Questions fréquentes

Qu'est-ce que WebP ? Pourquoi l'utiliser ?

WebP est une méthode de compression avec et sans perte qui peut être utilisée sur un grand une grande variété d'images photographiques, translucides et graphiques trouvées sur le Web. Le niveau de compression avec pertes est réglable afin que l'utilisateur puisse choisir trouver un compromis entre la taille du fichier et la qualité de l'image. WebP atteint généralement un une compression supérieure de 30% en moyenne par rapport aux JPEG et JPEG 2000, sans perte d'image (voir Étude comparative).

Le format WebP vise principalement à créer des images plus petites et de meilleure qualité qui contribuent à rendre le Web plus rapide.

Quels navigateurs Web sont nativement compatibles avec WebP ?

Les webmasters qui souhaitent améliorer les performances de leur site peuvent facilement créer des alternatives WebP optimisées pour leurs images actuelles et les diffuser sur un ciblant les navigateurs compatibles avec WebP.

Compatibilité avec pertes WebP <ph type="x-smartling-placeholder">
- Google Chrome (ordinateur) 17 ou version ultérieure
- Google Chrome pour Android version 25 ou ultérieure
- Microsoft Edge 18 et versions ultérieures
- Firefox 65 ou version ultérieure
- Opera 11.10 et versions ultérieures
- Navigateur Web natif, Android 4.0 ou version ultérieure (ICS)
- Safari 14 ou version ultérieure (iOS 14 ou version ultérieure, macOS Big Sur+)
WebP avec pertes, sans perte et Compatibilité avec la version alpha <ph type="x-smartling-placeholder">
- Google Chrome (ordinateur) version 23 ou ultérieure
- Google Chrome pour Android version 25 ou ultérieure
- Microsoft Edge 18 et versions ultérieures
- Firefox 65 ou version ultérieure
- Opera 12.10 et versions ultérieures
- Navigateur Web natif, Android 4.2 ou version ultérieure (JB-MR1)
- Lune pâle 26+
- Safari 14 ou version ultérieure (iOS 14 ou version ultérieure, macOS Big Sur+)
Compatibilité avec les animations WebP <ph type="x-smartling-placeholder">
- Google Chrome (ordinateur de bureau et Android) version 32 ou ultérieure
- Microsoft Edge 18 et versions ultérieures
- Firefox 65 ou version ultérieure
- Opera 19 ou version ultérieure
- Safari 14 ou version ultérieure (iOS 14 ou version ultérieure, macOS Big Sur+)

Voir également :

Comment détecter la compatibilité d'un navigateur avec WebP ?

Vous devez diffuser des images WebP uniquement aux clients pouvant les afficher correctement et de revenir aux anciens formats pour les clients qui n'y parviennent pas. Heureusement il existe plusieurs techniques pour détecter la compatibilité WebP, à la fois côté client et côté serveur. Certains fournisseurs de CDN proposent la détection de compatibilité WebP dans le cadre de leur service.

Négociation de contenu côté serveur via les en-têtes "Accepter"

Il est courant que les clients Web envoient une demande « Accept » l'en-tête de requête, indiquant les formats de contenu qu'elle est prête à accepter en réponse. Si un le navigateur indique à l'avance qu'il "acceptera" le format image/webp ; le serveur Web sait qu'il peut envoyer des images WebP en toute sécurité, ce qui simplifie considérablement la négociation de contenu. Pour en savoir plus, consultez les liens suivants.

Modernizr

Modernizr est une bibliothèque JavaScript qui permet de détecter facilement les contenus HTML5 et Compatibilité des fonctionnalités CSS3 dans les navigateurs Web Recherchez les propriétés Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha et Modernizr.webp.animation :

Élément `<picture>` HTML5

HTML5 est compatible avec un élément <picture>, qui vous permet de répertorier plusieurs des cibles d'images alternatives par ordre de priorité, de sorte qu'un client demande la première image candidate qu'il peut afficher correctement. Voir cette discussion sur HTML5 Rocks. L'élément <picture> est compatibles avec un plus grand nombre de navigateurs en permanence.

Dans votre propre code JavaScript

Une autre méthode de détection consiste à tenter de décoder une toute petite image WebP utilise une fonctionnalité particulière et vérifiez si elle fonctionne. Exemple :

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Notez que le chargement d'image est non bloquant et asynchrone. Cela signifie que toute le code qui dépend de la compatibilité avec WebP doit être placé de préférence dans le rappel .

Pourquoi Google a-t-il publié WebP en Open Source ?

Nous sommes profondément convaincus de l'importance du modèle Open Source. Avec WebP dans Open Source, tout le monde peut travailler avec le format et suggérer des améliorations. Avec vos avis et suggestions, nous pensons que WebP va devenir encore plus utile en tant que format graphique au fil du temps.

Comment convertir mes fichiers image personnels au format WebP ?

Vous pouvez convertir vos fichiers image personnels à l'aide de l'utilitaire de ligne de commande WebP au format WebP. Pour en savoir plus, consultez Utiliser WebP.

Si vous avez de nombreuses images à convertir, vous pouvez utiliser le shell de votre plate-forme pour simplifier l'opération. Par exemple, pour convertir tous les fichiers jpeg d'un dossier, essayez les éléments suivants:

Windows :

> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )

Linux / macOS:

$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

Comment évaluer moi-même la qualité des images WebP ?

Actuellement, vous pouvez afficher les fichiers WebP en les convertissant dans un format courant qui utilise une compression sans perte, telle que PNG, puis qui affiche les fichiers PNG dans depuis n'importe quel navigateur ou lecteur d'images. Pour vous faire une idée rapide de la qualité WebP, consultez la Galerie sur ce site pour des photos côte à côte comparaisons.

Comment puis-je obtenir le code source ?

Le code du convertisseur se trouve sur la section Téléchargements du projet Open Source WebP . Le code du décodeur léger et la spécification VP8 site WebM. Consultez le Page Conteneur RIFF du conteneur spécifique.

Quelle est la taille maximale d'une image WebP ?

WebP est compatible avec le bitstream VP8, et utilise 14 bits pour la largeur et la hauteur. Les dimensions maximales d'une image WebP en pixels sont de 16 383 x 16 383.

Quels espaces de couleurs le format WebP accepte-t-il ?

Comme pour le flux VP8, le WebP avec perte fonctionne exclusivement avec un Format d'image Y'CbCr 4:2:0 8 bits (souvent appelé YUV420). Veuillez consulter la section 2, "Présentation du format" de la RFC 6386, Guide de décodage et de format de données VP8 pour en savoir plus.

WebP sans perte fonctionne exclusivement avec le format RVBA. Consultez le Spécification WebP Bitstream sans perte

Une image WebP peut-elle devenir plus grande que son image source ?

Oui, généralement lors de la conversion d'un format avec pertes en WebP vice versa. Cela est principalement dû à la différence d'espace colorimétrique (YUV420 par rapport à ARVB). et la conversion entre ceux-ci.

Il existe trois situations typiques:

Si l'image source est au format ARVB sans perte, le sous-échantillonnage spatial à YUV420 introduira de nouvelles couleurs plus difficiles à compresser que des éléments d'origine. Cette situation se produit généralement lorsque la source est au format PNG avec peu de couleurs: conversion au format WebP avec pertes (ou, à un JPEG avec pertes) peut augmenter la taille du fichier.
Si la source est au format avec pertes, utilisation d'une compression WebP sans perte pour capturer la nature avec pertes de la source se traduira généralement par un fichier plus volumineux. Cela n'est pas spécifique à WebP et peut se produire convertir une source JPEG aux formats WebP ou PNG sans perte, par exemple.
Si la source est au format avec pertes et que vous essayez de la compresser en tant que WebP avec pertes avec un paramètre de meilleure qualité. Par exemple, si vous essayez de convertir un fichier JPEG enregistré en qualité 80 en fichier WebP de qualité 95 génère généralement un fichier plus volumineux, même si les deux formats sont avec pertes. Il est souvent impossible d'évaluer la qualité de la source. Il est donc recommandé réduire la qualité WebP cible si la taille du fichier est systématiquement plus grande. Vous pouvez également éviter d'utiliser le paramètre de qualité cibler une taille de fichier donnée à l'aide de l'option -size de l'outil cwebp ; ou l'API équivalente. Par exemple, si vous ciblez 80% du fichier d'origine, la taille pourrait s'avérer plus robuste.

Notez que la conversion d'une source JPEG en WebP avec pertes ou d'une source PNG en source sans perte Les sites WebP ne sont pas sujets à de telles surprises liées à la taille des fichiers.

Le format WebP est-il compatible avec l'affichage progressif ou entrelacé ?

WebP ne propose pas d'actualisation de décodage progressive ou entrelacée dans le format JPEG ou PNG. Cela risque d'exercer une pression excessive sur le processeur et la mémoire du client de décodage, car chaque événement d'actualisation implique un passage complet dans le système de décompression.

En moyenne, le décodage d'une image JPEG progressive revient à décoder baseline trois fois.

Le WebP offre aussi un décodage incrémentiel, où toutes les requêtes entrantes disponibles les octets du flux de bits sont utilisés pour essayer de produire une ligne d'échantillon à afficher sous la forme dès que possible. Cela permet à la fois d'économiser de la mémoire et du processeur, et d'avoir à repeindre tout en fournissant des indications visuelles sur l'état du téléchargement. L'augmentation la fonctionnalité de décodage est disponible API Advanced Decoding

Comment utiliser les liaisons Java libwebp dans mon projet Android ?

WebP est compatible avec les liaisons JNI vers l'encodeur et le décodeur simples. dans le répertoire swig/.

Créez la bibliothèque dans Eclipse:

Assurez-vous de disposer du Plug-in ADT installé avec les outils NDK et que le chemin d'accès au NDK est correctement défini (Préférences > Android > NDK).
Créez un projet: Fichier > Nouveau > Projet > Sur Android Projet d'application.
Cloner ou décompressez libwebp dans un dossier nommé jni dans le nouveau projet.
Ajoutez swig/libwebp_java_wrap.c à la liste LOCAL_SRC_FILES.
Effectuez un clic droit sur le nouveau projet, puis sélectionnez Android Tools > (Outils Android >). Ajouter Native Support ... pour inclure la bibliothèque dans votre build.
Ouvrez les propriétés du projet et accédez à C/C++ Build > Comportement. Ajouter ENABLE_SHARED=1 à la section Build (Incremental build) pour compiler libwebp en tant que bibliothèque partagée.

Remarque : La définition de NDK_TOOLCHAIN_VERSION=4.8 permet généralement d'améliorer Performances de compilation 32 bits.
Ajoutez swig/libwebp.jar au dossier du projet libs/.
Compilez votre projet. libs/<target-arch>/libwebp.so sera créé.
Utilisez System.loadLibrary("webp") pour charger la bibliothèque au moment de l'exécution.

Notez que la bibliothèque peut être créée manuellement avec ndk-build et les composants Android.mk Dans ce cas, certaines des étapes décrites ci-dessus peuvent être réutilisées.

Comment utiliser libwebp avec C#?

WebP peut être compilé sous forme de DLL qui exporte l'API libwebp. Ces fonctions peuvent puis les importer en C#.

Créez le fichier libwebp.dll. WEBP_EXTERN sera correctement configuré pour exporter l'API. fonctions.
```
libwebp> nmake /f Makefile.vc CFG=release-dynamic
```

Ajoutez libwebp.dll à votre projet et importez les fonctions souhaitées. Notez que si vous utilisez API simple Vous devez appeler WebPFree() pour libérer les tampons renvoyés.

[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPEncodeBGRA(IntPtr rgba, int width, int height, int stride,
                                 float quality_factor, out IntPtr output);
[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPFree(IntPtr p);

void Encode() {
  Bitmap source = new Bitmap("input.png");
  BitmapData data = source.LockBits(
      new Rectangle(0, 0, source.Width, source.Height),
      ImageLockMode.ReadOnly,
      PixelFormat.Format32bppArgb);
  IntPtr webp_data;
  const int size = WebPEncodeBGRA(data.Scan0,
                                  source.Width, source.Height, data.Stride,
                                  80, out webp_data);
  // ...
  WebPFree(webp_data);
}

Pourquoi utiliser une version WebP animée ?

Avantages du WebP animé par rapport aux GIF animés

WebP est compatible avec les couleurs RVB 24 bits avec un canal alpha 8 bits, GIF couleur 8 bits et alpha 1 bits.
WebP est compatible avec la compression avec et sans perte. en fait, un seul peut combiner des frames avec et sans pertes. GIF compatible uniquement la compression sans perte. Les techniques de compression avec pertes de WebP sont adaptées aux images animées créées à partir de vidéos réelles, une méthode source d'images animées.
WebP nécessite moins d'octets que GIF¹. Les GIF animés convertis en WebP avec pertes sont 64% plus petits, mais sans perte. Les WebP sont 19% plus petits. Ceci est particulièrement important sur les réseaux mobiles.
Le décodage WebP prend moins de temps en présence de recherche. Dans Clignotement, faire défiler les onglets ou changer d'onglet peut masquer et afficher des images, ce qui met en pause les animations, on passe directement à un autre point. une utilisation excessive du processeur qui entraîne les animations qui abandonnent des frames peuvent aussi nécessiter que le décodeur avance l'animation. Dans ces scénarios, le WebP animé prend 0,57 fois plus décoder le temps² en GIF, ce qui permet de réduire les à-coups pendant le défilement et la récupération plus rapide après les pics d'utilisation du processeur. C'est en raison de deux avantages du format WebP par rapport au format GIF:
- Les images WebP stockent des métadonnées indiquant si chaque image contient du canal alpha, éliminant le besoin de décoder la trame pour prendre cette détermination. Cela permet d'obtenir une inférence plus précise des images précédentes lors d'une dépend de l'image, ce qui réduit le décodage inutile des cadres.
- À l'instar d'un encodeur vidéo moderne, l'encodeur WebP ajoute de manière heuristique des images clés à intervalles réguliers (ce que la plupart des encodeurs GIF ne font pas). Cela améliore considérablement la recherche dans les longues animations. Pour faciliter sans augmenter la taille des images de manière significative, les images ajoute une 'méthode de combinaison' indicateur pour chaque image, en plus de la méthode de suppression des frames utilisée par GIF. Cela permet de dessiner une image clé comme si toute l'image avait été effacée à la couleur d'arrière-plan sans forcer en taille réelle.

Inconvénients du WebP animé par rapport aux GIF animés

En l'absence de recherche, le décodage linéaire de WebP est plus qui consomme beaucoup de ressources de processeur qu'un GIF. Le WebP avec perte prend 2,2 fois plus de temps de décodage GIF, tandis que le format WebP sans perte prend 1,5 fois plus.
Le format WebP n'est pas aussi répandu que le format GIF, efficacement universelles.
Ajouter la compatibilité WebP aux navigateurs augmente l'empreinte du code et sur votre surface d'attaque. En Blink, cela fait environ 1 500 lignes supplémentaires de code (y compris la bibliothèque demux WebP et l'image WebP côté Blink décodeur). Notez que ce problème pourrait être réduit à l'avenir si WebP et WebM partagent un code de décodage plus courant, ou si les WebP sont intégrées dans les WebM.

Pourquoi ne pas simplement accepter WebM dans <img> ?

À long terme, il peut être judicieux d'accepter les formats vidéo dans <img>. . Cependant, nous l'avons fait maintenant, avec l'intention que WebM dans <img> puisse remplir le rôle proposé pour le WebP animé est problématique:

Lors du décodage d'une trame basée sur des images précédentes, WebM requiert 50% de mémoire en plus par rapport au WebP animé pour contenir le nombre minimal de images précédentes³.
La compatibilité du codec vidéo et des conteneurs varie considérablement selon les navigateurs et appareils. Pour faciliter le transcodage automatique de contenu (par exemple, pour proxy économisant la bande passante), les navigateurs doivent ajouter des en-têtes d'acceptation indiquant les formats compatibles avec ses tags d'image. Même cela pourrait être insuffisant, car les types MIME comme "video/webm" ou "video/mpeg" immobile n'indiquez pas la compatibilité du codec (par exemple, VP8 au lieu de VP9). De l'autre le format WebP est effectivement bloqué, et si les fournisseurs qui livrent s'il accepte de fournir une image WebP animée, qui correspond au comportement de cette technologie dans tous les UA. doivent être cohérentes ; Étant donné que "image/webp" La valeur accepte l'en-tête est déjà utilisé pour indiquer la compatibilité avec WebP, aucune nouvelle modification d'en-tête n'est acceptée sont nécessaires.
La pile vidéo Chromium est optimisée pour avec une lecture fluide et suppose qu'une ou deux vidéos sont lues à une en temps réel. Par conséquent, l'implémentation est agressive dans l'utilisation du système (threads, mémoire, etc.) pour optimiser la qualité de la lecture. Un tel n'est pas adaptée à un grand nombre de vidéos simultanées et doivent être repensées pour pouvoir être utilisées avec de nombreuses images.
Actuellement, WebM n'intègre pas toutes les techniques de compression de WebP. Par conséquent, cette image se compresse nettement mieux avec WebP qu'avec les alternatives:

¹ Pour toutes les comparaisons entre les GIF animés et les WebP animés, nous a utilisé un corpus d'environ 7 000 images GIF animées provenant de manière aléatoire sur le Web. Ces images ont été converties au format WebP animé à l'aide de "gif2webp" à l'aide de paramètres par défaut (créés à partir des derniers Arborescence source libwebp au 08/10/2013). Les chiffres comparatifs représentent les valeurs moyennes images.

² Les délais de décodage ont été calculés en utilisant la dernière combinaison de libwebp et de ToT. Blink au 08/10/2013 à l'aide d'un outil d'analyse comparative. « Décoder l'heure avec la recherche » est calculé comme suit : "Décoder les cinq premières images, effacer le cache du tampon, décoder les cinq frames suivants, et ainsi de suite".

³ WebM conserve quatre frames de référence YUV en mémoire, chacun d'entre eux stocker (largeur+96)*(hauteur+96) pixels. Pour YUV 4:2:0, nous avons besoin de 4 octets par tranche de 6 (soit 3/2 octets par pixel). Ces cadres de référence utilisent donc 4*3/2*(width+96)*(height+96) octets de mémoire. À l'inverse, WebP seule l'image précédente (au format RVBA) doit être disponible, 4*width*height octets de mémoire.

⁴ Le rendu WebP animé nécessite Google Chrome version 32 ou ultérieure