JavaScript Tutorial

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

“Google Chrome

Microsoft

Firefox

Opera

Safari

Image

Yes

Yes

Yes

Yes

Yes

Go back to Previous Course