Éléments d'image Shopify manquant en largeur et en hauteur : corrigez l'avertissement PageSpeed Les éléments de l'image

Pourquoi Shopify reçoit l'avertissement de largeur et de hauteur

Lighthouse signale les éléments de l'image sans largeur ni hauteur explicites, car le navigateur ne peut pas réserver en toute confiance l'espace de mise en page pendant le téléchargement de l'image. Si l'image apparaît et pousse du texte, des boutons, des fiches produits, des avis ou du contenu sous la ligne de flottaison vers le bas de la page, les acheteurs voient un saut. Google explique cela dans les conseils sur la stabilité de la mise en page : les images et les vidéos ont besoin de dimensions afin que le navigateur puisse allouer de l'espace avant la fin du chargement de la ressource.

Les thèmes Shopify démarrent souvent proprement puis dérivent. Un développeur ajoute un héros personnalisé. Une section de page de destination code en dur une image. Un constructeur de page injecte une bannière. Une application d'avis insère des photos de clients. Un article de blog utilise du HTML brut au lieu du composant image du thème. Chacun peut créer le même avertissement PageSpeed.

Cela chevauche Correctifs Shopify CLS, optimisation des images, et dimensionner correctement les images. La largeur et la hauteur ne concernent pas la compression du fichier. Il s’agit de rendre la mise en page prévisible.

Manuel étape par étape : corriger les éléments d'image sans dimensions

1. Trouver les images exactes que rapporte Lighthouse

Exécutez PageSpeed Insights sur la page d'accueil, une page produit et une page de collection. Ouvrez l'audit « Les éléments de l'image n'ont pas de largeur et de hauteur explicites » et copiez les URL des images. Recherchez ensuite dans votre thème le nom de fichier, le nom de section, le bloc d’application ou l’extrait qui le restitue.

Utilisez les mêmes URL lors des tests. Les exécutions de PageSpeed varient, alors gardez un processus stable avant et après en utilisant le guide de variance des scores au test de vitesse.

2. Préférez Shopify image_tag pour les images appartenant à un thème

Pour les images stockées dans Shopify, utilisez le pipeline d'images de Liquid au lieu des URL CDN brutes. Il permet de générer des sources réactives et de conserver l'image dans le comportement CDN de Shopify. La clé est de restituer un balisage qui donne au navigateur une boîte stable.

<!-- Product card image -->
&lbrace;&lbrace; product.featured_image
  | image_url: width: 700
  | image_tag:
    widths: '350, 500, 700',
    sizes: '(min-width: 990px) 25vw, 50vw',
    loading: 'lazy',
    alt: product.featured_image.alt
&rbrace;&rbrace;

3. Ajouter des dimensions aux balises img brutes

Si une section personnalisée doit utiliser un brut img tag, ajoutez des attributs de largeur et de hauteur qui correspondent au rapport intrinsèque de l'image. CSS peut toujours rendre l'image réactive. Les attributs définissent le rapport ; CSS définit comment il évolue.

<img
  src="&lbrace;&lbrace; section.settings.badge | image_url: width: 480 &rbrace;&rbrace;"
  width="480"
  height="320"
  loading="lazy"
  decoding="async"
  alt="&lbrace;&lbrace; section.settings.badge.alt | escape &rbrace;&rbrace;"
  class="feature-badge"
>

.feature-badge {
  width: 100%;
  height: auto;
}

4. Réservez un emplacement de rapport hauteur/largeur pour les cartes recadrées

Les fiches produits, les vignettes de collection, les lookbooks et les blocs éditoriaux recadrent souvent les images. Si vous ne pouvez pas vous fier aux dimensions naturelles de l'image, réservez un conteneur stable avec rapport hauteur/largeur et recadrez l'image à l'intérieur.

.product-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f5f5f5;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

5. Vérifiez les widgets d'application et les blocs de création de pages

If the reported image comes from reviews, Instagram feeds, shoppable galleries, recommendations, or a page builder, the fix may live in app settings rather than theme files. Disable the block in a duplicated theme, retest, and confirm ownership before editing. The guides on widgets de révision et les constructeurs de pages ralentissent Shopify couvrir ce flux de travail.

Correction manuelle vs Thunder Fix

Ce qu'il ne faut pas casser

Ne codez pas en dur les dimensions réservées au bureau qui déforment les images mobiles. Ne pas supprimer réactif srcset en ajoutant de la largeur et de la hauteur. Ne forcez pas toutes les images dans le même rapport si la photographie de produits utilise des cultures différentes. Le navigateur a besoin d’une zone réservée stable, mais les acheteurs ont toujours besoin d’une présentation claire des produits.

Gardez également LCP à l'esprit. Les images de héros et de produits au-dessus de la ligne de flottaison doivent généralement être enthousiastes et hautement prioritaires, tandis que les images en dessous de la ligne de flottaison peuvent être paresseuses. Lire différer les images hors écran sur Shopify et Optimisation LCP si la même page comporte des avertissements de priorité d'image.

Comment confirmer que le correctif de largeur et de hauteur de Shopify a fonctionné

Retestez avec PageSpeed Insights et le test de vitesse Shopify gratuit. L'avertissement devrait répertorier moins d'images ou disparaître. CLS doit rester inférieur à 0,1 dans les données de terrain et la page doit être stable lors du chargement sur une connexion mobile.

Pour un flux de travail complet à l'échelle du magasin, utilisez le guide complet d'optimisation de la vitesse Shopify. Si votre boutique comporte de nombreuses sections ou widgets d'application existants, comparez les options d'automatisation dans la meilleur guide des applications rapides Shopify ou révision Tarification Thunder.

FAQ