HTML Images

HTML allows for images to be inserted in a web document. Images can be used directly on the web or it can be used as a background to some other HTML element like <div>. The images can be inserted using the <img> tag.

Insert Image

The <img> tag is used to display an image in a web page. Here is an example on how to insert the image.

<img src="file.png" />

Set Image Location

An image can be inserted using absolute and relaive paths. That is, the image can be part of the present website or picked from a different webpage.

<img src="file.png" /> <img src="sub-folder/file.png" /> <img src="" />

Set Image Width/Height

The height and the width attribute allows to specify the height and the width of the image. If not set, the actual height and width of the image will be displayed. It is best to have the image ready in the required height and width. Having a large image displayed as a smaller means that a large image needs to be downloaded instead of the smaller one. On the other hard, if a smaller image is zoomed in with higher height and width, it may not display correctly.

<!--height and width are in pixels--> <img src="file.png" height="10" width="20" />

The alt Attribute and longdesc attribute

The alt attribute is used to specify an alternate text when the image could not be downloaded. Therefore, it is important to set the alternate text properly. This might also be used by search engines to rank the image and page and by non-visual screen readers to determine what to display or read out in situations. If the image is not important then set the alt attribute to empty as in "". However, not having the alt alltribute means that the image is important, however, a description is not available.

The longdesc attribute should be used to suplement the alt attribute. The longdesc attribute contains a link to URL that contains a comprehensive description of the image.

<img src="file.png" alt="" longdesc="#desc-here" /> <img src="file.png" alt="" longdesc="file.html" /> <img src="file.png" alt="" longdesc="" />

Animated Images

Animated images are animated gif images and is used in the same as using any other image.

<img src="file.gif" />

Using an Image as a Link

An image can be used as a link simply by marking up the <img> element within the <a> tag as shown below. SImilar examples are available on the link page.

<a href="#"><img src="file.png" /></a>

Image Floating

An image by default will take up the position as defined within the structure of the HTML document. An image, like any other HTML element can be styled and positioned differently. For example, by using the float style, an image can be set to float in the right or at the left of the page.

<img src="file.png" style="float:right;" /> <img src="file.png" style="float:left;" />

Image Maps

An image map is cool in the sense that it lets an image have multiple clickable area with different actions. An image map is set using the <map> tag. The image tag contains multiple <area> element that defines the different clickable option.Important attributes to note are the shape attribute that defines the type of shape like rectangle or circle for the clickable area, the coords attribute that defines the location and area and the href attribute that defines the link.

<img src="file.png" width="300" height="200" alt="Map" usemap="#worldmap"> <map name="worldmap"> <area shape="rect" coords="0,0,82,126" href="America.htm1" alt="America"> <area shape="circle" coords="90,58,3" href="China.htm1" alt="China"> <area shape="circle" coords="124,58,8" href="Australia.htm1" alt="Australia"> </map>

Set Image Border

An image, like most other HTML elements, can have any styles. For example, border can be set for an image by using the border style.

Previously, the <img> attribute could have border attribute which has been deprecated in HTML5.

<img src="file.png" style="border:2px solid #ccc;" />

Set Image Alignment

In HTML4 and previous, the align attribute of <img> tag could be used to set the alignment of the image. However, from HTML5 onwards, the align attribute has been deprecated and the float and vertical-align CSS properties can be used to set the alignment.

<img src="file.png" style="float:right; vertical-align:middle" />

Different images depending on the device

The <img> tag contains the sizes and srcset attribute that allows to set multiple image sources based on the size of the screen.

The sizes attribute contains a list of strings separated by comma. The strings contain a media condition and the source size. The last item is the default size and the media condition needs to be omitted for this. The user agent uses the current size of the screen to select the most suitable images and display it.

The srcset attribute contains a comma-separated list of strings that contains the URL to the image and the width or pixel density for the image. The srcset attribute must be present for the sizes attribute to work correctly.

The user agent can still choose from any of the sources specified as might be set by the user�s preference in the device.

<img src="file.png" alt="file" srcset="file-300.png 300w, file-400.png 400w" sizes="(min-width: 600px) 200px, 50vw" />


The crossorigin attribute introduced in HTML5 specifies whether related images should be fetched using CORS (Cross-Origin Resource Sharing) or not. In short, CORS allows a browser to securely load content (images, etc) from a different domain using scripts.

The crossorigin attribute can be set to anonymous and use-credentials

Anonymous: A cross-origin request is performed but without any credentials. If the server does not send back "Access-Control-Allow-Origin" header, then the use of the image will be limited.

Use-credentials: A cross-origin request is performed with credentials in the form pf a cookie, basic HTTP authentication or x.509 certificate. If the server does not send back "Access-Control-Allow-Credentials" header, then the use of the image will be limited.

<img alt="image" crossorigin="anonymous" src="http://..." />

Supported image formats

HTML specification does not provide a list of supported image formats and it is up to the browser to support whichever formats. The most commonly used formats used on the web are

  • JPEG
  • GIF
  • PNG
  • SVG