HTML Images

by
Previous
Next

Introduction to HTML Images

Images play a vital role in making websites visually appealing and engaging. They enhance user experience, communicate ideas, and improve the overall design of a web page. HTML uses the <img> tag to embed images into a web page.

The <img> tag is a self-closing tag, meaning it doesn’t require a closing </img> tag.

Basic Structure of an HTML Image Tag

The <img> tag requires two key attributes:

  • src (Source): Specifies the path to the image file.
  • alt (Alternative Text): Describes the image content for accessibility and search engines.

Syntax:

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

Example:

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

In this example:

  • cat.jpg is the image file.
  • “A cute cat” is the description displayed if the image cannot be loaded.

Key Attributes of the <img> Tag

1) src
Specifies the image location (absolute or relative URL).
Example:

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

2) alt
Provides alternative text for the image. It is helpful when the image fails to load or for visually impaired users relying on screen readers.
Example:

<img src="flower.jpg" alt="A red rose">

3) width and height
Define the dimensions of the image in pixels or percentages.
Example:

<img src="landscape.jpg" alt="Beautiful landscape" width="500" height="300">

4) title
Displays a tooltip when the user hovers over the image.
Example:

<img src="book.jpg" alt="Book cover" title="Click to learn more about this book">

Types of Image Sources

1) Local Images
Images stored in the same directory or server as the web page.
Example:

<img src="images/logo.png" alt="Website Logo">

2) External Images
Images loaded from external URLs.
Example:

<img src="https://cdn.example.com/banner.jpg" alt="Promotional Banner">

3) Base64 Images
Embedding images as Base64-encoded strings directly within HTML.
Example:

<img src="data:image/png;base64,iVBORw0..." alt="Embedded Image">

Responsive Images

Responsive images adjust their size according to the screen size or resolution. Using the style attribute or CSS makes images responsive.

Example:

<img src="responsive.jpg" alt="Responsive Example" style="max-width: 100%; height: auto;">
  • max-width: 100%; ensures the image does not exceed the container’s width.
  • height: auto; maintains the image’s aspect ratio.

Adding Links to Images

Images can also act as hyperlinks using the <a> tag.

Example:

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

When users click the image, they are redirected to https://example.com.

Image Formats Supported by HTML

  1. JPEG (or JPG): Best for photographs due to efficient compression.
  2. PNG: Supports transparency; ideal for logos and icons.
  3. GIF: Suitable for animations.
  4. SVG: Scalable vector graphics; perfect for high-quality designs that scale.
  5. WEBP: Offers better compression and quality than JPEG and PNG.

Lazy Loading Images

Lazy loading delays image loading until they are visible in the viewport, improving page performance.

Syntax:

<img src="image.jpg" alt="Lazy loaded image" loading="lazy">
  • loading=”lazy” is a built-in HTML attribute supported by modern browsers.

Accessibility and SEO Best Practices for Images

  1. Always use the alt attribute.
    Descriptive alt text improves accessibility and SEO.
  2. Optimize image file sizes.
    Compress images using tools like TinyPNG or ImageOptim to reduce page load time.
  3. Use meaningful file names.
    Example: red-rose.jpg instead of img123.jpg.
  4. Leverage responsive images.
    Use the <picture> element or srcset attribute for high-resolution displays.

Example: HTML Page with Images

<!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 Demo</h1>

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

    <!-- Image with Title -->
    <img src="flower.jpg" alt="Red Rose" title="This is a red rose">

    <!-- Responsive Image -->
    <img src="landscape.jpg" alt="Beautiful Landscape" style="max-width: 100%; height: auto;">

    <!-- Lazy Loading -->
    <img src="large-image.jpg" alt="Large Image" loading="lazy">

    <!-- Linked Image -->
    <a href="https://example.com">
        <img src="logo.png" alt="Company Logo">
    </a>
</body>
</html>

Previous
Next

Leave a Comment