HTML – Image Tag Tutorial | The Ultimate Guide for Beginners

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:

Src and 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:

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 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:

Abbreviation	File format	MIME type	File 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:

Attribute	Value	Description
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:

Attribute	Values	Description	Alternate
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.