HTML Images - Attributes and Formats

Created: 4th Jul 23 1 Views

Review needed

Verified

Learning HTML is fun, and adding images to your HTML pages makes them look so attractive and catchy! It is not wrong to say that a webpage on a website is not complete until it has some images added to them.

The <img> tag in HTML

The <img> tag, shortform for "image". It is one of the fundamental tag in HTML. <img> tag was introduced in the initial HTML specification, HTML 2.0, which was released in 1995.

The src attribute of <img> tag

The src attribute is the required attribute that has to be used along with the <img> tag. It is used to add the URL or file path of the image that you want to be displayed.

Note: Without the src attribute, the <img> tag will not display the image and will not function as intended.

Our HTML First Image Example

my-dog-page.html

<html>

<head>
    <title>My Dog's Webpage</title>
</head>

<body>
    
<h1>My Dog!</h1>

<img src="https://code2care.org/howto/change-css-background-opacity-examples/images/dog-profile-image.jpg"/>

</body>
</html>

Let's see how our first images look on the web browser.

Setting width and height to HTML Image

Though our image looks good, don't you think it needs to be resized? We can do that using the width and the height attributes.

<img width=300 height=300 src="https://code2care.org/howto/change-css-background-opacity-examples/images/dog-profile-image.jpg"/>

The image looks perfect now!

Add alternative text on hover on HTML image

To add an alternate text when you hover on the image or to be displayed if the SRC path or URL is broken we can make use of the alt tag

<img alt="This is my dog Oscar!" width=300 height=300 src="/broken/images/dog-profile-image.jpg"/>

List of all attributes supported by HTML img tag

Attribute	Usage
`alt`	To provides alternative text for the image
`src`	To specify the URL or file path of the image
`srcset`	To specify multiple sources for the image
`sizes`	To specify image sizes for responsive design
`crossorigin`	To specify how the image handles cross-origin requests
`usemap`	To specify an image map for clickable regions
`ismap`	To specify an image as a server-side image map
`width`	To specify the width of the image
`height`	To specify the height of the image
`loading`	To specify the image loading behavior
`decoding`	To specify the image decoding behavior
`align`	To specify the alignment of the image within text
`hspace`	To specify horizontal space around the image
`vspace`	To specify vertical space around the image
`border`	To specify the border size around the image
`longdesc`	Provides a URL to a long description of the image
`usemap`	To specify an image map for clickable regions
`ismap`	To specify an image as a server-side image map
`referrerpolicy`	To specify the policy for sending referrer information
`loading`	To specify the image loading behavior
`decoding`	To specify the image decoding behavior
`importance`	To specify the image rendering priority
`intrinsicsize`	To specify the intrinsic size of the image
`title`	To specify a title or tooltip for the image
`aria-*`	Various attributes for accessibility purposes
`data-*`	Custom data attributes for storing extra information
`class`	To specify one or more class names for the image
`style`	To specify inline CSS styles for the image
`id`	To specify a unique identifier for the image
`name`	To specify a name for the image (useful for forms)
`role`	To specify the role of the image in the document
`tabindex`	To specify the tabbing order of the image
`accesskey`	To specify a shortcut key for the image
`draggable`	To specify whether the image is draggable
`hidden`	To specify whether the image is visible or hidden
`contenteditable`	To specify whether the image's content is editable
`spellcheck`	To specify whether the browser should check spelling
`autocorrect`	To specify whether the browser should auto-correct
`autocapitalize`	To specify how the browser should capitalize the image
`dir`	To specify the text direction for the image
`lang`	To specify the language of the image
`translate`	To specify whether the image should be translated
`role`	To specify the role of the image in the document
`aria-*`	Various attributes for accessibility purposes

List of most common HTML Image file formats

Image Format	File Extensions
JPEG	.jpeg, .jpg
PNG	.png
GIF	.gif
BMP	.bmp
TIFF	.tif, .tiff
WebP	.webp
SVG	.svg
ICO	.ico
APNG	.apng
HDR	.hdr
EXR	.exr
HEIF	.heif, .heic
PDF	.pdf
PSD	.psd
AI	.ai
EPS	.eps
RAW (Camera)	.raw
PICT	.pict
XBM	.xbm