DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <img> Image Tag

#learnhtml #htmli

In HTML, the Image tag is used to display the image on the web page. Images are not directly inserted into the document, they are linked to the HTML pages. The tag creates a holding space for the referenced image. It can be styled and manipulated using CSS properties.

  • There are two required attributes for a tag. They are:
    • Src attribute – Define the path of the image.
    • Alt attribute – It specifies the alternate text for the image.

💡 Tips : You can also make the HTML images clickable , by using the tag inside the tag.

Estimated reading time: 6 minutes

Syntax:

The tag does not require the closing tag in HTML. But in XHTML , it contains both the opening tag and closing tag.


<img src="URL" alt="text">
Enter fullscreen mode Exit fullscreen mode

Sample of the HTML Tag:

Here is the example for HTML image tag.


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <img> Tag</title>
  </head>
  <body>
    <h2>Example of the HTML <img> Tag</h2>
    <p>Share Ponit Anchor</p>
    <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo">
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Try it Yourself Online

Result:

Result

Download Sample File:

HTML-img-tagDownload

Use CSS property to style the tag:

You can also use the CSS styling property to change the initial appearance of an image.

Sample of the tag with CSS property : 


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <img> Tag</title>
    <style>
      img {
      border-radius: 10%;
      border: 2px dashed #C40655;
      width: 250px;
      display: block;
      margin: 0 auto;
      }
    </style>
  </head>
  <body>
   <h2>Example of the HTML <img> Tag</h2>
    <div>
     <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo">
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Try it Yourself Online

Result:

Result

Src and Alt Attributes:

The “src” attribute stands for source. This attribute tells the browser where to find the image you want to display. The value of the href attribute can be either the file name or its URL.

The “alt” attribute stands for alternate text. This attribute is used to inform the browser that if it can’t find the image, then just display the given text.

💡 Tips : It is recommended to include keywords in “alternate text” , it will improve the ranking of the website in search engines.

Sample of the HTML tag with the src and alt attributes: 


<!DOCTYPE html>
<html>
  <head>
    <title>HTML <img> Tag</title>
  </head>
  <body>
  <h2>Example of the HTML <img> Tag</h2>
    <img src="https://sharepointanchor.com/wp-content/uploads/2021/01/SPA-LOGO.png" alt="SPA Logo" width="256" height="256">
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Try it Yourself Online

Note : Always try to insert the image with height and width, else it may flicker while displaying on a webpage.

Result:

Result

HTML tag with “loading” Attribute:

In HTML, there is a new loading attribute is available to deferring image and iframe loading until they are close to being shown. This is one of the parts of Chromium (as of v76).

The loading attribute will support the following values:

  • Lazy – It delays the load until the image or iframe reaches a distance threshold from the viewport.
  • Eager – This value loads the resource immediately.
  • Auto – It is the default behavior , loads the resource.

Supported Images Formats:

The HTML standard doesn’t list what image formats to support, so each user agent supports different formats.

Here is the image file formats that are most commonly used on the web page:

th, td{ padding: 20px; }

Abbreviation File Format MIME Type File Extensions Browser Compatibility
APNG Animated Portable Network Graphics image/apng .apng
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari | | BMP | Bitmap file | image/bmp | .bmp |
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari | | GIF | Graphics Interchange Format | image/gif | .gif |
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari | | ICO | Microsoft Icon | image/x-icon |
  • .ico
  • .cur |
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari | | JPEG | Joint Photographic Expert Group image | image/jpeg |
  • .jpg
  • .jpeg
  • .jfif
  • .pjpeg
  • .pjp |
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari | | PNG | Portable Network Graphics | image/png | .png |
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari | | SVG | Scalable Vector Graphics | image/svg+xml | .svg |
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari | | TIFF | Tagged Image File Format | image/tiff |
  • .tif
  • .tiff | None. Built-in; add-ons required | | WebP | Web Picture format | image/webp | .webp |
  • Chrome
  • Edge
  • Firefox
  • Opera |

Image Loading Errors:

There may occur some errors while loading an image. This can happen in the following situations:

  • The “src” attribute is empty (” “) or “Null”.
  • The “src” URL is the same as the URL of the page the user is currently on.
  • Some corruption of the image prevents it from being loaded.
  • The metadata of the image is corrupted in such a way that makes it impossible to retrieve its dimensions, and there are no dimensions specified in the attributes of the tag.
  • The file format is not supported by the user agent.

Attributes:

The HTML image tag supports the Global Attributes and the Event Attributes.

th, td{ padding: 20px; }

Attribute Value Description
align
  • left
  • right
  • top
  • bottom
  • middle | This attribute defines the alignment of the image in reference to surrounding elements. Not supported in HTML 5. | | alt | text | It specifies the alternate text for the image. | | border | pixels | Used to define the width of the border around the image. It is not supported in HTML 5. | | crossorigin | | | This attribute will help to specify whether the CORS is used when loading the image. Images, uploaded via CORS, can be used in the element without limiting the functionality of the latter. | | anonymous | CORS requests from this element will not pass credentials. | | use-credentials | The CORS requests from this element will pass credentials. It is a new attribute in HTML 5. | | height | pixels | This value specifies the height of the image. | | hspace | pixels | It is used to define the spaces at the left and right sides of the image. Not supported in HTML5. | | ismap | ismap | This tag specifies that the contents of the tag are a server-side image map. | | longdesc | URL | It is used to specify the URL address with a detailed description of the image ( For a short description of the image, use the alt attribute). Not supported in HTML5. | | src | URL | This value defines the source of the image. | | usemap | #mapname | Helps to define a link to the element , which contains the coordinates for the client map image. | | vspace | pixels | It specifies the spaces at the top and bottom of the image. Not supported in HTML5. | | width | pixels | This value defines the width of the image. |

Deprecated Attributes:

Here the list of deprecated HTML attributes and its alternate methods are listed below:

th, td{ padding: 20px; }

Attribute Values Description Alternate
align
  • left
  • right
  • top
  • bottom
  • middle | This attribute will help to specify the alignment of the image in reference to surrounding elements. Centers the HTML image of the image in reference to surrounding elements. | The CSS vertical-align and/or float properties. | | border | pixels | It defines the width of the border around the image. | The CSS border property. | | hspace | | This is used to specify the horizontal spaces around the image. | Use the CSS margin property instead. | | name | | Specifies a name for the element | You can use the “id” attribute. | | vspace | pixels | This will define spaces at the top and bottom of the image. | Use the CSS margin property instead. |

Browser Support:

Browser Support

Related Articles:

The post HTML Image Tag appeared first on Share Point Anchor.

Top comments (0)

Read next

afolabi_abdulsamad_52f6de profile image

Programming Problem Solving: C++ Case Study

Afolabi Abdulsamad -

bsorrentino profile image

GenAIScript - Comment Code with AI

bsorrentino -

raihanstark profile image

12 Projects In 12 Months Challenge

Raihan Yudo Saputra -

javaparainiciantes profile image

Tipos brutos e código legado

Java para Iniciantes (Oracle) -