Images play a crucial role in enhancing web pages by providing a visual context that complements textual content.

Basic Syntax

This is how the syntax to embed an image in html looks like:

<img src="image.jpg" alt="Image Description" />

The src and alt attributes are essential for the proper functioning of the <img> tag.

• src attribute: Specifies the path to the image file.
• alt attribute: Provides a text description for the image.

Key Features

• It's a self-closing tag, meaning it doesn't require a corresponding closing tag.
• Commonly used attributes include the alt attribute for image descriptions and the src attribute for specifying the image location.
• Supports various image formats including PNG, JPEG, JPG, and GIF.

Setting Image Dimensions

You can specify the width and height of an image using the width and height attributes.

<img src="image.jpg" alt="Image Description" width="200" height="100" />

Setting the width and height attributes for images in HTML can have a positive impact on Search Engine Optimization (SEO). Specifying these dimensions in the <img> tag allows browsers to allocate the correct amount of space on a web page even before the image is fully loaded. This prevents layout shifts, improving the Cumulative Layout Shift (CLS) score—a key metric in Google's Core Web Vitals. A better CLS score can lead to a higher page ranking in search engine results.

Note: Styling dimensions and other properties are now more commonly managed through CSS for better flexibility and maintainability.