#stop Image from adding width and height to img

3 messages · Page 1 of 1 (latest)

naive hornet
#

Do you know how to stop astro's Image component from adding a width and height attribute to the img it generates?

stuck fulcrumBOT
#

Hi @naive hornet. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The knowledge sources do not explicitly mention a way to prevent the <Image /> component from adding width and height attributes to the generated <img> tag. In fact, inferring and setting these dimensions is a core feature of the component — it's specifically designed to set correct width and height to avoid Cumulative Layout Shift (CLS). [Image component docs]

If you need full control over the output <img> tag without automatic dimension attributes, the recommended alternative is to use the plain HTML <img> tag directly. For local images, you can import the image and use its metadata properties selectively:

---
import myImage from '../assets/my_image.png';
---
<img src={myImage.src} alt="A description of my image." />

This way, no width or height will be added unless you explicitly include them. [HTML img tag docs]

Keep in mind that bypassing the <Image /> component means your image won't be optimized, and you lose the automatic CLS protection that comes with it.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: