web-dev-qa-db-fra.com

Servez les images au format nouvelle génération

Mon classement de Google Page Speed ​​insights est sévèrement pénalisé pour les raisons suivantes:

"Servez les images au format nouvelle génération" plus d'informations sur la page d'aide de Google ici .

Cependant, selon this , this et this ces formats sont pris en charge par très peu de navigateurs.

Que faites-vous dans ce scénario? Quoi 

imageperformancewebjpegjpeg2000
3
Peter Crawfie

Vous pouvez utiliser l'élément <picture> pour transmettre une image WebP aux utilisateurs dont le navigateur le prend en charge, en passant par un JPEG ou un PNG pour ceux qui ne le supportent pas. L'avantage d'utiliser l'élément <picture> plutôt que d'autres méthodes de secours est que les navigateurs qui ne le prennent pas en charge retomberont sur n'importe quelle source définie dans la balise <img>.

<picture>
  <source srcset="img/yourImage.webp" type="image/webp">
  <source srcset="img/yourImage.jpg" type="image/jpeg"> 
  <img src="img/yourImage.jpg" alt="Your image">
</picture>

Voici une méthode pour convertir les images source en WebP .

Si vous utilisez WordPress, certains plug-ins généreront automatiquement des images WebP à partir de votre bibliothèque multimédia et comprendront une fonctionnalité de secours. Le seul que j’ai utilisé est WebP Express, mais il m’a servi assez bien lorsqu'un client a été alarmé par le fait que leur score 100/100 PageSpeed ​​Insight avait chuté de 30 en une nuit avec le déploiement du phare.

Cela semble être un autre moyen pour Google de faire appel à une autre technologie propriétaire, mais la compression WebP est assez impressionnante par rapport aux autres formats de nouvelle génération .

3
ColossalYouth

Le moyen le plus simple de surmonter cette erreur consiste à convertir vos images JPG ou PNG dans l’un des formats optimisés tels que WebP. 

Vous pouvez le faire soit en convertissant les images au moment de l'exécution, en gérant les demandes en une image et en les convertissant. Suivez ce didacticiel pour savoir comment faire: https://www.digitalocean.com/community/ tutoriels/comment-créer-et-servir-webp-images-à-accélérer-votre-site-Web Ou si vos images ne sont pas dynamiques, il est donc préférable de le faire à la conception en convertissant images au format WebP, il existe de nombreux convertisseurs en ligne tels que: https://webp.enozom.com/

1
Hazem Torab

Jusqu'à ce que les principaux navigateurs prennent en charge ces formats next-gen, il est probablement préférable de continuer à utiliser JPG/PNG, car ils sont largement pris en charge. La plupart des sites Web utilisent bien JPG & PNG et il faudra un certain temps pour que les navigateurs soient compatibles avec la technologie de nouvelle génération.

1
Dominus Vilicus