How do you add an image to a webpage using HTML?

Images make websites visually appealing and help convey information quickly. In HTML, images are added using the <img> element.

Basic Syntax

<img src="image-url" alt="description">

- src specifies the path to the image file (required).
- alt provides alternative text if the image cannot be displayed (required for accessibility).

Example of Adding an Image

<img src="logo.png" alt="Company Logo">

This will display the image file logo.png on the webpage. If the image cannot be loaded, the text Company Logo will appear instead.

Common Attributes of the <img> Tag

Example with Width, Height, and Title

<img src="logo.png" alt="Company Logo" width="200" height="100" title="Our Logo">

Linking an Image

Images can also be used as clickable links using the <a> tag:

<a href="https://www.example.com">
  <img src="logo.png" alt="Company Logo">
</a>

Best Practices for Using Images in HTML

• Always use the alt attribute for accessibility
• Optimize image size for faster loading
• Use descriptive filenames
• Specify width and height to prevent layout shifts
• Use images that enhance content, not distract from it

Conclusion

The <img> tag is the standard way to display images on webpages. By using attributes like src, alt, width, and height, you can control how images appear, improve accessibility, and enhance user experience.