Comment optimiser les images dans Elementor

Une photo peut paraître petite dans Elementor tout en représentant un téléchargement volumineux. L’éditeur gère son apparence ; WordPress, l’hébergement et les extensions d’optimisation contribuent au choix du fichier reçu par les visiteurs. Ce guide explique leur interaction pour les widgets Image, les arrière-plans de conteneurs et la première grande image de la page.

Choisir la bonne résolution dans les widgets Image

Sélectionnez un widget Image et ouvrez l’onglet Content. Repérez Image Resolution, parfois nommé Image Size selon le widget ou la version. Ce réglage sélectionne une taille WordPress, comme Medium, Large ou Full. Width et Max Width déterminent séparément l’espace occupé dans la mise en page. La documentation du widget Image présente ces commandes.

Full ne signifie pas simplement « remplir la colonne ». Ce choix utilise la pièce jointe en pleine taille comme source. Pour une image volumineuse, WordPress peut déjà avoir créé une version pleine taille réduite : il ne s’agit donc pas toujours de l’original intact de l’appareil photo. La référence WordPress sur la génération des tailles d’image explique ce fonctionnement.

Le navigateur intervient aussi : si l’image publiée comporte srcset et sizes, il peut choisir parmi les fichiers disponibles selon la mise en page, la densité de pixels et ses propres décisions de chargement. Full ne garantit donc pas le téléchargement du plus grand fichier pour chaque visiteur. Une résolution adaptée et un fichier source raisonnablement dimensionné restent toutefois préférables à une confiance exclusive dans l’automatisation.

Ces dimensions sont des exemples, pas des exigences d’Elementor. Les tailles enregistrées dans WordPress dépendent des réglages, du thème et des extensions. La hauteur doit aussi permettre le recadrage prévu. Doubler la largeur affichée peut être utile sur un écran à forte densité, mais reste un compromis entre qualité et poids, sans obligation d’exporter toutes les images aux dimensions doubles.

Une résolution Custom peut servir lorsque les tailles standard ne conviennent pas. Vérifiez le recadrage et la présence de versions adaptées aux différents écrans sur la page publiée. Custom n’améliore pas systématiquement la diffusion et ne désactive pas non plus toujours les images responsives.

Modifier Style → Width ou Max Width ne redimensionne ni ne recompresse le fichier enregistré. Le balisage responsive peut aider le navigateur à demander une version plus petite, mais réduire la largeur visible ne prouve pas, à lui seul, une baisse des données téléchargées.

Adapter les arrière-plans aux mobiles

Une image ajoutée via Style → Background d’un conteneur ou d’une section devient généralement un arrière-plan CSS. Contrairement à une image HTML, elle ne possède pas d’attributs srcset ou sizes. Sans autre système proposant des variantes, un téléphone peut donc charger le même fond qu’un ordinateur.

Déterminez d’abord si l’image doit être un arrière-plan. Une texture décorative ou une image d’ambiance peut convenir. Une photo de produit, un schéma ou une image essentielle au contenu fonctionne généralement mieux dans un widget Image, avec un texte alternatif et des versions responsives.

Si le fond nécessite une composition différente sur mobile :

1. Sélectionnez le conteneur ou la section et ouvrez Style → Background.
2. Passez au point de rupture mobile avec la commande responsive de l’image de fond, si votre éditeur la propose.
3. Choisissez une copie mobile recadrée aux proportions du conteneur. Une zone d’en-tête haute peut demander un cadrage vertical ; une bannière basse peut rester horizontale.
4. Choisissez Cover pour remplir la zone sans déformer l’image. Cover conserve les proportions en rognant ce qui dépasse du conteneur.
5. Réglez la position pour garder le sujet visible et prévisualisez aussi les largeurs proches du point de rupture.

Vérifiez la hauteur du conteneur, le contraste du texte et le fichier demandé sur la page mobile publiée. Un autre recadrage améliore parfois la composition, mais ne réduit le téléchargement que si la version mobile remplace réellement le grand fichier. Masquer une section réservée aux ordinateurs ne garantit pas que ses images ne seront jamais demandées.

Charger l’image principale sans délai inutile

Largest Contentful Paint (LCP) mesure le moment où le plus grand élément visible apparaît dans la vue initiale. Il peut s’agir d’une image principale, d’un arrière-plan ou d’un bloc de texte. Identifiez l’élément LCP réel dans un rapport de performances avant de modifier les priorités.

Le chargement différé, ou lazy loading, convient aux images plus bas dans la page. Il peut toutefois retarder l’image principale, car le navigateur attend de déterminer quand elle sera nécessaire. Le guide Google d’optimisation du LCP recommande de rendre l’image LCP détectable rapidement et de ne pas différer son chargement.

