Images and the <img> Tag

Table of Contents

1. Introduction to the <img> Tag
2. The Basic Syntax of the <img> Tag
3. The src Attribute and Image Path
4. The alt Attribute for Accessibility and SEO
5. Controlling Image Size with width and height
6. Image Formats (JPEG, PNG, GIF, SVG)
7. Responsive Images with srcset and sizes
8. Embedding Images with Base64 Encoding
9. Image Accessibility and Best Practices
10. Conclusion

1. Introduction to the <img> Tag

Images are essential components of modern web design. Whether you are showcasing products on an e-commerce website, displaying photos on a portfolio, or enhancing content with illustrations, images are one of the most visually engaging elements on a web page.

In HTML, images are embedded using the <img> tag. Unlike other HTML elements, the <img> tag is self-closing, meaning it does not require a closing tag. Instead, it has several attributes that define how and where the image is displayed.

In this module, we’ll dive into the various attributes of the <img> tag, explore best practices for using images, and learn how to optimize them for both accessibility and performance.

2. The Basic Syntax of the <img> Tag

The syntax of the <img> tag is simple yet powerful. It requires at least two key attributes: src (source) and alt (alternative text).

Syntax:

<img src="image-path.jpg" alt="Description of the image">

Example:

<img src="cat.jpg" alt="A cute cat">

In the above example:

• The src attribute specifies the image’s location on the web or the server.
• The alt attribute provides alternative text for the image, which is essential for accessibility, especially for visually impaired users or when the image fails to load.

3. The src Attribute and Image Path

The src attribute is the most important attribute of the <img> tag. It defines the location (path) to the image file. The path can be either relative or absolute:

• Absolute Path: Specifies the full URL of the image. <img src="https://www.example.com/images/cat.jpg" alt="A cute cat">
• Relative Path: Specifies a relative path from the current directory or from the root of the website. <img src="images/cat.jpg" alt="A cute cat">

When using a relative path, ensure the image file is located in the specified directory, and that the path is correct.

4. The alt Attribute for Accessibility and SEO

The alt (alternative text) attribute is crucial for both accessibility and SEO. It provides a textual description of the image for users who are unable to see it. For example:

• Visually impaired users: Screen readers can read the alt text to describe the image.
• SEO: Search engines like Google use alt text to understand the content of the image, which helps improve the website’s ranking.

Example:

<img src="cat.jpg" alt="A cute cat playing with a ball of yarn">

Best Practices for alt text:

• Descriptive: Describe what the image represents.
• Concise: Keep the description short and to the point.
• Contextual: Ensure the alt text makes sense in the context of the surrounding content.

5. Controlling Image Size with width and height

Images can be resized using the width and height attributes directly within the <img> tag. These attributes define the dimensions of the image in pixels.

Syntax:

<img src="cat.jpg" alt="A cute cat" width="300" height="200">

In this example, the image will be displayed with a width of 300 pixels and a height of 200 pixels. If the aspect ratio is important, you should maintain the same ratio between the width and height.

Responsive Images:

To ensure that images resize properly on different screen sizes, it is common to set the width to 100% in CSS, making the image scale responsively within its container.

img {
  width: 100%;
  height: auto;
}

6. Image Formats (JPEG, PNG, GIF, SVG)

There are various image formats used on the web, each serving different purposes. Understanding the differences will help you choose the best format for your images.

• JPEG: Best for photographs or images with complex color gradients. It offers good compression without compromising much on quality.
• PNG: Ideal for images with transparency or simple graphics like logos. It supports lossless compression.
• GIF: Used for animations and simple graphics. It supports only 256 colors, which may not be suitable for high-quality images.
• SVG: Scalable Vector Graphics are ideal for vector images like logos or icons. SVG images are resolution-independent and can be scaled without losing quality.

When possible, opt for modern formats like WebP, which offer better compression while maintaining high quality.

7. Responsive Images with srcset and sizes

Responsive images adjust their size based on the screen resolution or viewport size. This can be achieved using the srcset and sizes attributes.

• srcset: Allows you to specify different image sources for different screen resolutions.
• sizes: Defines how large the image will be displayed on different screen sizes.

Example:

<img src="cat-small.jpg" 
     srcset="cat-small.jpg 300w, cat-medium.jpg 600w, cat-large.jpg 1200w" 
     sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px" 
     alt="A cute cat">

In this example:

• For small screens, the image will be 300px wide.
• For medium screens, the image will be 600px wide.
• For larger screens, the image will be 1200px wide.

This ensures that users download appropriately-sized images based on their device’s screen size, improving performance and load times.

8. Embedding Images with Base64 Encoding

In some cases, you may want to embed images directly within HTML or CSS. Base64 encoding allows you to convert an image into a text string that can be embedded directly into the code. This method eliminates the need for external image files.

Example:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAA..." alt="Embedded Image">

While base64 encoding can reduce HTTP requests, it may increase the overall size of the page and can slow down page load times, so it’s usually better to use it sparingly.

9. Image Accessibility and Best Practices

Images are a key part of web design, but they must be used in ways that ensure accessibility for all users. The following best practices should be followed:

1. Use Descriptive alt Text: Always provide an alt attribute for each image, describing its content or purpose.
2. Don’t Overuse Decorative Images: If an image is purely decorative, use an empty alt attribute (alt="") so screen readers can skip it.
3. Optimize Images for Performance: Compress images and use modern formats like WebP to reduce load times, especially on mobile devices.
4. Consider Contrast and Readability: If images contain text, ensure that the text is readable, with sufficient contrast against the background.
5. Use title for Extra Information: The title attribute can be used to provide additional information on hover, though it should not replace the alt attribute.

Example:

<img src="logo.png" alt="Company Logo" title="Click to visit our website">

10. Conclusion

The <img> tag is essential for embedding images on web pages. By using the correct attributes like src, alt, width, and height, and optimizing images for performance, accessibility, and SEO, you can create a user-friendly and efficient website. Whether you’re using responsive images, embedding images with Base64, or selecting the right image formats, mastering image handling in HTML is crucial for modern web development.