HTML Images

by

Images are a crucial part of web design, making websites visually appealing and engaging. In HTML images are embedded using the <img> tag. This guide provides a detailed explanation of how to use images in HTML, including attributes, best practices, and advanced techniques.

Images are used to enhance the visual appeal of a website, convey information, and improve user experience. In HTML, images are embedded using the <img> tag, which is a self-closing tag (no closing tag is required).

1. The <img> Tag

The <img> tag is used to embed an image in a web page. It requires at least two attributes: src and alt.

Syntax

<img src="image-url" alt="alternative-text">
HTML

2. Attributes of the <img> Tag

a. src

  • Purpose: Specifies the path to the image file.
  • Values: Can be a relative path (e.g., images/photo.jpg) or an absolute URL (e.g., https://example.com/image.png).

Example:

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

b. alt

  • Purpose: Provides alternative text for the image if it cannot be displayed.
  • Importance: Essential for accessibility and SEO.

Example:

  <img src="image.png" alt="A beautiful landscape">
HTML

c. width and height

  • Purpose: Specify the dimensions of the image in pixels.
  • Note: Use CSS for styling instead of these attributes for better control.

Example:

  <img src="image.png" alt="Example Image" width="500" height="300">
HTML

d. title

  • Purpose: Provides additional information about the image, displayed as a tooltip.

Example:

  <img src="image.png" alt="Example Image" title="This is an example image">
HTML

e. loading

  • Purpose: Specifies how the image should be loaded.
  • Values: lazy (loads the image only when it’s about to be displayed) or eager (loads the image immediately).

Example:

  <img src="image.png" alt="Example Image" loading="lazy">
HTML

f. srcset and sizes

  • Purpose: Used for responsive images to serve different images based on screen size and resolution.

Example:

  <img src="image-small.jpg" 
       srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w" 
       sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px" 
       alt="Responsive Image">
HTML

3. Responsive Images

Responsive images adapt to different screen sizes and resolutions, improving performance and user experience. Use the srcset and sizes attributes to achieve this.

Example:

<img src="image-small.jpg" 
     srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w" 
     sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px" 
     alt="Responsive Image">
HTML

4. Image Maps

Image maps allow you to create clickable areas on an image. Use the <map> and <area> tags to define these regions.

Example:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
HTML

5. Image Formats

Common image formats for the web include:

  • JPEG: Best for photographs.
  • PNG: Best for images requiring transparency.
  • GIF: Best for simple animations.
  • WebP: Modern format with better compression and quality.

6. Best Practices

  1. Use Descriptive alt Text: Ensure the alt attribute describes the image accurately.
  2. Optimize Images: Compress images to reduce file size without sacrificing quality.
  3. Use Responsive Images: Serve appropriately sized images for different devices.
  4. Lazy Loading: Use the loading="lazy" attribute for offscreen images to improve page load times.
  5. Modern Formats: Use WebP or AVIF for better performance.