This should be super simple, but I cannot figure out what is going wrong. I have a pictures element:
<picture aria-hidden="true">
<source media="(max-width: 1199px;)" srcset="/signup/images/blank.png">
<source media="(min-width: 1200px;)" srcset="/signup/images/bigstock-houses-BC_56439806.avif" type="image/avif" alt="town house rentals">
<source media="(min-width: 1200px;)" srcset="/signup/images/bigstock-houses-BC_56439806.webp" type="image/webp" alt="town house rentals">
<img src="/signup/images/bigstock-houses-BC_56439806.jpg" alt="town house rentals">
</picture>
If window is below 1200px, first source image should be shown, which is a 1x1 transparent png. If window is 1200px or greater, show any of the other sources or the default fallback img. The problem is that it is only showing the default fallback img, at least 90% of the time. Occasionally it will show the Avif, but I cannot get it to show the blank.png image.
I've tried about 50 other variations of this, using width and DPI in the srcset, using the size attribute, etc, but nothing makes it work. Tested in both FF and Chrome, cleared the cache, incognito windows, and both behave the same.
I also have the image set to hide below 1200px in my CSS, but the issue is the image is still loading which is causing issues with load times, especially on mobile.
Thanks in advance.
Related
So I have this code of a responsive image using scrset:
<picture class="background-image">
<source type="image/jpg"
srcset="http://localhost:61186/public/images/asia_1637411941_1920x1280.jpg 1920w,
http://localhost:61186/public/images/asia_1637411941_1720x1147.jpg 1720w,
http://localhost:61186/public/images/asia_1637411941_1520x1013.jpg 1520w,
http://localhost:61186/public/images/asia_1637411941_1320x880.jpg 1320w,
http://localhost:61186/public/images/asia_1637411941_1120x747.jpg 1120w,
http://localhost:61186/public/images/asia_1637411941_920x613.jpg 920w,
http://localhost:61186/public/images/asia_1637411941_720x480.jpg 720w,
http://localhost:61186/public/images/asia_1637411941_520x347.jpg 520w,
http://localhost:61186/public/images/asia_1637411941_320x213.jpg 320w">
<img src="http://localhost:61186/asia_1637411941_1920x1280.jpg" alt="Asia" />
</picture>
This (with surrounding html) renders to this on a 360px width screen:
Now, the image element is around 100px width. But Chrome loads the 1120px version (no cache / incognito tab)
Now ideally it would load the 320px width image as the element is just 100px width. But if that is not the case then based on the viewport of 360px I would at max expect it to pick the 520px version of the image. But it doesn't.
Now in Chrome Lighthouse I get a score penalty because I need to "properly size the images". But I feel like I'm doing that. Anyone has a solution?
If you run your markup through the W3 Validator you get
Error: When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be present.
I don't know the layout you're looking for and hence what media queries to use, but see if the following quick fix works for you:
<picture class="background-image">
<source type="image/jpg"
srcset="http://localhost:61186/public/images/asia_1637411941_1920x1280.jpg 1920w,
http://localhost:61186/public/images/asia_1637411941_1720x1147.jpg 1720w,
http://localhost:61186/public/images/asia_1637411941_1520x1013.jpg 1520w,
http://localhost:61186/public/images/asia_1637411941_1320x880.jpg 1320w,
http://localhost:61186/public/images/asia_1637411941_1120x747.jpg 1120w,
http://localhost:61186/public/images/asia_1637411941_920x613.jpg 920w,
http://localhost:61186/public/images/asia_1637411941_720x480.jpg 720w,
http://localhost:61186/public/images/asia_1637411941_520x347.jpg 520w,
http://localhost:61186/public/images/asia_1637411941_320x213.jpg 320w">
sizes="100vw">
<img src="http://localhost:61186/asia_1637411941_1920x1280.jpg" alt="Asia" />
</picture>
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 running a page through Google's Page Speed Analyzer and for mobile, it's telling me I should download the proper size images. I know the viewport size, but I don't know the width of the slot because we are using a responsive layout. I've looked at the documentation and a bunch of examples and none of them are using what I think should be the correct image.
The Network tab of developer tools is showing we are downloading about.webp for mobile and not either of the smaller images (200px or 400px). Even when changing the device in Chrome to a smaller viewport width, it still downloads about.webp.
What is the correct HTML for a picture element to get Page Speed Analyzer to use the appropriate image?
Below is my picture element. Thanks!
<div class="row"><div class="col-md-3">
<picture>
<source type="image/webp"
sizes="(max-width: 200px) 200px,
(max-width: 400px) 400px,
(max-width: 1500px) 1500px"
srcset="//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w200.webp 200w,
//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w400.webp 400w,
//cdn.storyboardthat.com/site-images/articles/education/about-sbt.webp 1500w">
<source type="image/png"
sizes="(max-width: 200px) 200px,
(max-width: 400px) 400px,
(max-width: 1500px) 1500px"
srcset="//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w200.png 200w,
//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w400.png 400w,
//cdn.storyboardthat.com/site-images/articles/education/about-sbt.png 1500w">
<img src="//cdn.storyboardthat.com/site-images/articles/education/about-sbt.png"
alt="Storyboard That"
title="Storyboard That"
class="lazyload "
style="max-width:100%;height:auto;"
width="1500" height="400" loading="lazy">
</picture>
</div>
You have forgotten about Device Pixel Ratio (DPR).
You see the <picture> element basically says to browsers "here are a few options to choose from, I have indicated my preference but it is up to you to decide which image you think is best".
As you haven't specified a DPR preference the browser is using the following logic:
"Ok so I have 3 images to choose from, what is my current DPR? Oh I have DPR set to 3.
How big is the image at this screen width (320px)? Full screen width so I need a 320px image.
Ok so it is 320px * 3 DPR to ensure I have the highest quality image that matches my current display resolution.
So I need a 960px image minimum. My options are 200, 400 or 1500, I better choose the 1500 image and down sample it."
So how do I control pixel density decisions?
You can specify pixel density with 1x, 2x, 4x etc. For example:
<img src="default.webp"
srcset="hiddef.webp 2x, heighestdef.webp 4x"
alt="Image description">
However with how you have currently structured your picture element it won't quite work as you can't combine image 200w with image 2x to do image 200w 2x.
If you want to keep the same image at all DPIs then you would specify that image 3 times.
<img src="default.webp"
srcset="default.webp 2x, default.webp 4x"
alt="Image description">
Otherwise if you want the browser to change the image automatically based on DPR just leave your <picture> element as it is.
I see that the code snippet you have used is incorrect, refer this:
<picture>
<source media="(max-width:200px)" srcset="about-w200.webp">
<source media="(max-width:400px)" srcset="about-w400.webp">
<img src="about-sbt.webp alt="About" style="width:auto;">
</picture>
A working reference link
I want to have the image just jump from x pixels to y pixels when the screen size goes from one size to the next instead of scaling down gradually when the screen size decreases in the same size bracket. Applying img-responsive makes it go down gradually, and not having it at all doesn't let the col-x-y classes work.
You can use the html picture tag as seen below. In this example it will load different images sizes depending on the screen size. But you can also adjust the image width based on this format. The code comes from this code lab.
<picture>
<source media="(min-width: 750px)"
srcset="images/horses-1600_large_2x.jpg 2x,
images/horses-800_large_1x.jpg" />
<source media="(min-width: 500px)"
srcset="images/horses_medium.jpg" />
<img src="images/horses_small.jpg" alt="Horses in Hawaii">
</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>