• Commencez par l’automatisation d’Elementor : Activez Optimized Image Loading dans les réglages de performances décrits plus bas, puis vérifiez le résultat publié.
• Vérifiez les autres systèmes de chargement différé : Une extension de cache ou d’optimisation peut modifier le résultat. Si elle retarde l’image principale, ajoutez l’image ou l’élément aux exclusions de cette extension.
• Distinguez chargement immédiat et priorité : Une image HTML sans chargement différé peut se charger normalement. loading="eager" demande explicitement ce comportement ; fetchpriority="high" indique séparément une priorité. Donner une priorité élevée à toutes les images annule l’intérêt du réglage.
• Examinez les arrière-plans principaux séparément : Ils n’utilisent pas les attributs de chargement d’un élément image. Si le fond est l’élément LCP et que sa requête commence tard, vérifiez quand le CSS ou le script de chargement différé expose son URL. Réduire ses dimensions ne corrige pas ce délai à lui seul.
• Réévaluez les diaporamas d’en-tête : Une seule image fixe est plus facile à prioriser. Si vous gardez un diaporama, vérifiez si les diapositives masquées concurrencent la première image visible.

Réserver l’espace des images avant leur chargement

Cumulative Layout Shift (CLS) mesure les déplacements inattendus du contenu visible. Si le navigateur ignore la place nécessaire à une image, textes et boutons risquent de bouger lorsqu’elle apparaît. Les dimensions permettent de réserver cet espace.

1. Conservez les attributs de largeur et de hauteur : Le HTML produit habituellement par WordPress les inclut. Ils indiquent les proportions et peuvent fonctionner avec du CSS responsive.
2. Définissez le cadre : Pour des cartes recadrées de façon cohérente, réservez la place avec un rapport d’aspect adapté ou des dimensions explicites. Utilisez les réglages du widget ou la propriété CSS aspect-ratio si nécessaire. Pour remplir un cadre fixe, object-fit: cover préserve les proportions lors du recadrage.
3. Testez les modèles avec différents contenus : Dans Theme Builder ou Loop Grid, prévisualisez des articles avec une image mise en avant horizontale, verticale ou absente. Prévoyez une zone d’image stable et une image de remplacement si nécessaire.

Un arrière-plan CSS ne donne pas de hauteur naturelle au conteneur. L’espace dépend de la mise en page, du contenu, des marges internes ou de la hauteur minimale. Vérifiez ces réglages à chaque point de rupture plutôt que d’attendre du fichier de fond qu’il maintienne la section ouverte.

Vérifier séparément galeries, carrousels et visionneuses

Une galerie doit offrir une vue d’ensemble compacte puis assez de détails lorsqu’on ouvre une image. Ces deux usages peuvent nécessiter des fichiers différents.

• Choisissez la résolution selon la diapositive ou la carte visible : Un carrousel affichant quatre petites images ne nécessite pas la résolution d’une image unique pleine largeur. Vérifiez le mobile aussi : moins de diapositives simultanées peut rendre chacune plus large.
• Séparez aperçu et agrandissement : Choisissez une résolution adaptée à la grille, puis configurez les liens Media File et Lightbox si les visiteurs doivent agrandir les images. Optimisez aussi le grand fichier. Vérifiez les requêtes avant et après l’ouverture, car le préchargement peut varier.
• Vérifiez le modèle de boucle : Pour les cartes d’archives et Loop Grid, réglez le widget Featured Image à l’intérieur de l’élément de boucle. Une image trop grande répétée peut alourdir toute l’archive, même si les cartes semblent petites.

Choisir un format adapté à l’image

Comparez les formats aux mêmes dimensions et à une qualité que vous accepteriez de publier. Aucun pourcentage d’économie fixe ne s’applique à toutes les images.

• WebP : Un bon point de départ pour les photos et de nombreuses illustrations. Il gère compression avec pertes, sans perte et transparence. Essayez JPG vers WebP ou PNG vers WebP, puis examinez détails et contours.
• JPG : Pratique pour les photos lorsqu’une autre étape du travail l’exige. Réglez la qualité en comparant les résultats, sans considérer un pourcentage comme universel.
• PNG : Utile pour les graphiques sans perte, captures d’écran et usages qui l’exigent. La transparence seule ne justifie pas PNG plutôt que WebP. Les photos PNG sont souvent bien plus lourdes qu’un export avec pertes adapté.
• AVIF : À comparer pour les photos si votre installation WordPress, votre hébergement et votre système d’optimisation le prennent en charge. Testez traitement après envoi et diffusion publiée avant de convertir toute la bibliothèque.
• SVG : Adapté aux logos et icônes vectoriels. Utilisez des sources fiables et suivez les consignes Elementor pour l’envoi de SVG, notamment le nettoyage des fichiers et les précautions d’envoi.

