An image, its alt text and its size
width/height are what you asked for; naturalWidth/naturalHeight are the image file's own size.
<img> shows a picture from the file in src, describes it in words with alt, and should state its width and height; picking the right file format and writing good alt text matter as much as the tag.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write an image tag for team.jpg (1600×900 pixels) showing five people smiling in front of the office, with good alt text and its size.
A shopping cart icon cart.svg is the only content of a link to cart.html. Write the HTML.
A decorative wavy line wave.png (800×40) separates two sections. Write it.
Explain it without notes
What is alt text for, and how do you decide what to write?
Why should you set width and height on images?
Compare JPEG, PNG, WebP, AVIF, SVG and GIF: when would you use each?
What's the difference between alt="" and no alt attribute?
Preview
Console
Nothing logged yet.Expected console output
alt: Orange rectangle with the word Hectal
width x height attributes: 120 x 80
loaded image size: 120 x 80