| Parameters | Description |
|---|---|
| src | Specifies the URL of the image. |
| srcset | Provides images for different scenarios (e.g., high-resolution displays, small monitors, etc.). |
| sizes | Defines image sizes between breakpoints. |
| crossorigin | Determines how the element handles crossorigin requests. |
| usemap | Specifies the name of the image map to use. |
| ismap | Indicates whether the image is a server-side image map. |
| alt | Offers alternative text to display if the image cannot be shown for any reason. |
| wodth | Specifies the width of the image (optional). |
| height | Specifies the height of the image (optional). |
Creating an Image
To insert an image into a page, utilize the image tag. Image tags (img) do not require closing tags. The main attributes for the img tag are src (the image source) and alt (alternative text describing the image).
<img src="images/img.png" alt="This is an Image">
Images can also be sourced from web URLs:
<img src="https://unsplash.com/photos/a-person-typing-on-a-keyboard-at-a-desk-hbMk23Z2ErA" alt="Image of Laptop Desk">
Note: Images are linked to HTML pages; they are not technically inserted into the HTML page. The <img> tag creates a space for the referenced image. It is also possible to embed images directly into the page using base64:
<img src="https://unsplash.com/photos/a-person-typing-on-a-keyboard-at-a-desk-hbMk23Z2ErA" alt="Image Of Laptop Desk">
Tip: To link an image to another document, nest the <img> tag within <a> tags.
Choosing Alt Text
Alt-text is crucial for screen readers and search engines. It should accurately describe the image’s content. For example:
<img src="img.png" alt="This is an Image"/> This is written in the Blog <a href="https://google.com/"><img src="Previous.png" alt="Previous Button"/></a> / <a href="https://google.com/"><img src="Next.png" alt="Next Button"/></a>
Without the images, this would look like:
This is an Image This is written in the Blog
Previous Button / Next Button
To correct this:
- Remove the alt-text as it adds redundant information.
- Remove “Button” from the alt-text for the icons, focusing on their function.
<img src="img.png" alt="/> This is written in the Blog <a href="https://google.com/"><img src="Previous.png" alt="Previous"/></a> / <a href="https://google.com/"><img src="Next.png" alt="Next"/></a>
The presence or absence of the alt attribute conveys a semantic difference. An empty alt attribute implies that the image is supplementary to the content and can be omitted from rendering without affecting comprehension. Conversely, the absence of the alt attribute suggests that the image is integral to the content, and there is no textual equivalent available for rendering.
Responsive Image using the srcset Attribute Utilizing srcset with sizes:
Srcset with Size:
<img sizes="(min-width: 1200px) 580px, (min-width: 640px) 48vw, 98vw" srcset="img/img1.jpg 300w, img/img2.jpg 600w, img/img3.jpg 900w, img/img4.jpg 1200w" src="img/img5.jpg" alt="images">
Sizes attribute functions akin to media queries, dictating the space an image occupies within the viewport. For instance:
- If the viewport exceeds 1200px, the image spans precisely 580px, aligning with a centered content container of maximum 1200px width.
- In the range of 640px to 1200px, the image occupies 48% of the viewport’s width, adapting to the page’s scale.
- For viewports below 640px, the image expands to 98% of the viewport’s width, ensuring full coverage. The media condition is omitted for this scenario.
Srcset informs the browser about available image options and their respective sizes. For instance:
- img/img1.jpg is 300px wide,
- img/img2.jpg is 600px wide,
- img/img3.jpg is 900px wide,
- img/img4.jpg is 1200px wide.
The src attribute is obligatory for specifying the image source. In cases where srcset is used, src serves as a fallback image if the browser does not support srcset.
Using srcset without sizes:
<img src="img/img1.jpg" alt="images" srcset="img/img1.jpg 1x, img/img2.jpg 2x, img/img3.jpg 3x">
This indicates available images based on the device-pixel ratio:
- For a device-pixel ratio of 1, img/img1.jpg is utilized.
- For a ratio of 2, img/img2.jpg is chosen.
- For a ratio of 3, img/img3.jpg is preferred.
Responsive Image using the Picture Element Code:
<picture> source media="(min-width: 600px)" srcset="Img1.jpg"> <source media="(min-width: 450px)" srcset="Img2.jpg"> <img src="Img3.jpg" style="width:auto;"> </picture>
Usage:
Include all images using the source tag within a picture tag.
Result:
On screens with a width >600px, it shows img1.jpg. On screens with a width >450px, it shows Img2.jpg. On screens with other widths, it shows Img3.jpg.