Image elements do not have explicit width and height

Technical Q&A
,

Topic summary

Issue: A Shopify site flags that image elements lack explicit width and height; adding them didn’t seem to work.

Key guidance:

  • Add width and height attributes to all image/video tags, or reserve space using CSS aspect-ratio techniques so the browser allocates layout space while loading.
  • Use unitless pixel values (e.g., width=640, height=360) to reserve the area. For responsiveness, CSS like img { width: 100%; height: auto; } maintains aspect ratio.
  • Shopify steps: Online Store > Themes > Actions > Edit code; find the templates/sections where images render and add width and height to each img tag, matching the image’s actual dimensions; save.
  • Optimization tip: compress images with TinyPNG to reduce file size.

Open questions / latest updates:

  • Multiple users ask how to locate the exact code section for product images; they can’t find where to edit the img markup.

Status:

  • No confirmed fix posted. Further guidance is needed on identifying the theme files/sections that output product images. A screenshot and code examples are central to applying the solution.
Summarized with AI on January 5. AI used: gpt-5.
2

@PoojaHiwade .,

Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.

You may notice the width and height above do not include units. These “pixel” dimensions would ensure a 640x360 area would be reserved. The image would stretch to fit this space, regardless of whether the true dimensions matched or not.

When Responsive Web Design was introduced, developers began to omit width and height and started using CSS to resize images instead:

img {
 width: 100%; /* or max-width: 100%; */
 height: auto;
}

Shopify Image Element Explicit width and height:
1 Like