HTML Images – img tag

by

HTML Images: Images are an essential part of web design, and you can display images on a web page using the <img> element

The <img> element is a self-closing tag that is used to embed images into a web page. It doesn’t have a closing tag because it’s not a container; it’s an inline element that displays an image.

HTML Image Tag

The <img> tag is a self-closing tag, which means it doesn’t have a closing tag. It is used to embed images into a web page.

It is required to specify the image source (URL or file path) using the src attribute.

<img src="image-source">

Example –

<img src="https://www.example.com/image.jpg">

 

HTML Image Attributes

In HTML, image attributes are additional properties that can be included within the <img> tag to provide more information about the image

Here are some of the common image attributes used in HTML:

  • src
  • alt
  • title
  • width
  • height
  • loading

src Attribute

This attribute specifies the source URL (Uniform Resource Locator) of the image you want to display.

You can provide either a relative or absolute URL to the image file. For example:

  • Relative URL: "images/my-image.jpg"
  • Absolute URL: "https://example.com/images/my-image.jpg"
<img src="example.jpg" alt="Example Image"

alt Attribute

Using alt attribute, you can provide alternative text, which describes the image. This text will be displayed if the image cannot be loaded or if the user is using a screen reader.

<img src="images/my-image.jpg" alt="My Local Image">

title Attribute

using title attribute, you can provide a tooltip text that is displayed when the user hovers over the image with the mouse pointer

It can be used to provide additional information about the image.

<img src="example.jpg" alt="Example Image" title="Additional information about the image">

width Attribute

Using the width attribute, you can specify the width of the image in pixels.

It can control the size of the image displayed on the webpage.

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

Height Attribute

Using height attribute, You can specify the height of the image in pixels.

It can be used to adjust the vertical size of the image on the webpage.

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

loading Attribute

using loading attribute, you can  control the loading behavior of images in a web page, optimizing performance

<img src="large-image.jpg" alt="A large image" loading="lazy">

Here are the possible values for the loading attribute:

  • loading="lazy": The default value. The image is loaded when it’s about to enter the user’s viewport.
  • loading="eager": The image is loaded immediately, even if it’s not visible in the viewport.
  • loading="auto": The browser determines when to load the image based on what it thinks is best for performance.

border attribute

Using border attribute, You can specify the width of a border around an image.

<img src="image.jpg" alt="Image with Border" border="1">

align attribute

Using align attribute, You can specify how an image should be aligned concerning the surrounding text or content.

It determines the horizontal alignment of the image.

  1. align="left": This would align the image to the left, allowing the text to flow to the right of the image.
  2. align="right": This would align the image to the right, allowing the text to flow to the left of the image.
  3. align="top": This would align the top of the image with the baseline of the surrounding text.
  4. align="middle": This would align the middle of the image with the baseline of the surrounding text.
  5. align="bottom": This would align the bottom of the image with the baseline of the surrounding text.
<img src="image-source.jpg"  align="left">