HTML Images
The image tag in HTML allows developers to incorporate image files into their code for displaying images on web pages.
The syntax for using an image tag is as follows: <img src=" copy image URL">. Here, "img" is the tag name, and "src" is the attribute that should have the URL of the required image assigned to it.
Images can be in different formats such as jpg, gif, png, and others. The choice of image format depends on the specific requirements. For example, banner images are typically in the jpg format, while png images are more suitable for logos or icons. Gif images are often used for animated purposes.
Abbrevation |
File Format |
File Extension |
JPEG |
Joint Photographic Expert Group image |
.jpg, .jpeg, .jfif, .pjpeg, .pjp |
APNG |
Animated Portable Network Graphics |
.apng |
PNG |
Portable Network Graphics |
.png |
SVG |
Scalable Vector Graphics |
.svg |
GIF |
Graphics Interchange Format |
.gif |
ICO |
Microsoft Icon |
.ico, .cur |
There are multiple attributes of <img> tag which help in modify it at different places.
Src Attribute
The src attribute is used to specify the URL from which the browser will retrieve the image. The URL can point to an image in a directory on the same server, or it can reference an image on a third-party server with a different domain name.
Alt Attribute
The alt attribute is used to specify alternative text for a picture on a webpage. In cases where displaying an image is not possible, the browser displays this text to the user. Search engines such as Google and Bing use this alt text to show results in the Image Search.
Align Attribute
The align attribute is used to specify the alignment of a picture on a webpage. By default, the image will align on the left side of the page, but you can use the align attribute to set it in the center, left, or right.
Border Attribute
The border attribute is used to create a border of user-defined thickness around the picture. By default, the image will have a border around it, and you can specify border thickness in terms of pixels using the border attribute. A thickness of 0 means there will be no border around the picture. Note that this attribute has been deprecated in HTML5, and it's recommended to use the CSS property border instead.
Cross-origin Attribute
The cross-origin attribute is used when we want to specify how cross-origin photos should be dealt with. This is mostly used in cases where canvas elements of JavaScript web apps are used.
Width and Height Attribute
The width and height attributes are used to control the width and height of an image tag on an HTML page. You can specify the width and height in terms of either pixels or percentage.
Vspace and Hspace Attribute
The vspace and hspace attributes are used to define the white space which needs to be added horizontally and vertically of the inserted image. You can specify these values in terms of pixels or percentage. Note that this tag has been deprecated in HTML5, and it's recommended to use the CSS property margin instead.
Longdesc attribute
The longdesc attribute is used to give a detailed description of an image by using a URL. The URL specified in the attribute is used as the description of the image.
Ismap Attribute
The ismap attribute is used to define the said image as a server-side image map. When the user clicks (or taps) inside the image, the browser sends the coordinates of the click (or tap) to the web server as a URL.
Usemap Attribute
The Usemap attribute is used to create a client-side image map for an image on a webpage. This attribute is always used in conjunction with map and area HTML tags to define clickable areas within the image that can link to different web pages or sections of the same webpage.
Picture Tag
The picture tag is used to display different images for different screen sizes or devices. It includes a <source> element with the media attribute, which allows for defining different screen sizes. Multiple <source> elements can be used, each referencing different images with the srcset attribute.
Since some browsers do not support the <img> tag, the picture tag provides greater flexibility for web developers to insert images on a webpage.
Supporting Browsers
Element |
|||||
Image |
Yes |
Yes |
Yes |
Yes |
Yes |