3.1. the img element
<img src="cat2.jpeg" alt="an image of a cat looking up">
The <img> tag in HTML is used to embed images into a webpage. It is a self-closing tag that requires two essential attributes: src, which specifies the path to the image file, and alt, which provides alternative text for screen readers and when the image cannot be displayed. Additional attributes like width, height, and title can be used to control the image's dimensions and provide extra information. The <img> tag supports various image formats, such as JPEG, PNG, GIF, and SVG.
3.2. Manipulating width and height
<img src="cat.jpeg" width="540" alt="an image of a cat looking straight forward in a grass field">
The width and height attributes in the <img> tag are used to specify the dimensions of an image in pixels. These attributes control the size at which the image is displayed on the webpage, ensuring it fits properly within the layout. Setting explicit dimensions can improve page performance by reducing layout shifts during loading, as the browser reserves space for the image before it fully loads. However, it’s important to maintain the image's aspect ratio to avoid distortion. While these attributes can be overridden with CSS, using them directly in the <img> tag provides a fallback and ensures better control over the image's display.
3.3. Using figure and figcaption
<figure> <img src="../assets/cat.jpeg" width="500" alt="an image of a cat looking straight forward in a grass field"> <figcaption>fig.1 Image of a cat</figcaption> </figure>
The <figure> and <figcaption> elements in HTML are used to semantically group images with their captions. The <figure> tag represents self-contained content, such as images, diagrams, or illustrations, while the <figcaption> tag provides a caption or description for the content inside the <figure>. This pairing improves accessibility by associating the image with its caption, making it easier for screen readers to convey the relationship. It also enhances the structure and readability of the code, as the caption is explicitly linked to the image. Using <figure> and <figcaption> is particularly useful for articles, tutorials, or any content where images require context or explanation.
3.4. Responsive images with picture
<picture>
<source media='(max-width: 767px)'
srcset='../assets/cat-sm.jpeg'/>
<source media='(min-width: 768px)'
srcset='../assets/cat-md.jpeg'/>
<img src='../assets/cat-md.jpeg' width="720" alt="a white cat"/>
</picture>
The <picture> element in HTML is used to create responsive images that adapt to different screen sizes, resolutions, and device capabilities. It allows developers to provide multiple versions of an image using the <source> tag, each with specific conditions defined by attributes like media, srcset, and type. The browser selects the most appropriate image based on factors such as viewport width, pixel density, or supported image formats. A fallback <img> tag is included inside the <picture> element to ensure compatibility with browsers that do not support the <picture> element. This approach optimizes performance by delivering the most suitable image for each device, improving load times and user experience.