Comment optimiser les images dans Elementor : améliorer la vitesse de chargement et les résultats SEO

Dans un site WordPress piloté par Elementor, l'optimisation des images peut améliorer la vitesse de chargement et l'expérience utilisateur. En optimisant correctement lestaille de l'imageSélectionFormat adaptéetFichiers images compressésainsi queActiver le chargement différérépondre en chantantRéseau de diffusion de contenu (CDN)Les images sont optimisées pour Elementor, ce qui permet aux pages de se charger plus rapidement, d'avoir un meilleur aspect visuel et d'améliorer les classements SEO. Ce guide détaille tous les aspects de l'optimisation des images pour Elementor, y compris les tailles d'image idéales et les actions étape par étape.

1) Pourquoi faut-il optimiser les images ?

• Amélioration de la vitesse de chargementLes images optimisées réduisent les temps de chargement et rendent les pages plus réactives, en particulier pour les utilisateurs d'appareils mobiles.
• Améliorer le référencementLes moteurs de recherche favorisent les sites web qui se chargent rapidement et les images qui sont optimisées pour un bon classement dans les moteurs de recherche.
• Améliorer l'expérience de l'utilisateurLes images de haute qualité qui se chargent rapidement sont efficaces pour attirer les visiteurs et les retenir plus longtemps.
• Réduction de l'utilisation de la bande passanteLes fichiers images optimisés sont plus petits, ce qui permet d'économiser la bande passante du site web.

2. taille idéale de l'image Elementor

Lors de l'optimisation des images, il est particulièrement important de choisir la bonne taille d'image. Vous trouverez ci-dessous les paramètres de taille d'image recommandés par Elementor pour s'adapter aux différentes exigences des appareils :

largeur totaleimage de fond

• bureauRésolution des problèmes : 1920 x 1080 pixels
  • La largeur recommandée est de 1920 px, la hauteur peut être ajustée en fonction des exigences de conception, mais elle est généralement de l'ordre de 1080 px.
  • Les images de bannière pleine largeur courantes ont une largeur de 1920 px et une hauteur de 400 à 600 px.
• plateau1280 x 800 pixels
• téléphones mobiles: 800 x 600 pixels

Image du héros(Images pour attirer l'attention des visiteurs)

• bureau1600 x 900 pixels
• plateau: 1200 x 675 pixels
• téléphones mobiles: 800 x 450 pixels

Images de contenu et vignettes

• Image en vedette de l'article de blog: 1200 x 628 pixels
• archives d'images: 800 x 600 pixels
  • Trouvez-le."mettre en place", puis cliquez sur "les médias, en particulier les médias d'information"Options, trouver"taille moyenne"et"grande taille"Le réglage des options vous permet de définir la largeur de l'une d'entre elles. 800 pixels. hauteurs 600 pixels..
• vignette: 150 x 150 pixels
  • Trouvez-le."mettre en place", puis cliquez sur "les médias, en particulier les médias d'informationL'option " " est activée.
• Icônes et petits graphiques50 x 50 pixels à 100 x 100 pixels

3. les bonnes pratiques en matière d'optimisation des images

Choisir le bon format

• JPEGPour les photographies multicolores et la plupart des images de bonne qualité et de petite taille.
• PNGLa Commission européenne a décidé de mettre en place un programme d'aide à l'emploi pour les personnes qui ont besoin d'une aide financière.Fond transparentpeut-êtreimage moins coloréemais le fichier est plus volumineux.
• WebPLe format JPEG : Il permet une compression plus élevée que les formats JPEG et PNG, en équilibrant la qualité et la taille du fichier.

Utilisation d'images réactives

Elementor prend en charge les images réactives et peutCharger des images de différentes tailles en fonction de l'appareil. Veillez à ce que les images téléchargées soient de haute qualité et adaptables à différentes tailles d'appareils.

image comprimée

Réduisez la taille du fichier à l'aide d'outils de compression. Les outils suivants sont recommandés :

• Outils en ligne: :TinyPNGetJPEG-Optimizer
• Plugin WordPress: :SmushetOptimiseur d'images EWWWetShortPixel

Activer le chargement différé

Le chargement paresseux retarde le chargement des images dans les fenêtres non visuelles, réduisant ainsi le temps de chargement initial de la page.

• Plug-ins recommandés: :Plugin LazyLoad Par WP Rocketeta3 Charge paresseuse
• Elementor Vous pouvez vous rendre à l'adresse suivante Elementor → Paramètres et activationChargement paresseux des images d'arrière-plan(Performance),Icônes de police en ligne(Caractéristiques)

Optimiser le texte alternatif

L'ajout d'un texte alternatif descriptif aux images aide les moteurs de recherche à comprendre le contenu et améliore l'accessibilité.

Utiliser un CDN

Distribuez le contenu des images sur des serveurs plus proches des visiteurs via un CDN tel que Cloudflare, MaxCDN ou Amazon CloudFront pour un chargement plus rapide.

4. guide pas à pas de l'optimisation des images Elementor

Étape 1 : Préparer l'image

• Sélectionnez le formatLes images peuvent être de différents formats : assurez-vous de choisir le bon format (JPEG, PNG, WebP).
• redimensionnerAjustez l'image à la taille recommandée à l'aide d'outils tels que Photoshop ou GIMP.

Étape 2 : Compression de l'image

• Compression en ligneTéléchargez l'image vers un outil en ligne tel que TinyPNG ou JPEG-Optimizer et téléchargez l'image compressée.
• Compression des pluginsPour cela, installez et utilisez des plugins tels que Smush ou ShortPixel dans votre tableau de bord WordPress.

Étape 3 : Télécharger les images sur WordPress

• Naviguez vers "les médias, en particulier les médias d'information > Ajout de nouveaux fichiers multimédias".
• Téléchargez des images optimisées dans la bibliothèque de médias de WordPress....

Étape 4 : Insérer des images dans Elementor

• Modifier des pages avec Elementor: Accédez à la page ou à l'article et cliquez sur ".Utilisation de l'éditeur Elementor".
• Ajouter un widget d'imagePour plus d'informations, consultez le site web de la Commission européenne : Faites glisser et déposez le widget image à l'endroit souhaité sur la page.
• Sélectionnez l'image et réglez: Sélectionnez une image dans la bibliothèque multimédia, définissez la taille de l'image et ajoutez un texte alternatif.

Étape 5 : Activer le chargement différé

• Installation du plugin de chargement différéInstallation du plugin Lazy Load ou a3 Lazy Load pour WP Rocket.
• Configuration du chargement différéPour plus d'informations, veuillez consulter le site web de la Commission européenne : Ajustez les paramètres du plugin pour activer la fonction de chargement différé des images.

Étape 6 : Utilisation d'un CDN

• Sélectionnez le service CDNPour cela, vous devez vous inscrire à un service CDN tel que Cloudflare ou MaxCDN.
• CDN intégréPour cela, utilisez le plugin CDN Enabler et suivez les instructions pour intégrer le CDN à WordPress.

résumés

L'optimisation des images sur un site WordPress propulsé par Elementor améliore la vitesse de chargement, l'expérience utilisateur et le classement SEO. Redimensionner correctement les images, choisir le bon format (par exemple JPEG, PNG ou WebP), compresser la taille des fichiers, activer le Lazy Loading et incorporer un CDN pour distribuer le contenu des images plus près du serveur de l'utilisateur peut réduire considérablement les temps de chargement, économiser de la bande passante et améliorer l'impact visuel global. En particulier, l'optimisation des grandes images, des images vedettes et des vignettes peut améliorer l'expérience de l'utilisateur et la convivialité pour les moteurs de recherche.