WebP et WordPress = amélioration du temps de chargement et des performances ?

Stefan Römershäuser Dernière mise à jour le 21.10.2020
8 Min.
webp WordPress
Dernière mise à jour le 21.10.2020

De nombreux WordPress utilisateurs sont intéressés par le format d'image WebP car il combine les avantages du JPG et du PNG. Cependant, il ne remplace pas les deux formats d'image courants. Pour WordPress les utilisateurs qui utilisent beaucoup d'images, WebP devrait être particulièrement utile. Nous expliquerons pourquoi il en est ainsi dans cet article.

Dans le monde d'aujourd'hui, il est de plus en plus important de rendre l'expérience des visiteurs de votre site web aussi agréable et facile que possible. Les gens sont visuels et peuvent souvent absorber les informations qu'ils voient plus rapidement et mieux. Un coup d'œil rapide sur un panneau publicitaire, en faisant défiler une page d'accueil avant que le bus n'arrive dans cinq minutes. Nous connaissons tous ces situations. 

Comme les images représentent généralement plus de la moitié de l'espace de stockage d'un site web, il existe un grand potentiel d'optimisation.

Maintenant, quelques faits supplémentaires sur le WebP avant d'aborder les sujets.

  • WebP prend en charge le format vidéo VP8, qui convient aux petites images animées, par exemple, comme nous le connaissons des GIF.
  • La taille maximale de l'image pour WebP est de 16 383 x 16 383 pixels.
  • Vous pouvez également augmenter ou réduire l'échelle d'une image WebP, comme pour les fichiers SVG, mais beaucoup ne le permettent pas pour des raisons de sécurité.

Les sujets suivants sont abordés dans cet article aujourd'hui :

  1. Différences par rapport à JPG et PNG

- Comparaison de la taille des fichiers
- Espace couleur/profondeur
- Soutien/assistance

  1. Quelles sont les conditions requises pour le WebP in WordPress ?
  2. Comment puis-je insérer des images WebP WordPress ?

- Plugin Utilisation sur
- Ajoutez quelque chose au .htaccess de votre serveur
- Fichier Function.php de votre WordPress -Themes complet. 

  1. Ma conclusion sur WebP

Différences par rapport à la PNG et à la JPG 

WebP et PNG

Une image WebP est jusqu'à 25-30% plus petite qu'une image PNG sans perte de qualité. Les arrière-plans peuvent toujours être transparents. Cela ne varie qu'entre l'image elle-même, la profondeur de l'image, les détails, l'espace de couleur, etc. En raison de la petite taille du fichier, le format WebP apporte un avantage certain en termes de performance.

png vs webp

Sur la base des deux images, on peut dire que l'image WebP est plus petite que la version PNG, à 30,1 %. J'ai choisi ici la méthode sans perte et j'ai délibérément fixé le contrôle de qualité à 80 %. Les 20 % restants ne sont pratiquement jamais visibles, ce qui signifie que 80 % sont tout à fait suffisants pour les demandes en ligne. 

Inconvénients du format PNG

Les PNG ne conviennent pas aux photographes car ils créent un fichier image beaucoup plus volumineux. Le format PNG est surtout utilisé pour les captures d'écran, car les PC enregistrent les images au format PNG. Pourquoi ? - Parce que les captures d'écran sont souvent un mélange d'image et de texte. 

Le PNG est utilisé, par exemple, pour les images qui nécessitent un fond transparent. Cela rend le format très polyvalent et très populaire dans la conception graphique, car de nombreux éléments y sont souvent réunis.

Le PNG est disponible aux formats PNG-8 et PNG-24 et utilise une profondeur de couleur de 8 bits et un maximum de 256 couleurs. PNG-24 utilise une profondeur de couleur de 24 bits avec jusqu'à 16,7 millions de couleurs. Ainsi, le format PNG-24 est comparable au format JPEG. Continuons donc avec le format JPG :

Le format d'image JPG

En comparaison directe avec le JPG, l'image WebP est environ 25 à 35% plus petite - malgré la même qualité d'image. Il n'y a rien à dire entre les deux candidats JPG et WebP - WebP est tout simplement le meilleur choix.

jpg vs webp

Sur la base des deux images, on peut dire que l'image WebP est plus petite que la version JPG avec 24,7%. Pour la version JPG, j'ai réglé la qualité sur "High".

Le format JPG est idéal si vous pouvez vivre avec des pertes de qualité et si la netteté et les détails ne sont pas importants. Ce format est souvent utilisé pour des images colorées, car la composition du JPG permet d'afficher de nombreuses couleurs et dégradés.  

Petit indice :

L'aspect final de vos images dépend de nombreux facteurs : par exemple, la résolution de l'écran (HD, QHD, UHD/4K, 8K, etc.), les paramètres de l'écran tels que sRGB, adobeRGB, le mode d'affichage de vos moniteurs et l'appareil que vous utilisez pour visualiser les images. Récemment, j'ai moi-même eu le problème que mes photos avaient un aspect différent sur mon écran et sur le site web. 

A mon avis : Aujourd'hui, tous les navigateurs sont en mode sRGB. Par exemple, si vous créez quelque chose pour le web dans Photoshop, réglez votre moniteur sur sRGB. Vous pouvez alors voir directement à quoi il ressemble lorsqu'il atterrit sur votre site. 🙂 

Espace couleur/profondeur

C'est là que les choses se compliquent un peu. WebP est basé sur l'algorithme de compression vidéo avec perte VP8 avec une compression allant jusqu'à 24 bits et une taille maximale de 16 383 x 16 383 pixels Il a donc toujours une profondeur de couleur de 24 bits, tout comme le JPG. La profondeur de couleur du PNG va de 8 à 48 bits, ce qui n'a pas beaucoup de sens en raison de la taille importante du fichier, 

En tant que flux binaire VP8, la génération sans perte d'images WebP ne fonctionne qu'avec le format d'image 8 bits - également connu sous le nom de format d'image YUV420.

Le format YUV420 s'est effiloché : Voyons d'abord comment un moniteur affiche une image par défaut : Chaque couleur peut être représentée par trois couleurs (le modèle dit RGB), c'est-à-dire le rouge, le vert et le bleu.

Chaque couleur individuellement - c'est-à-dire le rouge, le vert et le bleu - peut être enregistrée sur le PC en 1 octet (8 bits). Ainsi, un pixel d'un moniteur a 3 octets (chaque octet contient des informations sur la couleur respective rouge, verte et bleue)

L'œil humain est très sensible à la luminosité, mais moins sensible aux couleurs et à leurs dégradés. Ainsi, la désignation YUV est composée de Y = luminance (luminosité) et U et V moyenne de chrominance (couleur). YUV est donc comme RGB, qui est utilisé pour représenter une couleur.

Mais pourquoi en avons-nous besoin ?

Parce que la taille du fichier est importante. Dans le modèle RGB, nous devons utiliser 3 octets (24 bits) pour stocker une couleur. Avec YUV, en revanche, la taille est divisée par deux en raison de la manière dont elle est calculée puis stockée. C'est compliqué, mais je pense qu'à ce stade, les informations sont suffisantes et apportent une certaine clarté.

Soutien/assistance

Les statistiques montrent quel navigateur est le plus fréquemment utilisé par quel "terminal" tel que PC, tablette ou smartphone. Comme le WebP n'est pas pris en charge par tous les navigateurs, vous devez garder cela à l'esprit.

Bien sûr, il est évident que les "appareils mobiles" sont davantage mis en avant, ce qui explique également pourquoi le smartphone bénéficie d'un meilleur soutien pour le WebP. Assurez-vous donc de vérifier vos statistiques d'utilisation et de voir de quel navigateur et de quel appareil vous obtenez le plus de visiteurs.

La liste suivante indique quelles versions de navigateur bénéficient déjà de WebP sur quels terminaux. 

Support actuel du Desktop Browser

- Firefox à partir de la version 65.x
- Opéra à partir de la version 39.x
- Chrome à partir de la version 23.x
- Bord de la version 17.x
- Internet Explorer à partir de la version 11.x

Un soutien actualisé pour les appareils mobiles

- Navigateur Android à partir de la version 5.6 (Chromium 67)
- Android Chrome à partir de la version 73.x
- Opera Mini toutes les versions
- Opera Mobile à partir de la version 12.x
- Android Firefox à partir de la version 66.x
- Internet Explorer Mobile à partir de la version 11.x

WebP VP8 (Images animées)

- Google Chrome (Desktop et Android) à partir de la version 32.x
- Microsoft Edge à partir de la version 18.x
- Firefox à partir de la version 65.x
- Opéra à partir de la version 19.x

Je n'ai pas trouvé de support WebP pour d'autres navigateurs et appareils pour le moment.

Quelles sont les conditions requises pour le WebP WordPress ?

