Tutorials

HTML Basic

HTML Intro

HTML Entity

HTML IndexedDB

HTML Reference

HTML Images

Posted in HTML Tutorial

Updated on Sep 08, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

Images are an integral part of web design, enhancing the visual appeal of a web page and helping to convey information effectively.

HTML provides simple and flexible methods to embed images in web pages.

Understanding the best practices for adding and optimizing images is key to creating visually rich and performance-friendly websites.

📷 The <img> Element

The <img> element in HTML is used to embed images on a web page. It is a self-closing tag and requires the src and alt attributes.

HTML

Copied

<img src="image.jpg" alt="A descriptive text about the image">

src: The URL of the image file.
alt: A brief description of the image, used for accessibility and displayed if the image fails to load.

🌄 Image Formats

HTML supports various image formats. Choosing the right format depends on the type of image and its intended use:

JPEG (.jpg/.jpeg): Best for photos and images with many colors.
PNG (.png): Ideal for images with transparency or images that need to retain quality.
GIF (.gif): Suitable for simple animations and low-color images.
SVG (.svg): Scalable Vector Graphics for logos and icons that require scaling without loss of quality.
WebP (.webp): A modern format that offers superior compression, often with smaller file sizes.

⚙️ Setting Image Attributes

In addition to the src and alt attributes, there are other useful attributes for controlling the appearance of images:

width and height:

Set the dimensions of the image (in pixels or percentages).
HTML
Copied
```
<img src="image.jpg" alt="A descriptive text" width="300" height="200">
```
title:

Provides additional information when hovering over the image.
HTML
Copied
```
<img src="image.jpg" alt="A descriptive text" title="Tooltip text">
```
loading:

Use loading="lazy" to defer loading of off-screen images.
HTML
Copied
```
<img src="image.jpg" alt="A descriptive text" loading="lazy">
```

🖼️ Responsive Images

To ensure that images display correctly on various devices and screen sizes, HTML provides several methods for handling responsive images:

<picture> element:

Allows you to specify different image sources for different conditions, such as screen resolution or device type.

HTML

Copied

<picture></picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)">
  <source srcset="image-large.jpg" media="(min-width: 601px)">
  <img src="image-default.jpg" alt="A descriptive text">
</picture>

srcset and sizes attributes:

Define multiple image resolutions to serve based on the user's screen size or resolution.

HTML

Copied

<img src="image-default.jpg" 
     srcset="image-small.jpg 600w, image-large.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, 50vw" 
     alt="A descriptive text">

⚡ Optimizing Images for Performance

Images can significantly impact the loading time of a webpage, so optimizing them is crucial for performance:

Compress images: Use image compression tools like TinyPNG or ImageOptim to reduce file sizes without sacrificing quality.
Use WebP: Consider converting images to WebP format for better compression.
Lazy loading: Load images only when they are about to enter the viewport using the loading="lazy" attribute.

🧑‍🦽 Accessibility and Images

To make images accessible to all users, including those with visual impairments, follow these guidelines:

Always provide meaningful alt text for images. If the image is purely decorative, use an empty alt attribute (alt="").
Use the <figure> and <figcaption> elements to provide captions for complex images.

HTML

Copied

<figure></figure>
  <img src="chart.jpg" alt="Sales chart for Q1">
  <figcaption>Figure 1: A sales chart showing growth in Q1.</figcaption>
</figure>

⚠️ Common Pitfalls

Missing alt text: Always include alt attributes for better accessibility and SEO.
Overusing large images: Avoid using large images where smaller ones suffice, as it can negatively impact performance.
Improper aspect ratio: Ensure the width and height attributes maintain the correct aspect ratio to avoid distortion.

📝 Example

Here’s a complete example showcasing different types of images with proper attributes:

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Images Example</title>
</head>
<body>
  <h1>HTML Images Example</h1>

  <!-- Basic Image -->
  <img src="photo.jpg" alt="A beautiful landscape" width="400">

  <!-- Picture Element for Responsive Images -->
  <picture>
    <source srcset="photo-small.jpg" media="(max-width: 600px)">
    <source srcset="photo-large.jpg" media="(min-width: 601px)">
    <img src="photo.jpg" alt="A beautiful landscape">
  </picture>

  <!-- Image with Figure and Caption -->
  <figure>
    <img src="chart.jpg" alt="Sales chart">
    <figcaption>Figure 1: Sales growth in Q1.</figcaption>
  </figure>

  <!-- Lazy Loading Image -->
  <img src="large-image.jpg" alt="A high-resolution image" loading="lazy">
</body>
</html>

🎉 Conclusion

Using images effectively in HTML is key to creating visually appealing and accessible web pages. By understanding the different image formats, attributes, and optimization techniques, you can ensure that your images enhance both the functionality and performance of your website.