HTML ![]()
Tag
The tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.
The tag has two required attributes:
- src — Specifies the path to the image
- alt — Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the tag inside an tag (see example below).
Browser Support
Attributes
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for an image |
| crossorigin | anonymous use-credentials | Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| ismap | ismap | Specifies an image as a server-side image map |
| loading | eager lazy | Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met |
| longdesc | URL | Specifies a URL to a detailed description of an image |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Specifies which referrer information to use when fetching an image |
| sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
| srcset | URL-list | Specifies a list of image files to use in different situations |
| usemap | #mapname | Specifies an image as a client-side image map |
| width | pixels | Specifies the width of an image |
HTML Tag
The element contains versions of an image for different display device scenarios. The element describes the image’s size and other attributes. The browser considers each of the child elements and loads the most appropriate image. If no matches are found, the browser displays the image specified by the
tag.
The element allows to specify several images designed to more correctly fill the browser viewport instead of having one image scaled based on the viewport width. It can be used for the following purposes:
- to crop and modify images for different media conditions,
- to offer alternative image formats when specific formats are not supported.
Use the object-position property to adapt the positioning of the image inside of the frame of the element, and the object-fit property to control how the image should be resized to fit inside the frame.
Syntax
The
Example of the HTML tag:
html> html> head> title>Title of the document title> head> body> picture> source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg"> source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"> img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;"> picture> p>Some information about pictures p> body> html>Attributes
| Attributes | Value | Description |
|---|---|---|
| media | media_query | Accepts any valid media query that would normally be defined in a CSS. |
| sizes | Defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor. New attribute in HTML5. | |
| src | URL | Specifies the URL of the image. |
| srcset | URL | (required)Specifies the URL of the image to use in different situations. New attribute in HTML5. |
| type | video/ogg video/mp4 video/webm audio/ogg audio/mpeg | Defines the MIME type. |
Browser support
HTML ![]()
Tag
The tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.
The tag has two required attributes:
- src — Specifies the path to the image
- alt — Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the tag inside an tag (see example below).
Browser Support
Attributes
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for an image |
| crossorigin | anonymous use-credentials | Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| ismap | ismap | Specifies an image as a server-side image map |
| loading | eager lazy | Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met |
| longdesc | URL | Specifies a URL to a detailed description of an image |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Specifies which referrer information to use when fetching an image |
| sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
| srcset | URL-list | Specifies a list of image files to use in different situations |
| usemap | #mapname | Specifies an image as a client-side image map |
| width | pixels | Specifies the width of an image |