Notre guide des formats d’image pour le Web détaille les avantages et compromis.

Préparer chaque image pour son emplacement

Conservez l’original séparément et exportez une copie pour le site. La version pleine taille reste ainsi raisonnable, ce qui compte pour les arrière-plans et les images ouvertes depuis une galerie.

1. Mesurez la plus grande taille d’affichage prévue : Vérifiez ordinateur et mobile. Une image à côté du texte peut occuper toute une ligne sur tablette et devenir plus large.
2. Recadrez pour la mise en page : Supprimez l’espace inutile avec l’outil de recadrage en gardant le sujet. Laissez la place au texte éventuellement superposé.
3. Redimensionnez une copie : Comparez des dimensions adaptées avec l’outil de redimensionnement. N’agrandissez pas une petite source uniquement pour atteindre une largeur prédéfinie.
4. Compressez et examinez : Utilisez le compresseur d’images et comparez l’export à sa taille d’affichage. Une image principale de 100–200 Ko ou une image de contenu sous 100 Ko peut servir de budget initial. Détails, dimensions et poids total de la page déterminent ce qui est raisonnable.
5. Nommez et décrivez : Utilisez un nom explicite comme office-reception.webp. Donnez aux images informatives un texte alternatif qui exprime leur rôle ; les images décoratives demandent généralement un texte alternatif vide. Suivez les consignes Google pour le référencement des images sans accumuler de mots-clés dans ces champs.

Si une extension optimise de nouveau le fichier après son envoi, comparez l’image finalement servie. Des compressions avec pertes successives peuvent abîmer textures fines ou texte, même si chaque réglage semble raisonnable.

Vérifier les réglages de performances d’Elementor

La documentation actuelle place ces commandes dans le tableau de bord WordPress sous Elementor → Editor → Settings → Performance. Les anciennes installations peuvent avoir une autre structure de menus. Le guide officiel des performances distingue les onglets Performance et Features.

• Optimized Image Loading : Aide à prioriser l’image LCP probable et gère le chargement différé plus bas. Consultez le guide Elementor d’optimisation du chargement. Vérifiez le résultat, surtout si d’autres extensions modifient aussi le balisage des images.
• Lazy Load Background Images : Diffère les arrière-plans, sauf le premier selon le fonctionnement documenté. Vérifiez que le fond visible en haut de votre page réelle se charge rapidement.

Modifiez un réglage à la fois, videz les caches concernés et testez la page publiée. Ces commandes agissent sur le chargement ; elles ne remplacent ni des dimensions adaptées ni la compression des fichiers.

Vérifier la page publiée

Commencez par l’apparence en étant déconnecté : recadrage correct, texte lisible, mise en page stable pendant l’apparition des images ? Examinez ensuite les fichiers si une image reste lourde, floue ou lente.

1. Ouvrez la page publiée dans une fenêtre privée. Dans les outils de développement, choisissez Network, filtrez sur Img et activez Disable cache tant que les outils restent ouverts.
2. Rechargez et triez les requêtes d’images par volume transféré. Commencez par les plus gros fichiers et les images visibles immédiatement.
3. Examinez l’URL et l’aperçu de la requête pour trouver les dimensions réelles. Comparez-les à l’affichage et à la densité de pixels. Un fichier de 2400 pixels dans une carte de 350 pixels mérite vérification ; 700 pixels peut convenir sur un écran 2×.
4. Pour une image HTML, examinez srcset et sizes si le navigateur choisit toujours une version surdimensionnée. Vérifiez les attributs de chargement et de priorité sur le véritable élément <img>, pas seulement sur le widget qui l’entoure.
5. Passez en émulation mobile avant de recharger et vérifiez les variantes de fonds et d’images demandées. Confirmez aussi l’apparence sur un vrai téléphone.

Lancez PageSpeed Insights avant et après la modification dans des conditions comparables. Regardez l’élément LCP et les constats liés aux images plutôt qu’une seule note globale. Une petite image principale qui commence à charger tard n’a pas le même problème qu’un gros fichier demandé immédiatement.

Si une ancienne image persiste, vérifiez d’abord le fichier choisi et les réglages par point de rupture. Videz ensuite les caches de page, d’optimisation et de CDN concernés. Si du CSS Elementor obsolète référence l’ancien fond, régénérez les fichiers ou le CSS dans Tools ; le libellé varie selon la version. Cela ne recrée pas les tailles de miniatures WordPress manquantes.

