Adding images on a webpage
The <img> tag embeds images in web pages, requiring only attributes without a closing tag. Images enhance design and content quality, linked via the <img> tag to preserve space and optimize webpage performance.
Syntax:
<img src="url" alt="some_text" width="" height="">
Attribute: The <img> tag has following attributes:
Attribute | Description |
---|---|
src | Specifies the path to the image file. |
alt | Provides alternate text for the image, useful for accessibility and when the image cannot be displayed. |
crossorigin | Allows importing images from third-party sites with cross-origin access, typically used with canvas. |
height | Specifies the height of the image. |
width | Specifies the width of the image. |
ismap | Specifies an image as a server-side image map. |
loading | Specifies whether the browser should defer image loading or load it immediately. |
longdesc | Specifies a URL to a detailed description of the image. |
referrerpolicy | Specifies which referrer information to use when fetching the image. |
sizes | Specifies image sizes for different page layouts. |
srcset | Specifies a list of image files to use in different situations, allowing for responsive images. |
usemap | Specifies an image as a client-side image map. |
HTML Images
The HTML <img> tag is used to embed an image in web pages by linking them. It creates a placeholder for the image, defined by attributes like src, width, height, and alt, and does not require a closing tag.
There are 2 ways to insert the images into a webpage:
- By providing a full path or address (URL) to access an internet file.
- By providing the file path relative to the location of the current web page file.
We will first discuss inserting the image into the webpage & simultaneously, we will understand both the above approaches.
Contact Us