HTML Images

In this tutorial, you will learn how to use <img> (images) in your HTML documents. Images are an important part of the design and appearance of a web page. This tutorial will show you in simple steps how to use images in your web pages.

The <img> tag is used to insert images into HTML documents. It's a blank element and has only features, so it doesn't have a closed tag. <img> tags can be provided with syntax.

Syntax

<img src="image-url" alt="same-text" width="" height="">
Important : src and alt Attributes is a required

There are two ways to insert the images into a webpage.

  • absolute url : By providing a full path
  • relative url : By providing a file path relative to the location

HTML Image Absolute url

<img src="https://www.webthestuff.com/images/demo/sparrow.png" width="100%" hight="100%">

HTML Image Relative url

<img src="/images/demo/tajmahal.png" width="100%" hight="100%">

Attribute of HTML <img> tag

Attribute Description
src This Attribute use to specify the path of the image.
alt This Attribute use to refer to alternate text for an image. This is useful because it informs the user what the image means and if the image cannot be displayed due to some network problem this optional text will be displayed.
height This Attribute use to specify the height of the image.
width This Attribute use to widen and clarify the image.
ismap This Attribute use to refer to an image as a server-side image map.
loading This Attribute use to specify whether the browser should suspend image loading until certain conditions are met or load the image immediately.
longdesc This Attribute use to specify a URL for a detailed description of the image.
referrerpolicy This Attribute use to specify which referrer information to use when fetching an image.
srcset This Attribute use to specify a list of image files to use in different situations.
usemap This Attribute use to specify images as a client-side image map
crossorigin This Attribute use to import images from third-party sites that allow the use of cross-origin access with canvas.

More Examples

html image to a alt attribute

The <img> alt attribute is used to specify alternate text for the image. When the image is not displayed, that text appears.

<img src="/images/demo/newtajmahal.png" alt="new tajmahal">

Image as a Link

Click on a image open and download image

If you no need download image then remove download attribute

<a href="https://www.webthestuff.com/images/demo/html.png" download>
    <img src="https://www.webthestuff.com/images/demo/html.png" border="0" alt="Webthestuff"  width="400px" height="100%">
</a>

HTML Rounded Image

For that we suggest using the style attribute. It will round the image

<img src="https://www.webthestuff.com/images/demo/tajmahal.png" border="0" alt="Webthestuff"  width="400px" height="400px" style="border-radius: 50%;">

Extensions of images

Compendium Extensions File Format
ICO .ico Microsoft Icon
PNG .png Portable Network Graphics
GIF .gif Graphics interchange format
JPEG .jpg, .jpeg, .jfif, .pjpeg, .pjp Joint Photographic Expert Group image
SVG .svg Scalable Vector Graphics

Image as a gif

<img src="https://www.webthestuff.com/images/demo/click.gif" alt="Webthestuff"  width="100px" height="100%">

HTML All Image Tags

Tag Name Description
<img> Defines an image
<picture> Defines a container for multiple image resources
<area> Defines a clickable area inside an image map
<map> Defines an image map