TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

134

Google est le moteur de recherche dominant parmi les utilisateurs anglophones. De ce fait, les propriétaires de sites WordPress suivent sérieusement les directives et les opportunités présentées dans l’outil Google PageSpeed ​​Insights. L’un des messages d’avertissement les plus répandus dans l’outil PageSpeed ​​consiste à corriger les images servies au format traditionnel vers les images de serveur aux formats de nouvelle génération. Dans cet article, nous allons vous expliquer comment corriger cet avertissement dans les sites WordPress pour optimiser vos images.

Connexe : Comment corriger le changement de mise en page cumulatif dans WordPress ?

Avertissement dans Google PageSpeed ​​Insights

Accédez à la page de l’outil Google PageSpeed ​​Insights et testez l’URL de votre page Web. Vous devriez voir une opportunité affichant « Images de serveur dans des formats de nouvelle génération » comme ci-dessous. Vous pouvez voir les économies de taille potentielles pour chaque image et les économies estimées sur le temps de chargement des pages.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

PageSpeed ​​Warning Servir les images dans les formats de nouvelle génération

Remarque : Google dit qu’il s’agit d’une opportunité et que cela n’affectera pas le score de performance de PageSpeed. Cependant, la suppression de cet avertissement augmente considérablement le score en réalité.

Formats d’image de nouvelle génération

Avant de continuer, vous devez comprendre les formats d’image. Il existe trois formats d’image traditionnels et populaires :

  • Joint Photography Experts Group (JPEG ou JPG) – prend en charge la compression avec perte
  • Portable Network Graphics (PNG) – prend en charge la compression transparente et sans perte et le remplacement du GIF
  • Graphics Interchange Format (GIF) – un format bitmap prend en charge le bouclage de plusieurs images.

Désormais, de nouveaux formats de nouvelle génération sont recommandés pour les sites Web :

  • WebP – développé par Google pour une meilleure compression
  • JPEG 2000 – amélioration par rapport aux normes JPEG en matière de compression d’image
  • JPEG XR – Format de plage étendue JPEG développé par Microsoft

Vous pouvez consulter la galerie de Google pour comparer visuellement différentes images. Les formats de nouvelle génération permettent de réduire considérablement la taille des images, augmentant ainsi la vitesse de chargement des pages. Selon Wikipedia, 92% des navigateurs prennent en charge le format WebP, ce qui en fait un remplacement prometteur pour le format traditionnel. Par conséquent, vous devez commencer à utiliser le format WebP pour vous débarrasser de l’avertissement de diffusion d’images dans les formats de nouvelle génération dans l’outil PageSpeed ​​Insights.

Conversion de formats d’images

Bien que Google pousse le format d’image léger, ils ne sont pas très populaires auprès des développeurs d’applications. De nombreuses applications ne prennent pas en charge la création d’images dans ces formats. Par exemple, SnagIt – l’outil de capture d’écran populaire pour les blogueurs – n’offre aucune option pour créer des images au format de nouvelle génération. Vous pouvez créer au format traditionnel comme PNG ou JPEG.

Maintenant qu’il est difficile de trouver une application pour créer des formats d’image de nouvelle génération. Au lieu de cela, vous pouvez télécharger des images PNG ou JPEG sur votre site WordPress et utiliser un plugin pour les convertir dans l’un des formats d’image de nouvelle génération. C’est un moyen efficace et facile car vous n’avez pas besoin de changer votre modèle de travail.

Étant donné que Google est le propriétaire propriétaire du format WebP, de nombreux plugins prennent en charge la conversion d’images traditionnelles au format WebP. Ici, nous expliquerons comment convertir vos images en WebP et corriger « servir des images au format de nouvelle génération » dans l’outil PageSpeed ​​Insights.

Plugins WebP pour WordPress

Il existe de nombreux plugins populaires disponibles pour la conversion WebP.

Optimiseur SG pour SiteGround

Si vous hébergez sur SiteGround, la meilleure option est d’utiliser le plugin SG Optimizer. Cela fonctionnera immédiatement pour convertir et servir des images WebP à partir de votre serveur. Vous pouvez choisir le niveau de compression pour contrôler la qualité des images converties tout en conservant toutes les images originales. Consultez notre article précédent sur la façon de servir des images WebP dans SiteGround.

  • Vous pouvez simplement activer l’option « Générer des copies WebP de nouvelles images » dans la section « SG Optimizer > Optimisation des images ».
  • Cliquez sur le bouton « Générer en bloc des fichiers WebP » pour générer des images WebP pour toutes vos images existantes avec un niveau de compression avec perte sans perte ou prédéfini.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Option WebP dans le plug-in SG Optimizer

Offre SEO : Optimisez votre site avec Semrush Pro spécial essai gratuit de 14 jours.

Smush Pro

Smush est un autre plugin de compression d’image populaire avec plus d’un million d’installations actives. Cependant, WebP est une option premium dans ce plugin et vous devez payer un abonnement de 5 $ par mois (plan annuel) pour utiliser cette fonctionnalité.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Option Smush Pro WebP

Optimisation automatique

Ce plugin offre une optimisation d’image à la volée avec conversion WebP à l’aide du service ShortPixel CDN. Bien que ce soit une bonne option pour combiner CDN et WebP, il y a un hic. Vous avez une limite de service jusqu’à 100 images par mois gratuitement. Si vous avez besoin de plus, vous devez payer 3,99 $ par mois pour démarrer le plan premium pour un maximum de 5 000 images. Ce sera une option coûteuse lorsque vous souhaitez compresser et diffuser un grand nombre d’images. Si vous souhaitez tester Autoptimize, après avoir installé et activé le plugin, rendez-vous dans la section "Paramètres > Autoptimize > Images".

  • Cochez la case «Optimiser les images ».
  • Choisissez le niveau d’optimisation de l’image comme brillant, sans perte ou avec perte.
  • Cochez la case qui dit « Charger WebP ou AVIF dans les navigateurs pris en charge ? »
  • Activer « Images à chargement différé ? » case à cocher.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Paramètres WebP dans le plug-in d’optimisation automatique

