Construct and Analyze Markup That Displays Images
<img> Image Tag
The <img> tag is used to add a image to a web page. However, technically speaking that image is not really embedded into a webpage, but rather it is linked to the page by the <img> tag.
This tag doesn’t have a closing tag and is a void tag.
<img> Required Attributes
The <img> tag by itself doesn’t actually do anything, well it kind of holds a space in the HTML page to show that an image will be there at some point. In order to have an actual image show up, you are required to provide two attributes to the <img> tag. Those attributes are as follows:
- src – attribute tells the <img> tag where the image is located; almost like a pointer to where the image is. It can accept a relative URL or an absolute URL.
- alt – the alt attribute provides an alternative title to the image in case the image breaks. This attribute is good for screen readers or if for some reason the browser is unable to display the actual image.
Example Code
<img src="dog.png" alt="An image of a dog">
Additional Attributes for the <img> tag
- height – (pixels) – specifies the height of the image.
- width – (width) – specifies the width of the image.
- usemap – (id) – will specify an image as a client-side image map.
- loading – () – used to specify if the image should be loaded at some other time or later in the page load.
- ismap – () – specifies an image as a server-side image.
- crossorigin – () – allows crossorigin access to images.
<picture></picture> Element
The picture element provides more flexibility by allowing the browser to display multiple images to best fit the device the image is being displayed on. The <picture></picture> element has the ability to have multiple sources tags to multiple images on the web. <source> tags are void tags and as such, they don’t have a closing tag.
<source> tag is used inside (sub element) the <picture></picture>element. The source attribute is used to provide instruction to the browser of when it is most appropriate to display the image and when it is located.
- media attribute – defines when the image should be used by the browser.
- srcset – is the location of the image.
<picture>
<source media="(min-width: 600px)", srcset="image.png">
<source media="(min-height: 300px)" srcset="image3.png">
<img src="image.png"> // Just in case the browser doesn't support the
//picture element.
</picture>
//Note: the <img> tag inside of the picture element is used in case a browser doesn't handle the picture element, it can default to the <img> tag. This is what is considered backwards compatibility.