Exemple : une image à côté d’une colonne de texte

Imaginons une photo d’équipe de 4800 × 3200 pixels et 5,4 Mo. Sa colonne mesure environ 550 pixels sur ordinateur, mais l’image passe sur une ligne entière au point de rupture tablette.

1. Vérifiez l’emplacement le plus large : Si l’image atteint environ 700 pixels sur tablette, utilisez cette largeur pour comparer les exports plutôt que la seule colonne d’ordinateur.
2. Préparez recadrage et dimensions : Si le rapport 4:3 convient, comparez 1000 × 750 et 1400 × 1050 pixels. Examinez les visages et détails importants à la taille d’affichage finale.
3. Comparez la compression : Essayez WebP avec une qualité modérée et examinez le résultat. Notez le poids réel : une photo de groupe détaillée peut demander plus de données qu’un portrait simple aux mêmes dimensions.
4. Configurez le widget : Envoyez l’export choisi, ajoutez un texte alternatif pertinent et sélectionnez la résolution. Pour un fichier de 1400 pixels, Full peut être nécessaire afin de proposer la grande variante. Vérifiez les versions responsives fournies.
5. Vérifiez le résultat : Contrôlez requêtes sur ordinateur et mobile, netteté et stabilité. Plus bas dans la page, le chargement différé peut convenir ; si la photo est l’élément LCP, elle doit charger rapidement.

Résoudre les problèmes d’images courants

Pourquoi l’image est-elle floue ?

Vérifiez Image Resolution, les dimensions de la source et le fichier réellement choisi par le navigateur. Une miniature de 300 pixels étirée sur 600 pixels perd en netteté, mais augmenter la résolution ne recrée pas les détails absents de l’original. Vérifiez aussi la compression et les recadrages agrandissant une petite zone. Consultez notre guide des images floues sur un site.

Pourquoi le fond mobile manque-t-il ou est-il mal cadré ?

Vérifiez l’image du point de rupture mobile, les réglages hérités, la visibilité et la hauteur du conteneur. Cover remplit la zone en recadrant ; si le sujet disparaît, ajustez la position ou le cadrage. Les proportions ne devraient pas être déformées. Si le fichier ne charge pas du tout, vérifiez d’abord l’erreur de requête.

Pourquoi les modifications n’apparaissent-elles pas sur le site ?

Vérifiez que vous avez modifié le bon widget, le bon modèle et le bon point de rupture. L’URL de l’image publiée permet de distinguer un ancien fichier d’anciens styles. Videz les caches concernés et régénérez le CSS Elementor s’il référence encore l’ancien fond. Des envois répétés sans identifier la cause peuvent créer des doublons inutiles.

Questions fréquentes

Faut-il toujours éviter Full ?

Non. Full peut convenir à un fichier déjà préparé pour cet emplacement. Vérifiez dimensions de la source, variantes responsives et fichier téléchargé. Full ne sert pas à remplir la colonne : cela relève de la mise en page.

Elementor compresse-t-il automatiquement les images envoyées ?

Les commandes de résolution et de chargement du constructeur ne compressent pas le fichier envoyé. WordPress crée des tailles et applique des réglages de qualité propres aux formats, sans garantir une bibliothèque optimisée. Elementor propose aussi le produit distinct Image Optimizer ; l’hébergeur ou des extensions peuvent assurer un traitement similaire. Vérifiez le système actif avant d’en ajouter un.

Peut-on envoyer directement des images WebP ?

WordPress accepte WebP. L’hébergement doit aussi disposer d’un traitement d’image compatible pour créer les versions réduites. Testez donc un fichier depuis l’envoi jusqu’au choix du widget et à la publication avant de convertir toute la bibliothèque.

Quelles dimensions choisir pour l’image principale ?

Partez de sa plus grande taille d’affichage et de son recadrage. Une largeur de 1600–1920 pixels est un point de comparaison raisonnable pour beaucoup de mises en page sur ordinateur, sans être une limite Elementor ni garantir la netteté sur chaque écran. Vérifiez le besoin d’un recadrage mobile et comparez poids et détails visibles.

L’optimisation des images améliore-t-elle le classement Google ?

Elle peut accélérer le chargement et améliorer l’expérience, sans garantir de meilleures positions. Les consignes Google sur l’expérience de page expliquent que les Core Web Vitals interviennent dans le classement, mais que de bons scores seuls ne garantissent pas les premières places. Images pertinentes, noms descriptifs et textes alternatifs utiles facilitent aussi la compréhension du contenu. Consultez notre guide des textes alternatifs et noms de fichiers.