I'm trying to get responsive images to work for my header image.
<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(width: 960px)">
This is what I have so far, and it kind of works but when it gets larger than 960px the image keep getting larger, I want it to stop when it reaches 960px.
<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(max-width: 960px) 100vw">
What am I doing wrong?
You can and should control the displayed width with CSS (i.e.: max-width: 960;), but you also should inform the browser the displayed size via the sizes attribute. The default of the sizes attribute is 100vw:
sizes="(max-width: 960px) 100vw" is transfered to sizes="(max-width: 960px) 100vw, 100vw", which basically means, if the viewport is lower 960px use the full viewport, otherwise use the full viewport, which doesn't make much sense. What you want is the following:
sizes="(max-width: 960px) 100vw, 960px"
You can also write:
sizes="(min-width: 960px) 960px, 100vw" or as shorthand: sizes="(min-width: 960px) 960px"
<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(max-width: 960px) 100vw, 960px" style="max-width:960px;">
Related
I have a Blade directive that generates an HTML <img> tag with srcset and sizes attributes. But only the 1280px option is used, regardless of the resolution (I do tests in Edge through the device emulation feature).
<img src="https://my.link/logos/casa-nova/logo.png" srcset="
https://my.link/logos/casa-nova/logo414.png 414w,
https://my.link/logos/casa-nova/logo768.png 768w,
https://my.link/logos/casa-nova/logo1024.png 1024w,
https://my.link/logos/casa-nova/logo1280.png 1280w,
https://my.link/logos/casa-nova/logo.png" sizes="
(max-width: 414px) 414px,
(max-width: 768px) 768px,
(max-width: 1024px) 1024px,
(max-width: 1280px) 1280px,
100vw" width="213" height="67" alt="alt">
I am tring to show different image based on screen resolution in one <img tag, i read several tutorial but i can't get it work
Screen < 768px show banner_mobile.png (500x500)
More than 768px show banner_desktop.png (1370x200)
<img
srcset="banner_mobile.png 768w,
banner_desktop.png 1024w"
sizes="(max-width: 768px) 768px,
(max-width: 1024px) 1024px"
src="banner_desktop.png"
alt="test">
I am trying to change images depending on the screen size, but it doesn't work.
My code
<amp-img alt="description" src="img/picture-large.png" width="675" height="540" layout="responsive" srcset="img/picture-small 565w" sizes="(max-width: 1130px) 50vw, 100vw"></amp-img>
I want that from 1130px, selects the small image
while validating my page on w3 I get lots of errors like:
Bad value (max-width: 768px) 321px,(min-width: 768px)
407px,(max-width: 768px and min-resolution: 2dppx) 642px,(min-width:
768px and min-resolution: 2dppx) 814px,321px for attribute sizes on
element img: Bad media condition: Parse Error at …resolution: 2dppx)
I understand that something is wrong with the sizes attribute, but still can't find out what
This is the html
<img
class="polaris__image lazyload"
alt=""
height="188"
role="presentation"
sizes="(max-width: 768px) 321px,(min-width: 768px) 407px,(max-width: 768px and min-resolution: 2dppx) 642px,(min-width: 768px and min-resolution: 2dppx) 814px,321px"
src="https://media.itpro.co.uk/image/upload/t_card-mobile#1/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg"
srcSet="https://media.itpro.co.uk/image/upload/t_card-mobile#1/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 321w,https://media.itpro.co.uk/image/upload/t_card-desktop#1/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 407w,https://media.itpro.co.uk/image/upload/t_card-mobile#2/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 642w,https://media.itpro.co.uk/image/upload/t_card-desktop#2/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 814w" width="321"
/>
Is the combined use of max/min-width and min-resolution an error?I alkso tried using PPI but it still returns an error.
I have this image tag with a few different srcs and it's only loading the one. I feel like I followed the directions, but it's only loading the 600px width image (w_600 image).
<img
srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w,
https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg 520w,
https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg 440w,
https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg 360w,
https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg 280w"
sizes="(min-width: 1500px) 600px,
(max-width: 1200px) 520px,
(max-width: 992px) 440px,
(max-width: 768px) 360px,
(max-width: 480px) 280px"
src="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w"
alt="picture"
class="picture"
/>
Here's a Live Demo
I'm trying to get it to load the largest image one desktops, and the smallest image on mobile devices, but it'a always loading the large image. Am I misunderstanding the purpose of srcset?
Try this and see,
<picture>
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1500px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1200px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 992px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media=" (min-width: 768px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 480px)">
<img srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" alt="Placehold" class="image">
</picture>
Hope this helps.