I'm trying to deliver responsive/adaptive images based on device width.
Original image:
<img src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"/>
With Srcset:
<img
src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
srcset="
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400 400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800 800w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
"
/>
I'm facing two issues:
1) Even on a smaller device (like iPhone 6s), the image of width 2000px is loaded (it should load 800px image).
2) I've placed both images (with and without srcset) together. Both of them loaded the image with the same dimensions. However, the one with srcset is rendered small compared to others. Since no width is specified in html/css, it should render in the width of the actual image, right? Here is the fiddle: https://jsfiddle.net/hfcbatdn/
With srcset attribute you have to provide sizes attribute make responsive image. Change like this.
<img
src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
srcset="
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400 400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800 800w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
"
/>
To
<img
src="https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png"
srcset="
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=400 400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=800 800w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=1400 1400w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=2000 2000w,
https://cdn.statically.io/img/www.forexadmin.com/wp-content/uploads/2019/11/Exness-Affiliate.png?w=3800 3800w
"
sizes="(max-width: 991px) 480px,(max-width: 1024px) 800px,(max-width: 1920px) 1400px,(max-width: 2560px) 2000px,3800px"
/>
Change sizes attribute max-width=? your desire #media Query. Also you have to add meta view port inside <head></head> tag. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">.
More details in Responsive Images.
Related
my html markup is as follows:
<img srcset="https://res.cloudinary.com/xxx/image/upload/c_scale,w_300/v1653408278/notforsquares/ll/DSCF4429.jpg 300w, https://res.cloudinary.com/makingthings/image/upload/c_scale,w_600/v1653408278/notforsquares/ll/DSCF4429.jpg 600w" sizes="(min-width:300px) 50vw 100vw" src="https://res.cloudinary.com/makingthings/image/upload/v1653408278/notforsquares/ll/DSCF4429.jpg" alt="Lamp" />
When I look at the network tab in the inspector it shows two images downloaded. Is that the correct behaviour?
Thanks in advance
Yes, if you open it on a wide-screen device, it will load only one image like the example below:
Otherwise, if you open it in small-screen device, it will load only both image like the example below:
this is the code he use to implement the elva-fairy image:
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px,
800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
Link to the web: https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html
You can use the picture tag if you want to load it only once based on screen size:
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
Yes, this is the correct behaviour. By using srcset you're basically setting all the possible image sources the browser can use (and their sizes). You should also use sizes attribute to indicate which image (and it's size) the browser should use on different breakpoints.
I'm trying to write a tag that lets me to control several aspects of an image like:
Responsive image sizes
Art direction
Partially supported image formats like avif or webp
Fall backs to common image formats like JPG & PNG
I'm a beginner and I'm still trying to work out way to do this, I know there are many resources around but I haven't been able to find one that covers these at the same time, and I'm not sure how to write it myself. I've tried:
<picture>
<source media="(orientation: landscape)"
srcset="land-small-test-image.avif 200w,
land-medium-test-image.avif 600w,
land-large-test-image.avif 1000w
land-small-test-image.jpg 200w,
land-medium-test-image.jpg 600w,
land-large-test-image.jpg 1000w"
sizes="(min-width: 700px) 500px,
(min-width: 600px) 400px, 100vw">
<source media="(orientation: portrait)"
srcset="port-small-test-image.avif 700w,
port-medium-test-image.avif 1200w,
port-large-test-image.avif 1600w
port-small-test-image.jpg 700w,
port-medium-test-image.jpg 1200w,
port-large-test-image.jpg 1600w"
sizes="(min-width: 768px) 700px,
(min-width: 1024px) 600px, 500px">
<img src="land-medium-test-image.jpg" alt="Car">
</picture>
The values above are just examples, I'd be very grateful if anyone could clarify for me how a tag that covers those aspects should look like when written down properly.
About your approach. It's ok and good work for a first try :). There are a few tweaks you should do though.
have a source tag for each file format
if you have 200w as available size in srcset I would say remove the (min-width) in sizes as it's not representative
This point is more information then commenting on your approach
if your design/client isn't using another image crop/orientation for the image in portrait vs landscape there is no use for it.
About file formats I generally have this approach. Use JPG unless there isn't transparency involved, then naturally PNG. About other file formats, that question can be deep and depend on many factors, things like client/project/budget/tech/region, if it makes sense go for it. Things to consider using
webp has broader support then avif
depending on the use case and project (client or not), make sure there is software to generate them.
To the main question. I made a few tweaks to your code as I explained above that should work ok.
There are online tools that can help you with breakpoints if you think that is hard (I do so myself there is nothing wrong with that). Cloudinary has a tool that is ok. Other then that I would recommend watching other large and respected Ecommerce/"regular" sites and inspecting their code.
<picture>
<source media="(orientation: landscape)" srcset="land-small-test-image.avif 200w,
land-medium-test-image.avif 600w,
land-large-test-image.avif 1000w" sizes="400px, 100vw">
<source media="(orientation: landscape)" srcset="
land-small-test-image.jpg 200w,
land-medium-test-image.jpg 600w,
land-large-test-image.jpg 1000w" sizes="400px, 100vw">
<source media="(orientation: portrait)" srcset="port-small-test-image.avif 700w,
port-medium-test-image.avif 1200w,
port-large-test-image.avif 1600w" sizes="600px, 500px">
<source media="(orientation: portrait)" srcset="
port-small-test-image.jpg 700w,
port-medium-test-image.jpg 1200w,
port-large-test-image.jpg 1600w" sizes="600px, 500px">
<img src="land-medium-test-image.jpg" alt="A car">
</picture>
I am trying to make the pink flowers fill the width of the viewport at 100%. However, the sizes property is not working to accomplish this. How can I correct this?
<h1>The picture element</h1>
<p>Resize the browser window to load different images. w</p>
<picture>
<source media="(min-width:650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg" sizes="100vw">
<source media="(min-width:465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
<img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
"sizes"
Is a list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. This information is used by the browser to determine, before laying the page out, which image defined in srcset to use. Please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example).
The sizes attribute has an effect only when the element is the direct child of a element.
You can make it work using the attribute <... style="width: 100vw;">.
I added a working example, didn't knew which of the 3 flowers you wanted to make big so I added it to all of them.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>The picture element</h1>
<p>Resize the browser window to load different images. w</p>
<picture>
<source media="(min-width:650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg" style="width: 100vw;">
<source media="(min-width:465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg" style="width: 100vw;">
<img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width: 100vw;">
</picture>
</body>
</html>
The two following chunks of code are from a a Mozilla web development course. What isn't clear to me is the purpose of "src" when I already have "srcset". Can anyone explain please?
'''
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
'''
'''
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
'''
src is the original attribute to specify an image. Today it serves as a fallback for legacy browsers.
Browsers use the srcset as the authority source if it is present and will ignore src. But if someone is using an old, unsupported browser like the 3% still using IE for some reason (honestly nothing can justify that choice), it will still be able to load the image.
So you asking why is very reasonable. I have actually debated removing it over the past month. I suspect I will in the next year or so.
I have the following laravel code:
<img sizes="(min-width:600px)100vw, (max-width:601px)100vw"
srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />
What I'm trying to do is to display the 600x600 image for width < 600px, and the 410x620 for width > 600px.
The code above works on desktop. But on a iPhone (iOS 8.1.2, safari/chrome), it displays the 410x620 image instead. It works properly (both desktop and mobile) without Picturefill included, except IE9 - IE11.
Is there something I'm missing here?
Solution:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" media="(max-width: 600px)">
<source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" media="(min-width: 601px)">
<!--[if IE 9]></video><![endif]-->
<img sizes="100vw" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />
</picture>
There are multiple errors:
sizes="(min-width:600px)100vw, (max-width:601px)100vw" doesn't make any sense
The default value of sizes is 100vw. So your sizes is computed, if min-width: 600px matches, use 100vw, if max-width: 601px use 100vw, otherwise use 100vw
You set the descriptor 601w for an 410 pixel wide image. This is just wrong.
I don't know, but it seems that you don't use the same image in different sizes, but you use 2 different images (one is 600x600 the other is 410x620). This means, that you don't want to offer different candidates, where the browser can choose from, it means you want different images depending on your layout??? And in that case you should use picture
<picture>
<source media="(min-width:600px)" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" />
<source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" />
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</picture>