Jusqu'à présent, aucun, mais... La mauvaise nouvelle est qu'il n'existe WordPress actuellement aucun support indépendant pour les images WebP. Nous allons donc maintenant passer au point suivant.

Possibilités d'intégration de WebP dans WordPress :

  1. Plugin Utilisation sur

La Plugins ShortPixel (version gratuite), Optimus (version payante) ou l'optimiseur d'images EWWW (version gratuite) sont adaptés à cette fin. 

Optimus:

Optimus WebP

Malheureusement, WebP n'est supporté que par la version payante d'Optimus. Comme la mise en cache côté serveur est RAIDBOXES déjà intégrée, vous n'avez pas besoin d'un "Cache Enabler"Plugin, comme le recommande ici Optimus.

ShortPixel:

Pixel court WebP

Dans ShortPixel vous pouvez cocher la case comme indiqué ci-dessus. Mais avant cela, je réinitialise toutes les images que vous avez à l'original et je les Plugin optimise toutes en même temps avec le. Vous devriez alors voir en même temps que vous avez différents types de fichiers de vos photos.

Optimiseur d'images EWWW:

Ewww Image Optimizer WebP
  1. WordPress Ajustez le .htaccess de

Certains hébergeurs ont la possibilité de modifier quelque chose dans le fichier .htaccess, délibérément bloqué pour des raisons de sécurité. Si vous êtes hébergé sur un serveur Apache, vous pouvez effectuer les ajustements suivants :


    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ 1.webp
[T=image/webp,E=accepter:1]



    En-tête Appendice Varier Accepter env=REDIRECT_accept

AjouterType image/webp .webp

Et sur un nginx :

# http config block
map $http_accept $webp_ext {
par défaut "" ;
"~*webp" ".webp"
}
# bloc de configuration du serveur
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept ;
try_files $uri$webp_ext $uri =404 ;

D'RAIDBOXES ailleurs, cette règle de réécriture est déjà soutenue par nous. 

Où puis-je la trouver ?

Le fichier se trouve sur le serveur web sur lequel il a été WordPress installé. Le répertoire racine est le répertoire principal où se trouve le domaine chez l'hébergeur. Si vous ne pouvez pas le voir, vous devez régler le "masque de fichier distant" sur -la afin de pouvoir voir les fichiers cachés. Bien entendu, cela nécessite que vous ayez des droits d'accès ou que vous l'hébergez vous-même et que vous utilisiez un programme FTP comme FileZilla. 

Il existe une troisième façon - un peu compliquée - d'ajouter quelque chose à votre WordPress fichierThemes function.php afin de pouvoir télécharger des images au format WebP par défaut. Vous pouvez découvrir comment cela fonctionne, par exemple dans cet article Lisez.

Conclusion

Malheureusement, le WebP n'est pas encore courant comme le JPG et le PNG, mais il deviendra certainement plus important à l'avenir. Enfin, WebP peut être utilisé pour améliorer les performances de votre site et donc l'expérience et la satisfaction des visiteurs de votre site.

Plugin Oui | non ?

Il en existe de très bonnesPlugins, qui vous permettent de vous décharger du travail de votre support WebP et d'optimiser vos images. J'ai personnellement utilisé l'Plugin Optimus pour cela. Sinon, il serait bon d'envisager de l'inclure dans le site sous forme de code, d'autant plus que vous vous épargneriez un Plugin de plus. Mais dans l'ensemble, vous êtes bien conseillé d'en avoir un Plugin pour cette affaire.

À qui s'adresse WebP ?

En principe, le WebP a un sens pour chaque site. Ce format est particulièrement adapté aux sites web comportant de nombreuses images. Par exemple, pour les photographes qui veulent maintenir la qualité de leurs images au plus haut niveau possible, mais qui accordent une grande importance à un temps de chargement rapide. Mais aussi d'autres WordPress utilisateurs, comme les créatifs ou ceux qui ont quelque chose à montrer sous forme d'images, doivent tout faire pour rendre l'expérience de leurs clients et fans potentiels aussi agréable que possible.

J'espère que vous avez apprécié l'article et j'attends avec impatience votre avis ! 

Stefan est un blogueur en herbe avec son site web aspiring-artist.com Il blogue sur l'art, réalise WordPress des sites pour d'autres artistes en herbe et est consultant. Parce que les artistes ont également besoin d'un site web individuel et d'un logo et d'une marque significatifs. - Aspirer à la grandeur

Articles connexes

Commentaires sur cet article

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .