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.
Related
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 know the solution is <picture>
but which format is standard?
1.
<picture>
<source type="image/webp" srcset="pic.webp">
<img src="pic.jpg" alt="test">
</picture>
2.
<picture>
<source type="image/webp" srcset="pic.webp">
<img src="pic.jpg" alt="test" type="image/jpeg">
</picture>
3.
<picture>
<source type="image/webp" srcset="pic.webp">
<source type="image/jpeg" srcset="pic.jpg">
<img src="pic.jpg" alt="test">
</picture>
Number 1 would be the standard way of doing it.
When using the <picture> element the browser looks through each <source> element – starting from the top – to find an image that best fits the the current scenario. In your case it would only be if it supports the format in the type attribute. But it could also look for things like media queries in the media attribute or the pixel density of the user's screen if you add 2x or 3x versions in the srcset list.
As stated on MDN, if the browser can't find a fitting match in the <source>s, it defaults to the <img> tag:
The <img> element serves two purposes:
It describes the size and other attributes of the image and its
presentation. It provides a fallback in case none of the offered
<source> elements are able to provide a usable image.
So the JPEG in your example doesn't need to have a <source> as well, because it will be chosen if none of the <source>s are used.
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'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.
I am trying to use picture Tag in react app (jsx file) but it doesn't seems to work.
Here is my code
<picture>
<source media="(min-width: 1024px)" src="image_Desktop.png"/>
<source media="(max-width: 768px)" src="image_Mobile.png"/>
<source media="(min-width: 768px) and (max-width: 1024px)" src="image_Tab.png"/>
<img src="image.png" alt="" styleName='brain-image'/>
</picture>
I tried giving attribute as srcset/src both in source tag but still not working.Any solution for the above problem?
If you are using srcset instead of using srcSet (with capital), this could be your problem.
Here is the another problem caused by usage of srcset:
Why is React.js removing the srcset tag on <img />?
As per the Official Doc :
The HTML <picture> element is a container used to specify multiple
elements for a specific contained in it. The browser
will choose the most suitable source according to the current layout
of the page (the constraints of the box the image will appear in) and
the device it will be displayed on (e.g. a normal or hiDPI device.
And img is a DOM element but a javascript expression.
Possibly duplicate of this React img tag issue with url and class
If this doesnt help you , please share the inspected HTML for this Component