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
Example
Edit it yourself<img src="https://www.webthestuff.com/images/demo/sparrow.png" width="100%" hight="100%">HTML Image Relative url
Example
Edit it yourself<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.
Example
Edit it yourself<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
Example
Edit it yourself<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
Example
Edit it yourself<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
Example
Edit it yourself<img src="https://www.webthestuff.com/images/demo/click.gif" alt="Webthestuff" width="100px" height="100%">