Now that we have seen how to use text elements in HTML, let’s look at how to add images to a web page.
Images are an important part of many web pages, and HTML provides several ways to include images on a page. Here are the basics of using images in HTML.
Adding Images to a Web Page#
To add an image to a web page, use the <img> tag and specify the image file using the src attribute. Here’s an example:
<img src="image.jpg" alt="A beautiful sunset">
This will display an image on the page with a description for screen readers or in case the image fails to load.
Important: Did you see that we did not close this tag? That’s because the <img> tag is a self-closing tag, which means that it does not have a closing tag. Some other self-closing tags include <br> and <hr>.
Controlling the Display of Images#
The <img> tag also provides several other attributes to control the display of images. Here are a few examples:
- width and height: Sets the size of the image in pixels.
- align: Aligns the image left, right, or center.
- border: Sets the width of the image border.
- title: Provides a tooltip when the user hovers over the image.
<img src="image.jpg" alt="A beautiful sunset" width="500" height="300" align="center" border="1" title="Sunset">
File location#
The src attribute specifies the location of the image file. This can be a URL or a relative path to the image file. For example, if the image file is located in the same folder as the HTML file, you can use the following:
<img src="image.jpg" alt="A beautiful sunset">
But if the image file is located in a different folder, you can use a relative path to specify the location of the image file. For example, if the image file is located in a folder called “images”, you can use the following:
<img src="images/image.jpg" alt="A beautiful sunset">
Activity#
Try adding an image to your web page. You can use the image below, find an image online or use an image from your computer. Place it in the same folder as your HTML file and use a relative path to specify the location of the image file. You can also use a photo of yourself to complete your personal website!
Best Practices for Image Optimization and Accessibility#
When using images on a web page, it’s important to optimize them for faster loading times and to make them accessible to all users. Here are some best practices to keep in mind:
- Compress images to reduce their file size without sacrificing quality. A good tool for this is TinyPNG.
- Use descriptive alt text to provide a textual description of the image. This is important for screen readers, search engines and in case the image fails to load.
- Use the title attribute to provide additional information about the image. This is useful for providing a tooltip when the user hovers over the image.
- Provide text descriptions of images in the page content, especially for important images such as infographics and charts.
By following these best practices, you can ensure that your images are optimized and accessible to all users.