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.
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.
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).
Related
I have a simple responsive and i want to use Img srcset feature to serve images based on device/screen size.
I tried it two ways first one works and serves the Mobile, Tablet or desktop version of image based on the device size or closest match
Option 1
<picture class="livery-imgset">
<source srcset="Images/livery_mobile.jpg" media="(max-width: 500px)">
<source srcset="Images/livery_tablet.jpg" media="(max-width: 768px)">
<source srcset="Images/livery_desktop.jpg" media="(min-width: 769px)">
<img src="Images/livery_desktop.jpg" alt="Offers">
</picture>
Option 1 code works fine and serves mobile version of image if screen width smaller than 501 pixels; serves tablet version if screens width is between 501px & 768px; and serves desktop version of screen is larger than 768px.
Option 2
I wanted to try same with Option 2, but it only serves desktop version of image. not sure what is wrong with the code
<img class="livery-imgset" src="Images/livery_desktop.jpg"
srcset="Images/livery_mobile.jpg 414w,
Images/livery_tablet.jpg 768w,
Images/livery_desktop.jpg 1200w"
sizes="(min-width:1200px) 1050px, 100vw" alt="Offers" />
Also which is more practical option to be used for page performance when it comes to responsive images <Picture Srcset=... or <Image Scrset=...
I'm trying to best describe to the browser which image to pick from a srcset list using the sizes attribute.
Basic is:
<picture>
<source
type="image/jpeg"
media="(min-width: 1024px)"
srcset="a.jpg 1024w, b.jpg 1200w, c.jpg 2048w, d.jpg 2400w"
sizes="100vw"
>
<img src="e.jpg">
</picture>
Now you might have a "max viewport" at which point your webpage "stops growing", so you add a media query in your sizes:
<source
...
sizes="(min-width: 1200px) 1200px, 100vw"
>
Your image might also have some padding, so you might be tempted to use 98vw instead of 100vw but that's not always accurate if the paddings are in pixels for example, so what you can do instead it use calc:
<source
...
sizes="(min-width: 1200px) 1200px, calc(100vw - 20px)"
>
So far we've only been using absolute units, but I've read you can also use context-dependent units like em:
<source
...
sizes="(min-width: 1200px) 1200px, calc(100vw - 2em)"
>
Interestingly, that means the browser must be aware of the styles being applied to the image (since em can change based on CSS). So if this is true, could you use CSS custom properties (or "CSS variables") in your sizes?
<source
...
sizes="(min-width: 1200px) 1200px, calc(var(--six-columns) - var(--image-padding))"
>
Thanks!
As a bonus question: any idea where I could find the browser support for such a thing?
The answer to this is NO!
When using em as a unit inside the sizes attribute, the browser will use a fixed predetermined size (14px in chrome apparently, determined experimentally).
In the end, no information actually comes from CSS, and CSS custom properties aren't actually usable that way.
My code shown below works fine on desktop computer, raplacing images with different sizes when I resize window.
But it does not work when I open website on mobile. On mobile web browser image with 'xlg' name is beeing loaded. Instead I would like of course the 'sm' image to be loaded.
Can anyone tell me, where is the problem ?
I also used
<picture><source></source></picture>
but in this situation I must present image in this way.
<img
srcset="sm.jpg 768w,
md.jpg 1024w,
lg.jpg 1440w,
xlg.jpg 1600w"
sizes="(max-width: 768px) 768px,
(max-width: 1024px) 1024px,
(max-width: 1440px) 1440px,
(min-width: 1441px) 1600px"
src="sm.jpg"
alt="">
Why for mobile, it shows me xlg.jpg image ? Does anyone know ?
If I understood your comment correctly, then those browsers plain simply don't support the srcset. If you check caniuse then you see that Opera Mini and the default Android browser don't support that functionality.
So you are probably looking for something that can never work.
You may try this for the dynamic images.
HTML srcset Attribute
This example works for me in desktop and mobile correctly.
From the example, your code may looks like this:
<picture>
<source media="(min-width: 1440px)" srcset="xlg.jpg">
<source media="(min-width: 1024px)" srcset="lg.jpg">
<source media="(min-width: 768px)" srcset="md.jpg">
<img src="sm.jpg" alt="" style="width:auto;">
</picture>
I'm building a responsive Wordpress website. The blog feed has a list of stories which have a title and an image. The image sizes should be as follows:
up to 479px wide - 140x140px (stories are displayed in a list)
over 480px wide - 360x190px (stories are displayed in a row of 3)
I've been trying to use SRCSET for this so that the 140x140px image would be loaded for browsers up to 479px and the 360px image would be loaded for browsers 480px and over.
I've googled and read literally every bit of documentation out there on sizes and srcset but I just can't get my head around it. So far I've come up with the following:
<img
src="http://placekitten.com/140/140"
srcset="
http://placekitten.com/140/140 140w,
http://placekitten.com/360/190 360w"
sizes="
(max-width: 479px) 140px,
(min-width: 480px) 360px,
100vw"
alt=""
class="lazyload"
/>
Unfortunately all this does is display the 360x190px at every width, despite the actual src of the image being set to the 140x140px image.
Can anyone see what I've missed? I think it's the sizes that I'm most confused about. I added in media queries like documented but they don't seem to be applied?
Thank you!
Note that this srcset strategy on the <img> element depends on the fact that the browser has not cached the image yet. This strategy is meant to save the bandwidth for the browser. So, if you start off with a wide viewport, the browser simply fetches the larger of the two images and will no longer fallback to the smaller one even if you resize.
If you want to force the browser to load images at various viewport breakpoints, use <picture> instead:
<picture alt="" class="lazyload">
<source srcset="https://via.placeholder.com/360x190" media="(min-width: 480px)" />
<img src="https://via.placeholder.com/140x140" />
</picture>
Check out the code below.
<picture>
<source class="img-fluid" srcset="//www.fillmurray.com/140/140" media="(max-width: 479px)"><img class="img-fluid" src="//www.fillmurray.com/360/190">
</picture>
At my work we have our own framework and we're trying to think of the best way to implement responsive images. Images are generated from the backend code and we would like to have a single control that solves all use cases.
Since srcset seems to be the best solution for responsive images and Picture seems to solve two other cases (Art direction and modern image formats like WebP and Jpeg XR) we want to see if we can combine them.
Since the picture element is mostly used with a element with a media query inside it is an instruction to browser to use this if it meets certain conditions.
Srcset however let's the browser choose the picture bases on some calculations.
Would it somehow be possible to keep the choice to the browser within the picture element?
Something like this for example.
<picture>
<source sizes="(min-width: 800px) 50vw, 100vw" srcset="small.webp 100w, medium.webp 200w, large.webp 300w">
<source sizes="(min-width: 800px) 50vw, 100vw srcset="small.JPG 100w, medium.JPG 200w, large.JPG 300w">
<img src="small.jpg" alt="Some image" />
</picture>
Would appreciate any help :)
You are correct. The first snippet is right:
<source sizes="(min-width: 800px) 50vw, 100vw" srcset="small.webp 100w, medium.webp 200w, large.webp 300w">
The second one is not:
<source sizes="(min-width: 800px) 50vw, 100vw srcset="small.JPG 100w, medium.JPG 200w, large.JPG 300w">
You can also use the type attribute within the source element to find out support of that image type on the browser. Something like this:
<picture>
<source media = "(max-width: 30em)" type="image/vnd.ms-photo" srcset="images/small/space-needle.jxr 1x, images/small/space-needle-2x.jxr 2x, images/small/space-needle-hd.jxr 3x >
<source media = "(max-width: 30em)" type="image/jpg" srcset="images/small/space-needle.jpg 1x, images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x >
<img src="space-needle.jpg" alt="Space Needle">
</picture>
More details available here.