CODEWITHSUNDEEP
htmlimage
Rounak Khan
Rounak Khan

Reputation: 21

Does html picture tag saves bandwidth

currently i am using big images using <img> tag to fit for all screen sizes. If i use <picture> tag will it saves bandwidth or page loading time when small image will load for small screen?

Need opinion please.

Upvotes: 0

Views: 399

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28554

If you are talking about the same, single source as in the example below (which wouldn't make sense anyway), then no.

<picture>
    <img srcset="default.jpg" alt="Default">
</picture>

If you are talking about using different image sources, then yes. A browser will only load the most appropriate image for the current media. E.g. (source):

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

Note that you'll need a polyfill to use picture in IE.

Upvotes: 1

Quentin
Quentin

Reputation: 944527

No. A picture tag requires more characters to type than an img tag so it will take up more (although not significantly more) bandwidth.

You might be conflating the picture element with responsive images (which can be achieved using both picture and img elements).

Upvotes: 0

Related Questions