Tutorial

Forum

Sign Up

log In

HTML
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>
<img src="/assets/images/whereisstuff.png" alt="whereisstuff.com" width="100" height="100">

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.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.