HTML Image - Learn About HTML Image Tag

Tutorial

HTML

HTML Basic Tutorial

Introduction

Unorder list

Order list

Definition List

Table

Form

Inputs

Input attributes

Image

❮ Previous

Next ❯

In HTML, images are embedded in a webpage using the <img> tag.

Syntax

<img src="URL" alt="Description of the image">

Example 1 : Image tag

<!DOCTYPE html>

Try it yourself

Common Attributes of the `<img>` Tag

src:

The src attribute defines the path to the image file.

alt:

The alt attribute provides alternative text for the image, which is important for screen readers used by visually impaired users. It also appears if the image cannot be displayed.
Example: alt="A picture of a mountain at sunset"

width and height:

These attributes specify the width and height of the image in pixels. You can define either one or both.
Example: width="300" or height="200"

title:

The title attribute provides additional information about the image, often displayed as a tooltip when the user hovers over the image.
Example: title="Sample Image"

loading:

The loading attribute allows you to defer the loading of off-screen images until the user scrolls near them (lazy loading), improving performance.
Values: lazy (default), eager.
Example: loading="lazy"

srcset and sizes:

These attributes help with responsive images by allowing you to define multiple image sources for different screen sizes or resolutions.
srcset: Specifies different images for different screen resolutions.
sizes: Specifies which image size to use based on the display size.

Example 1 : Image with attributes

<img src="/assets/images/whereisstuff.png"

alt="A beautiful mountain landscape"

width="200"

height="200"

title="Mountain Landscape"

loading="lazy">

<img src="/assets/images/whereisstuff.png"

srcset="/assets/images/whereisstuff.png 1024w, medium.jpg 640w, small.jpg 320w"

sizes="(max-width: 600px) 320px, (max-width: 1200px) 640px, 1024px"

alt="A responsive image of a mountain">

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.

Syntax

Common Attributes of the <img> Tag

Common Attributes of the `<img>` Tag