Cliquez sur le bouton « Enregistrer les modifications » et testez l’outil PageSpeed ​​Insights de votre site. Vous devriez voir l’avertissement « Servir des images dans des formats de nouvelle génération » a disparu maintenant. Cependant, vous commencerez à voir un message d’avertissement dans le panneau d’administration WordPress indiquant que votre quota ShortPixel est utilisé et vous demandant de mettre à niveau le plan.

Plugins WebP gratuits

Heureusement, il existe peu de plugins gratuits disponibles comme WebP Express et WebP Converter for Media. Dans cet article, nous expliquerons le processus avec le plugin WebP Converter for Media.

Installer WebP Converter for Media Plugin

Connectez-vous à votre panneau d’administration WordPress et accédez à la section « Plugins > Ajouter un nouveau ». Tapez « webp » dans la zone de recherche pour filtrer les résultats et découvrir le plug-in WebP Converter for Media. Cliquez sur le bouton «Installer» puis activez le plugin sur votre site.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Installer WebP Converter for Media Plugin

Activer la conversion d’images WebP

Après avoir activé le plugin, vous verrez un message comme ci-dessous et cliquez sur le bouton «Accélérer mon site Web ». Alternativement, vous pouvez aller dans le menu "Paramètres > Convertisseur WebP" pour accéder à la page des paramètres du plugin.

  • Sélectionnez le mode de chargement d’image comme «via .htaccess (recommandé) ».
  • Choisissez JPEG, JPG et PNG pour les extensions de fichiers prises en charge.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Mode de chargement d’image et extensions de fichier

  • Pour la liste des répertoires pris en charge, choisissez l’option "/uploads". Assurez-vous que vous servez les images du dossier de téléchargement par défaut de WordPress. Si vous avez déplacé vos images vers le sousdomaine, sélectionnez ce répertoire pour que le plugin fonctionne correctement.
  • Pour la méthode de conversion, choisissez l’option "GD (recommandé)".
  • Enfin, choisissez la qualité d’image selon vos besoins. Le plugin utilise 85% comme valeur de qualité par défaut pour la conversion WebP.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Conversion et qualité d’annuaire

Le plugin utilise également des fonctionnalités supplémentaires pour une optimisation supplémentaire de l’image. Vous pouvez laisser les valeurs par défaut telles quelles ou vérifier et activer/désactiver les valeurs nécessaires à vos besoins. Par exemple, vous pouvez choisir la mise en cache du navigateur pour les fichiers WebP que nous recommandons et choisir la suppression des fichiers WebP plus volumineux. Cliquez sur le bouton « Enregistrer les modifications » après avoir sélectionné toutes vos options.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Fonctionnalités supplémentaires

Régénérer les images

Le plugin WebP Converter for Media offre également une option pour régénérer toutes vos images pour les convertir au format WebP. Ceci est utile si vous avez téléchargé des images sur le site avant d’installer le plugin.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Régénérer les images WebP

Vérifier dans Google Chrome

Après avoir régénéré toutes les images existantes, vous pouvez ouvrir le site Web dans Google Chrome et vérifier. Vous devriez voir que les images WebP sont servies à partir de la section des outils de développement. Vous pouvez consulter cet article sur la façon de vérifier que les images WebP sont servies sur le navigateur Chrome. Si vous avez activé la mise en cache du navigateur, copiez simplement l’URL de l’image et voyez que le nom du fichier contient .webp.

Problème de prise en charge du serveur

Malheureusement, tous les serveurs Web ne prennent pas en charge la conversion WebP. Vous pouvez le trouver si la section "Méthode de conversion" est désactivée dans les paramètres du plugin. Votre serveur doit avoir pris en charge la bibliothèque GD ou Imagick installée afin de prendre en charge le format WebP. Sinon, le plugin affichera une erreur et vous ne devriez pas pouvoir utiliser la conversion WebP. Pour autant que nous ayons testé, les serveurs d’ hébergement partagé Bluehost ne prennent pas en charge la conversion WebP et vous verrez un message d’erreur comme ci-dessous.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Erreur de configuration du serveur pour WebP

Dans ce cas, vous devez discuter avec l’hôte pour activer le support nécessaire pour les images WebP.

Activer la mise en cache des images WebP à l’aide de WP Rocket

Comme mentionné, le plugin WebP Converter for Media offre une option pour activer la mise en cache du navigateur pour les images WebP. Cela vous aidera à accélérer le chargement de la page en demandant aux navigateurs de mettre en cache les images lorsque l’utilisateur ouvre à nouveau les mêmes images. Cependant, cette option n’est pas disponible avec de nombreux autres plugins et vous devez la combiner avec les paramètres de votre plugin de mise en cache. Par exemple, si vous utilisez WP Rocket, assurez-vous d’activer la case à cocher pour la mise en cache du navigateur dans la section "Images". Cela permettra au plugin de mettre en cache les images WebP et de les diffuser sur les navigateurs pris en charge.

Comment résoudre le problème des images de service dans les formats de nouvelle génération dans WordPress ?

Activer la prise en charge de WebP dans WP Rocket

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails