HTML Images

Images are a vital part of any website, enhancing its visual appeal and providing valuable information. In HTML, the <img> tag is used to embed images.

Basic Structure of an Image Tag

The <img> tag is a self-closing tag that includes essential attributes like src and alt.

Syntax

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

Try It Now

  • src: Specifies the path to the image file.
  • alt: Provides alternative text if the image cannot be displayed.

Example

<img src="https://www.example.com/image.jpg" alt="Description of the image">

Try It Now

Common Attributes

  1. src: Defines the path to the image.
    • Absolute URL: https://www.example.com/image.jpg
    • Relative URL: images/photo.jpg
  2. alt: Describes the image for screen readers and when the image fails to load.
  3. width and height: Specify the dimensions of the image. 
    <img src="image.jpg" alt="Image description" width="300" height="200">

    Try It Now

  4. title: Provides additional information displayed as a tooltip when hovering over the. 
    <img src="image.jpg" alt="Image description" title="This is a tooltip">

    Try It Now

Responsive Images

To make images responsive, use CSS or the width attribute set to 100%.

<img src="image.jpg" alt="Responsive image" style="width:100%;">

Try It Now

Or use the picture element for different images based on screen size:

<picture>
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <img src="image-default.jpg" alt="Responsive image">
</picture>

Try It Now

Linking an Image

You can make an image a hyperlink by wrapping it in an <a> tag.

<a href="https://www.example.com">
  <img src="image.jpg" alt="Link image">
</a>

Try It Now

Image Formats

  1. JPEG/JPG: Best for photographs; supports millions of colors.
  2. PNG: Supports transparency; best for graphics with fewer colors.
  3. GIF: Used for simple animations.
  4. SVG: Scalable Vector Graphics, used for logos and icons.
  5. WebP: A modern format that provides superior compression.

Image Accessibility

  • alt Attribute: Always provide a meaningful alt attribute for better accessibility and SEO.
  • Descriptive title: Use the title attribute to provide additional context if necessary.

Lazy Loading

To improve page load time, use the loading="lazy" attribute to defer the loading of offscreen images.

<img src="image.jpg" alt="Description" loading="lazy">

Try It Now

Best Practices

  1. Optimize Images: Use appropriate formats and compress images to reduce load time.
  2. Use Descriptive alt Text: Ensure the alt text describes the image content for accessibility.
  3. Responsive Design: Make images responsive to adapt to different screen sizes.
  4. Fallback Content: Provide meaningful alt text for when images cannot be displayed.

Example: Complete Image Tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Image Example</title>
</head>
<body>
  <h1>Sample Image</h1>
  <img src="https://www.example.com/image.jpg" alt="Sample image of a sunset" width="600" height="400">
</body>
</html>

Try It Now

HTML images enhance the user experience by providing visual context and engagement. Understanding how to properly implement and manage images on your website is crucial for both aesthetics and performance.