HTML Images

Learn how to add and format images in HTML

Introduction to HTML Images

The tag is used to embed images in an HTML page. It is an empty tag and contains attributes only.

Common Image Attributes:

src - Specifies the path to the image
alt - Alternative text for the image
width and height - Specify the size of the image

Example of an Image Tag:

                            
<img src="images/example.jpg" alt="Example Image" width="300" height="200" />

Output:

This will render as:

Using Images in HTML

Images can enhance the visual appeal of your webpage. Use the tag to include images, and always provide an alt attribute for accessibility and SEO purposes.

Example of an Image with Attributes:

                            
<img src="https://www.example.com/image.jpg" alt="Description of Image" width="500" height="300" />

Output:

This will render as:

Best Practices for Using Images

Always use the alt attribute to describe the image for users who cannot see it.
Optimize images for web to reduce loading times.
Use appropriate image formats (JPEG, PNG, GIF) based on the type of image.
Ensure images are responsive by using relative units like percentages or viewport units.

Responsive Image Example:

                            
<img src="images/responsive-image.jpg" alt="Responsive Image" style="width: 100%; height: auto;" />

Output:

This will render as a responsive image that scales with the width of its container:

Conclusion

Images are a crucial part of web design, enhancing user experience and engagement. Use the <img> tag effectively by providing the necessary attributes and following best practices to ensure your images are accessible, optimized, and responsive.