Html imagetag LEARNOVITA

HTML – Image Tag Tutorial | The Ultimate Guide for Beginners

Last updated on 12th Aug 2022, Blog, Tutorials

About author

Yeshwant singh (Html Developer )

Yeshwant Singh is an Html Developer with 6+ years of experience in a reputed company. He has expertise in HTML and CSS, PHP and MySQL, Javascript, and Node JS. He spends most of his time researching technology and startups.

(5.0) | 19248 Ratings 2002

Introduction:

The <"img"> tag is used to insert an image into a HTML document.The image itself is not inserted directly into a document, the browser inserts an HTML image from a source specified in the <"img"> tag.There are two needed attributes for an <"img"> element: src which is used to display the image source, and alt which explains an alternate text for the image.To make HTML images clickable, you should place the <"img"> tag inside the <"a"> tag, which is used for inserting an HTML image link.

Syntax:

The <"img"> tag is empty, which means that the closing tag is not required.It contains only attributes.But in XHTML, the (<"img">) tag must be a closed (<"img/">).

Example of the HTML <"img"> tag:

  • <"!DOCTYPE html">
  • <"html">
  • <"head">
  • <"title">Title of the document<"/title">
  • <"/head">
  • <"body">
  • <"h1">Heading <"/h1">
  • <"p">This is Aleq’s photo<"/p">
  • <"img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" <"/height="185"/"><"/height="185"">
  • <"/body">
  • <"/html">
  • example of the <"img"> tag styled with CSS:
  • <"!DOCTYPE html">
  • <"html">
  • <"head">
  • <"title">Title of the document<"/title">
  • <"style">
  • img {
  • border-radius: 50%;
  • border: 4px dashed #077cb9;
  • width: 300px;
  • display: block;
  • margin: 0 auto;
  • }
  • <"/style">
  • <"/head">
  • <"body">
  • <"div">
  • <"img src="/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="2
  • height=”256″>
  • <"/div">
  • <"/body">
  • <"/html">

Src and Alt Attributes:

Alt Attributes
  • The src (source) attribute displays the image source.
  • It is required, as it explains the path to the image.
  • The file name or its URL can be used as the value of the href property.
  • The alt attribute explains an alternate name for an image.
  • It is required for the <"img"> tag also.
  • Its value is a descriptive text shown in the browser before the image is loaded.
  • The browser also displays this text when you hover over the image.

Example of the HTML <"img"> tag with the src and alt attributes:

  • <"!DOCTYPE html">
  • <"html">
  • <"head">
  • <"title">Title of the document<"/title">
  • <"/head">
  • <"body">
  • <"img src="/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256""><"/height="256"">
  • <"/body">
  • <"/html">

The new loading attribute:

There is a new HTML loading attribute that allows deferring an image and iframe loading until they are close to being..This functionality is already included in Chromium and has a pull request from the WHATWG (as of v76).Supported values for a loading attribute include:

  • “Lazy” refers to the load until the image or iframe reaches a distance threshold from a viewport.
  • “eager” which loads a resource immediately.
  • “auto” , which is a default behavior, loads the resource.
  • Can use the lazy value to take advantage of the browser-native lazy loading:
  • <"img src="defer.png" loading="lazy" alt="Beautiful" width="500" height="400"">
  • Lazy loading is a set of techniques in web and application development that defers the loading of resources on the page to a later point in time when those resources are required instead of loading them upfront.
  • These techniques help to improve performance and utilization of a device’s resources reducing associated costs.

Supported Image Formats:

Image Formats

Image file formats are standardized means to organize and save digital images.An image file format may save data in an uncompressed format, a compressed format (which may be lossless or lossy), or a vector format. (Wikipedia).Every user agent supports various image formats.Here is the list of general image formats:

    AbbreviationFile formatMIME typeFile extension(s)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 be some errors while loading the image.If an on error event handler has set on the error event, that event handler will get called.Here can found the situations when this happen:

  • The src attribute is an empty (“”) or null.
  • The src URL and the URL of the page the user is currently on are the same.
  • Some corruption of an 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 denoted in the attributes of the <"img"> tag.
  • The format is not supported by a user agent.

Attributes:

    AttributeValueDescription
    align left,right,top,bottom,middle. Explains the alignment of the image in reference to surrounding elements.Not supported in HTML5.
    alt text Explains the alternate text for the image.
    border pixels Explains the width of the border around the image.
    Not supported in HTML5. crossorigin Explains , whether the CORS (a technology, that allows a web page to access resources from the another domain) is used when loading the image. Images, uploaded via CORS, can be used in the <"canvas"> element without limiting the functionality of a latter.
    hspace pixels Explain spaces at the left and right sides of the image.Not supported in HTML5.
    ismap ismap Denote that the contents of the tag is a server-side image map.
    longdesc URL Specifies the URL address with the detailed description of the image (For a short description of the image, use the alt attribute.Not supported in HTML5.
    src URL Explains the source of the image.
    usemap #mapname Denote a link to the <"map> element, which contains the coordinates for the client map image.
    vspace pixels Explain spaces at the top and bottom of the image.Not supported in HTML5.
    width pixels Explain the width of the image.

The <"img"> tag encourages the Global Attributes and the Event Attributes.

Deprecated Attributes:

    AttributeValuesDescriptionAlternate
    align left right top
    bottom middle Explains the alignment of the image in reference to surrounding elements. Centers the HTML image of an image in reference to surrounding elements. The float and/or vertical-align the CSS properties.borderpixelsExplains theF width of the border around the image.A border CSS property.
    hspace The margin CSS property instead.
    name Denote a name for the element The id attribute.
    vspace pixels Explains spaces at the top and bottom of the image. Use a margin CSS property instead.

Are you looking training with Right Jobs?

Contact Us

Popular Courses