Image tag
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.
Attributes:
Src : Path of the Image
Alt : Alternative text of an image
Width - Specify width to display the image
Height - Specify height to display the image
Syntax:
<html>
<Src = "......." alt ="....." width="......" height="......">
</html>Example:
<!DOCTYPE html>
<html>
<body>
<h1>HTML Image Tag : </h1>
<img src="https://static.wixstatic.com/media/0f65e1_eeec6d85ef0949af8005555e0e00ea7c~mv2.jpg" alt="Girl in a jacket" width="300" height="200">
</body>
</html>
Picture tag
The <picture> tag in HTML is used to give flexibility to the web-developers to specify image resources. The <picture> tag contains <source> and <img> tags. The attribute value is set to load more appropriate image.
The <img> element is used for the last child element of the picture declaration block. The <img> element is used to provide backward compatibility for browsers that do not support the element, or if none of the source tags matched.
Attributes:
src: specify the oath of the image to display
srcset: It allow us to udefine more values. This takes two values as input 1) path of a file and 2) width descriptor of an image (w) or pixel descriptor of an image (x).
media: define the rules on which the image is displayed .
sizes: This can accept more than one media conditions. This is very useful in responsive web designing where we can set the condition and display images accordingly.
types: This attribute allow us to explicitly specify the MIME type of the file to be displayed.
Syntax:
<picture>
<source . . . >
.
.
<source . . . >
<img . . . >
<picture>Example:
<!DOCTYPE html>
<html>
<head>
<title>Picture Tag</title>
<style>
body{
text-align: center;
}
p{
font-size: bold;
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<h2>Example of picture tag</h2>
<p>Resize the page to see the different versions of the images at different viewports, and as per viewport image will be automatically changed.</p>
<picture>
<source srcset="https://static.wixstatic.com/media/0f65e1_c524ba71d13e425f9e1e9cdad9fc7176~mv2.jpg" media="(min-width: 750px)">
<source srcset="https://static.wixstatic.com/media/0f65e1_c524ba71d13e425f9e1e9cdad9fc7176~mv2.jpg" media="(min-width: 450px)">
<img srcset="https://static.wixstatic.com/media/0f65e1_c524ba71d13e425f9e1e9cdad9fc7176~mv2.jpg" alt="default image" style="width: auto;">
</picture>
</body>
</html>
Why Simple <img> Tags Aren’t Enough
The Image Tag <img> is one of the core element of HTML and we prefer to use it because of its simplicity and usability. But the devices are developed according to the modern usage and requirements that is screen size, Resolution and the requirements have changed.
And by the development of the devices, its responsiveness and ability have also changed . There are two major issue in <img> tag which are as follow:
Smaller image size for small screen
Different images on Different Screen Size (Laptop to Mobile)
Resolution switching
The Resolution issue can be solved using <picture > tag with attributed srcset and size.
Today, we all have high resolution images and we always prefer to use everywhere. So in this case if we use <img > tag then You will not get the High resolution image. This will result in slow loading time and image will not be clear.
So if we use picture tag then we will the high resolution image and no matter which is the size of the screen it can be laptop or mobile, image will be clear and attractive.
Art Direction
This helps to display different image based on the screen size of the device. Sometimes, image on laptops are attractive but when the same image is on small screen it get cropped or of small size. with <picture> tag you can easily achieve resolution switching by using multiple <source> tag inside <picture> tag.
<picture>
<source media="(max-width: 767px)" srcset="close-up-image.jpg">
<source media="(min-width: 768px)" srcset="normal-zoom-image.jpg">
<img src="normal-zoom-image.jpg"" alt="Munster Dom"">
</picture>As you can see in the above snippet, <picture> tags are nested tags, whereas <img> tags are not. In other words, <picture> tags have an opening and a closing tag, and they contain child DOM elements: source tags and an <img> tag. In this example, if the screen width is at most 767 pixels, the browser will display the “close-up-image.jpg” image, and ignore all others. Else, if the screen width is at least 768 pixels, the browser will display the “normal-zoom-image.jpg”image, and ignore all others. The last <img> tag is there for backwards compatibility for browsers that do not support <picture> tags.
We can also use <media> attribute to define different media condition including <srcset> and <sizes>.
Which is best?
In this article, we have discussed about Image and Picture tag. Both are used to display the image on web page. But in Image tag there are issue. There are situations in which we use Image Tag <img> because of its simplicity but if we talk about responsive web page we prefer to use Picture Tag <Picture>.
Although we talk about why the picture tag is more prominent than the img tag.
If we use the provided attributes like srcset and size wisely, we can get the maximum out of the img tag. For example, we can resolve Resolution Switching only using the img tag.
On the other hand, we can use picture tag to achieve both Resolution Switching and Art Direction easily using media queries and other provided attributes.
The ability to work with partially supported image types and Chrome DevTools support can be recognized as additional plus points for picture tag.
For more information visit www.thetechplatform.com and don't forget to subscribe us for more posts and articles. Follow us on Social Media @thetechplatform.
Sofia Sondh
The Tech Platform