HTML Images

Images can enhance the visual appeal and user experience of a webpage. HTML provides a straightforward way to embed images using the <img> tag. This chapter will cover the basics of adding images to your HTML document and how to use various attributes to control their appearance and behavior.

1. Basic Image Syntax

The <img> tag is used to embed an image in an HTML page. It requires the src attribute to specify the image source and the alt attribute to provide alternative text for the image.

<img src="example.jpg" alt="Example Image">

2. Image Size

You can control the size of an image using the width and height attributes. These attributes accept values in pixels.

<img src="example.jpg" alt="Example Image" width="200" height="150">

3. Responsive Images

To make images responsive (i.e., adjust their size based on the screen size), you can use CSS. Setting the image’s width to 100% ensures it scales with its container.

<img src="example.jpg" alt="Responsive Image" style="width: 100%; height: auto;">

4. Adding Borders and Styling Images

You can add borders and other styles to images using CSS.

<img src="example.jpg" alt="Styled Image" style="width: 200px; border: 2px solid #4caf50; border-radius: 8px;">

5. Image Alignment

Images can be aligned using the float property in CSS. The float property can take the values left or right.

<img src="example.jpg" alt="Float Left" style="float: left; width: 100px; margin-right: 10px;">
<p>This text wraps around the image that is floated to the left. The <code>float: left</code> style is used to make the text flow around the image.</p>
<div style="clear: both;"></div>

6. Image Links

Images can be used as links by wrapping the <img> tag inside an <a> tag.

<a href="https://www.example.com">
    <img src="example.jpg" alt="Linked Image" width="200">
</a>

7. Image Maps

Image maps allow you to define clickable areas within an image. This is done using the <map> and <area> tags.

<img src="example.jpg" alt="Image Map" usemap="#imagemap" width="300">
<map name="imagemap">
    <area shape="rect" coords="34,44,270,350" href="https://www.example.com" alt="Example Link">
</map>

Best Practices for Using Images in HTML

• Always use the alt attribute to provide alternative text for images. This improves accessibility and SEO.
• Optimize images for the web to reduce load times. Use appropriate formats (JPEG for photographs, PNG for graphics with transparency).
• Consider using responsive images to ensure they look good on all devices and screen sizes.
• Use CSS to style images rather than inline attributes whenever possible for better maintainability.