Add alt text and size attributes to an image
Description: Improve this image tag. The picture shows a blue backpack on a table.
<img src="IMG_0023.JPG">Hint:
- Rename the file, add alt, width and height. Add lazy loading if the image is not at the top of the page.
Solution
<img src="blue-backpack-on-table.webp" alt="Blue backpack on a wooden table" width="800" height="600" loading="lazy">How it works
- The file name describes the picture, in lowercase with hyphens.
- The alt text describes it in a short natural sentence, without keyword stuffing.
- Width and height reserve the space, so the layout does not jump (CLS).
loading="lazy"delays the loading until the user scrolls near it. Do not use it for the main image at the top.
Read Images.
Learn more about the similar topics:
| Tutorials |
|---|
| No Content Found. |
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |