QR Code Component with Lazy Loading Image

What are you most proud of, and what would you do differently next time?

How to properly setup the img element to prevent the "content jump" problem when the qr-code is being shown on the page as I made the qr-code image lazily loaded.

What challenges did you encounter, and how did you overcome them?

The challenge is to make the image lazily loaded and prevent "content jump" when it's being shown on the page.

To do this, I setup the html img attributes to the same dimensions as the image and on CSS, set the img width to be 100% and the height to auto.

<img
  src=" ./images/image-qr-code.png"
  alt="QR code"
  loading="lazy"
  width="576"
  height="576"
/>

img {
  width: 100%;
  height: auto;
}

What specific areas of your project would you like help with?

I've tried to apply the semantic HTML, but I don't know if my code is correct or not. If anyone has suggestions of how to improve it, please contact or message me.