Image Tag vs Picture tag ?

There are two types of tags to display images in HTML : img tag and Picture tag. Before understanding, which one to use or which one is better, we need to understand about a very important topic called image resolution.

Higher the resolution of image, higher is the quality and higher is the size of image(e.g, 500kb, or 2mb or anything). Higher is the size of image, the more bandwidth or high speed internet connection is needed to download and display the image. Normally laptops or desktops are connected with high speed internet so its easy to display high resolution images there, but very slow to display in mobile because mobile internet is little slow. This concept we will use in image vs picture comparision

Image Tag

This tag is used to display any images by simply providing the image path (either stored locally) or image url if hosted remotely.

Now whenever we talk about images, we always need to talk about responsive images only (meaning the images which adapt to different screen width easily. If we stretch the screen width, image should scale up and if we compress the screen width, then image width should scale down accordingly). 

// Basic img tag usage

// relative url path, stored locally
<img src="/profile.jpg" 
  alt="Profile Picture 
> 

//remote url
<img src="https://cdn.pixabay.com/photo/2023/05/14/19/42/sky-7993656_1280.jpg" alt="Profile Picture > 

css::
img{
  width: 100%;
}


A basic img tag takes 2 attributes src and alt.
src attribute takes the path or url of image to be displayed. alt attribute takes a string/text which gets displayed when image is not loaded on screen and is very good for SEO purposes.

And the css img{ width: 100% } is what makes image responsive, meaning the image will always be 100% of its parent container, if parent container increases in width then also, and if it decreases in width then also.

We already talked about responsive images, now on a very advanced level, we need to understand 2 very very important and advanced topics::
  • Resolution switching : switching to smaller size images on small screen devices.
  • Art Direction : displaying different images on different screen widths or devices.


Now img tag can handle resolution switching using srcset and sizes attributes. We need to understand that why do we need this resolution switching feature at all. Remember image resolution i explained above, high resolution images can be displayed in a fast way on laptop and desktop screen but for the same high resolution image to display in mobile screen on a low internet connection, it will take a lot of time, and thats why we need resolution switching.
Some example along with explanation will clear more doubts:: 

<img srcset="small-fruit-image.jpg 500w,
             medium-fruit-image.jpg 800w,
             large-fruit-image.jpg 1250w"
    
     sizes="(min-width: 1200px) 850px,
            (min-width: 768px) 400px,
            100vw"
     
     src="medium-fruit-image.jpg" alt="Fruit">


Now in the above img tag we need to focus only on 2 attributes, i.e srcset and sizes.

First srcset attribute takes a lot of images(image path) along with sizes separated by comma. Sizes are like 500w (meaning 500px width(w)), 800w (meaning 800px width) etc.

Now there are 3 images:: small-fruit-image.jpg, medium-fruit-image.jpg, large-fruit-image.jpg, in that image tag, which browser automatically uses to switch from.

From 0px to 500px screen (as defined with image), small-fruit-image.jpg will be displayed.

From 501px to 800px screen (as defined with image), medium-fruit-image.jpg will be displayed.

From 801px to 1250px screen (as defined with image), large-fruit-image.jpg will be displayed.

And for any other sizes,src attribute images will be displayed as fallback.

Now the second attribute is sizes, that will tell the browser how big the image will be at different screen sizes using different media queries.
sizes="(min-width: 1200px) 850px, (min-width: 768px) 400px, 100vw"

Now from 1200 px min-width onwards, whichever image appears on screen (in this case, large-fruit-image.jpg), the image width will always be 850px.
Also from 768 px min-width onwards till 1199px, whichever image appears on screen (in this case, medium-fruit-image.jpg), the image width will always be 400px, and in any other width, whichever image appears, it will be 100vw only.


Note::
It is recommended to use img tag with src and alt attribute for normal usecases.
But if you have different width images then use srcSet attribute along width src and alt attribute. Usage of sizes is optional and upto you.

Picture Tag

If we need to display image along with resolution switching and art direction, then we use picture tag. Most of time a simple image tag does its job.

A simple example of Picture tag :: 


<picture>
  <source srcset="test.avif" media="(max-width: 767px)" type="image/avif">
  <source srcset="test.webp" type="image/webp" media="(min-width: 768px)">
  <img src="test.png" alt="test image">
</picture>


If you see the picture tag, here we have 2 source tags defining 2 images with their media query, and one img tag which is the fallback image if picture tag is not supported in some browser or if none of image is visible on screen. In the first source tag srcSet defines the image path, and media attribute tells that, this image will be visible from 0px to 767px. And second source tag image will be visible from 768px onwards.

Note::
Using picture tag is an overkill in most of the scenarios except some very specific case (explained above). A simple img tag is recommended for most of the scenarios.

PrevNext