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.
The <img> tag is used to display an image in a web page. Here is an example on how to insert the image.
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.
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.
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.
Animated images are animated gif images and is used in the same as using any other image.
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.
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.
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.
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.
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.
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.
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.
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