Real-life examples of using the <img> tag for web design

📚 Quick Study Guide

• 🖼️ The `` tag in HTML is used to embed images into a webpage.
• 🔗 The `src` attribute specifies the URL of the image.
• 📏 The `alt` attribute provides alternative text for the image if it cannot be displayed. It's crucial for accessibility and SEO.
• 📐 The `width` and `height` attributes define the dimensions of the image (it's better to control image size via CSS for responsive design).
• 🌐 Supported image formats include JPEG, PNG, GIF, SVG, and WebP.
• ✨ The `srcset` attribute allows you to specify different image resources for different screen sizes or resolutions (responsive images).
• ⚡ The `loading` attribute can be set to `lazy` to improve page load performance by deferring off-screen images.

Practice Quiz

1. Which attribute is mandatory for the `` tag according to HTML standards?

   1. src
   2. alt
   3. width
   4. height

2. What is the purpose of the `alt` attribute in the `` tag?

   1. To specify the image file format.
   2. To provide alternative text if the image cannot be displayed.
   3. To define the image's alignment on the page.
   4. To set the image as a background.

3. Which image format is best suited for images with transparency?

   1. JPEG
   2. GIF
   3. PNG
   4. WebP

4. What does the `srcset` attribute do?

   1. Specifies the image's border color.
   2. Specifies different image resources for different screen sizes.
   3. Specifies the image's compression level.
   4. Specifies the image's location on the server.

5. How can you improve page load performance using the `` tag?

   1. By always using very large images.
   2. By using the `loading="lazy"` attribute.
   3. By removing the `alt` attribute.
   4. By using only JPEG images.

6. Which of the following is NOT a valid image format for the `` tag?

   1. SVG
   2. TIFF
   3. WebP
   4. GIF

7. Why is it recommended to use CSS for styling image dimensions instead of HTML attributes?

   1. CSS is faster than HTML.
   2. CSS allows for more responsive design.
   3. HTML attributes are deprecated.
   4. HTML attributes only work for JPEG images.