HTML CSS - Images

Embedding images in HTML pages

Images are a crucial part of web content, making pages more visually appealing and providing visual context. In HTML, images are embedded using the <img> element. This tutorial covers how to embed images in HTML pages.

Basic Image Syntax

The basic syntax for embedding an image in HTML is:

<img src="URL" alt="description">
            

The src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image. Here is an example:

<img src="https://example.com/image.jpg" alt="Example Image">
            

Image Attributes

In addition to src and alt, the <img> element can have other attributes to control the appearance and behavior of the image:

• width: Specifies the width of the image.
• height: Specifies the height of the image.
• title: Provides additional information about the image, often displayed as a tooltip when the mouse hovers over the image.

Here is an example of using these attributes:

<img src="https://example.com/image.jpg" alt="Example Image" width="300" height="200" title="Example Image Tooltip">
            

Image File Paths

There are two types of paths you can use to specify the location of an image file:

• Absolute Path: A full URL to the image file. Example:

  
  <img src="https://example.com/images/photo.jpg" alt="Photo">
                      

• Relative Path: A path relative to the location of the HTML file. Examples:

  
  <img src="images/photo.jpg" alt="Photo">  <!-- Image in a folder -->
  <img src="../images/photo.jpg" alt="Photo">  <!-- Image in a parent folder -->
                      

Responsive Images

To make images responsive (i.e., scale with the size of the viewport), you can use CSS. Here is an example of making an image responsive using CSS:

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

<img src="https://example.com/image.jpg" alt="Responsive Image">
            

In this example, the image will scale to fit its container while maintaining its aspect ratio.

Image Formats

Common image formats used on the web include:

• JPEG: Good for photographs and images with many colors.
• PNG: Supports transparency and is good for images with fewer colors and sharp edges.
• GIF: Supports animation and is suitable for simple graphics with limited colors.
• SVG: A vector format that is scalable and suitable for logos and icons.
• WebP: A modern format that provides superior compression for images on the web.

Accessibility with Alt Text

Providing alternative text (alt text) for images is important for accessibility. Alt text describes the content of the image for users who cannot see it, such as those using screen readers. Always use the alt attribute to provide meaningful descriptions of images.

Example:

<img src="profile.jpg" alt="Photo of John Doe">
            

In this example, the alt text describes the content of the image, helping users understand its context.

Image Links

You can create a link that uses an image as the clickable element:

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

In this example, the image acts as a hyperlink to another page or resource.

Summary

In this tutorial, you learned how to embed images in HTML pages using the <img> element. You explored image attributes, file paths, responsive images, image formats, accessibility with alt text, and creating image links. Understanding how to use images effectively is essential for creating visually appealing and accessible web pages.