HTML Images

What Are HTML Images?

HTML images are used to add visual content to web pages. They enhance user engagement, convey information visually, and make a website more interactive and appealing. Images in HTML are embedded using the <img> tag, which does not have a closing tag.

For instance, you can add an image to your webpage with the following syntax:

<img src="image.jpg" alt="Description of Image">

Anatomy of the <img> Tag

The <img> tag consists of several attributes that control how the image appears and behaves:

• src: Specifies the path to the image file (required).
• alt: Provides alternative text if the image cannot be displayed (required for accessibility).
• width: Sets the width of the image in pixels or percentage.
• height: Sets the height of the image in pixels or percentage.
• title: Adds a tooltip that appears when hovering over the image.

Example:

<img src="logo.png" alt="Company Logo" width="200" height="100" title="Our Logo">

How to Add Images in HTML

Adding images in HTML is straightforward. Below are the steps:

1. Specify the Image Path

The src attribute specifies the path to the image file. The path can be:

• Absolute Path: Refers to the complete URL of an image (e.g., https://example.com/image.jpg).
• Relative Path: Refers to the location of the image file relative to the current HTML file (e.g., /images/photo.jpg).

2. Add Alternative Text

The alt attribute is crucial for accessibility and SEO. It provides a text description of the image, which screen readers can interpret.

Responsive Images

In modern web development, responsive images ensure that images adapt to different screen sizes and resolutions. Use the srcset and sizes attributes for better control:

<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" 
 alt="Responsive Image">

This example loads different image versions based on the user's device width.

Best Practices for HTML Images

• Optimize images to reduce file size and improve loading speed.
• Always include the alt attribute for accessibility and SEO.
• Use responsive images for better performance on mobile devices.
• Choose the right image format (e.g., JPEG for photos, PNG for transparency, SVG for icons).
• Lazy-load images to enhance performance for pages with many images.

Image Formats

Common image formats used in web development include:

• JPEG: Ideal for photos and complex images. Compresses well but may lose quality.
• PNG: Supports transparency and offers better quality than JPEG, but has larger file sizes.
• SVG: Vector-based, scalable images. Great for icons and logos.
• GIF: Supports animations but has limited color options.
• WebP: Modern format with better compression for web use.

Common Image Formats

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

Using Images as Links

HTML allows you to use images as clickable links. Wrap the <img> tag inside an <a> tag:

<a href="https://example.com">
    <img src="thumbnail.jpg" alt="Clickable Image">
</a>

Image Accessibility

Accessibility is essential when using images. Follow these tips:

• Use meaningful alt text to describe the image content.
• Mark decorative images with empty alt text (e.g., alt="").
• Ensure text is visible over images for better readability.

Chapter Summary

• Use the HTML <img> element to define an image
• Use the HTML src attribute to define the URL of the image
• Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
• Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
• Use the CSS float property to let the image float to the left or to the right

Note: Loading large images takes time, and can slow down your web page. Use images carefully.

FAQs about HTML Images

Examples of Using HTML Images

Basic Example:

<img src="example.jpg" alt="Example Image">

Responsive Example:

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

Using Images as Links:

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