How to make images responsive using srcset and size attribute??
I have tried using srcset but it isnt working the demo link line 37 https://github.com/kvandana451/Assorted-Cards-images/blob/main/index.html
GitHub
Assorted-Cards-images/index.html at main · kvandana451/Assorted-Car...
A card layout with various sizes, containing images and/or text. - kvandana451/Assorted-Cards-images
321 Replies
i have no idea why this doesn't work. do you have any way to test this with a real device?
i tried this on my android 9 phone, and i have no idea why it doesn't work
it should work
Trying.
ITS WORKING ACTUALLY
how did you checked it?
Properties and then currentSrc which i have highlighted
that is interesting
🤔
this begs the question: is this another bug where the image is loaded but isn't showing in the network?
No now it is showing in the network tab as well
🤔
i have no clue of what is going on
As disscussed in the above, the images seemed too be quiet big, so as suggested we used graphic tools to reduce the file size of the image and display those images depending on the screen size using srcset ,it was not loading in the network tab ,but now those images are loading fine as per the varying screen size we can see the change in images in the network tab .
GitHub
GitHub - kvandana451/Assorted-Cards-images: A card layout with vari...
A card layout with various sizes, containing images and/or text. - kvandana451/Assorted-Cards-images
I have tried to reduce the file size now you can see the change in the file size.
One thing that can muck up testing with srcset is, if the page loads in the larger one first, it won't load in a smaller one later when the viewport gets smaller. There's no need to change things at that point, because it already has a higher quality image.
But yeah, it seems to be working fine now 🙂
But i feel only the image file size has been reduced but still images appear gigantic
What do you mean?
Like, right now, the rendered images are basically in line with what you want, I think?
Like, at small screen sizes, it's loading in the
375 x 250 version of the image.
The rendered size is how big it is on the page, the intrinsic size is the actual size of the image.
The rendered images are inline since the height is 100% i have set. At small screen size its loading 238 x 192 (i have resized it using graphic tools to reduce the bandwidth and file size)
So to say overall evenn though i have reduced the file size, at 320 px still the images are gigantic
I don't understand how the image is gigantic at 375 x 250. It is bigger than rendered size, but it's not that much bigger?
I mean, if you wanted, you could create 10 versions, each one slightly bigger than the next, but it would be a waste of time. The image file size is 7kb right now. If you made it 250 wide instead, it would be ~5kb?
Exactly.
looks gigantic for the users.
You can have a look at the images at all screen sizes ..
Well, that's more on the layout than anything else.
Meaning the given design?
Yup. It's less about the actual physical size of the image, but the aspect ratio of it, and how much space is available to it.
https://codepen.io/abcretrograde/pen/rKOgWw from this i have downloaded the image and implemented .They look so small here.the same imags after i implementing they are gigantic
Stephen Lee
CodePen
Assorted cards & images (CSS Grid + BEM)
A card layout with various sizes, containing images and/or text. Using BEM to try to keep the code organized (and to help keep the design consistent)....
i actually didn't knew this, but can confirm that starting with mobile size on the desktop makes it work properly
but doesn't explain this... maybe it's one of the weird viewport vs real resolution weirdnesses?
Its working actually what is the issue you are facing??
even for large screen as well.....
i didn't check again, but i was having issues testing it
but i did what kevin said and, on desktop, it loads the 325px version
or 350 or whatever
but for mobile it loads less than that
i will test again
yes pls
it does load the 375px version, however ...
img1-375.webp is 1122x750px
wait, i mixed it with image 1 - which is the wrong one
could i get an update on this
thats my update: the 375px image doesnt have 375 pixels of width
that probably is confusing the living hell out of chrome
its just the naming for an image not 375px width
here's the problem: you're saying it is a 375px wide image, which isn't the reality
375w is not the width its the media query
it's the intrinsic width of the image
true
but the real size is 1133 or something
yea we have used graphic tools to reduce the file size this was one among the process explained
yes, but you downloaded the wrong one
there is no other way apart from downloading from inspect
you downloaded the wrong one from squoosh.app
but then i have checked the file size it was less then the original that only i have downloaded
because you downloaded a webp
the original was a jpeg, which was smaller
but you didn't download the one with the low resolution
only one img was jpeg rest some were webp only
i have downloaded the one which has low file size is that wrong?
yes and no
i explained why
how did you find out this??
because of the resolution of the image
open it in a new tab and it will show the resolution
but then in squoosh app i have set the resolution less than 50% depending upon the clarity only
yes, but you downloaded the wrong one, and you're telling chrome that it is a size that it actually isn't
ohh! again need to repeat this process
yes, and make sure you download the correct one
HOWEVER
the current
img1-375.webp can be used instead of the jpeg
BUT!!!! re-do all the process by using the jpeg image, to avoid losing too much qualityhow to check whether i am downloading the correct one
for safety ,because again i dont wanna redo
only do changes on the right side of squoosh.app
and leave the left side in "original" at all times
yea same only i had done
you did on both sides
and click on the download blue icon at the bottom
yes
you mean instead of the original given jpeg image use this one(img1-375) for large screen?
im saying to use that image for the full size one, on the website, instead of the jpeg one
you mean instead of the original given jpeg image use this one(img1-375) for large screen? thats what i ment
yes
meaning keep the setting for those images at the left side for jpeg,and new image format in jpeg only?
no
meaning "don't use the jpeg image on the website"
thats what left side any format of the given image ,right side jpeg
left side is webp
but some are jpeg
yes, but you can convert them later on
it comes back to this point only
you're encoding it to a jpeg
yes whats the issue
i don't get the issue
you can just change it
change it to what?
webp
oh but then it doesnt solve the pbm
im so confused now
what are you trying to do?
as you said
is the original image a webp?
ya
do you need a smaller version of it?
ya becuase you stated the images are very gigantic
you're disturbing
don't hijack questions just to ask to answer your question
that's 2 rule breaks in 1
you have explained in the showcase section the same procedure i followed
set the output to webp, then resize to 50%, play around with the quality and then export
no need to be aggressive your question will be answered ether way...
im not being aggressive 🤔
He is right though you are the one being rude, please take time to consider how you are behaving.
is it the lack of "please" and "thank you" that sounds aggressive?
🤔
just nvm. good luck on your query
apologies
i guess this is pointing out to me
no, it was to me
i pointed out he's disturbing the flow of this post, and that by asking us to answer his question he's hijaking this and breaking 2 rules
first of all this is leading to a big confusion.
yes, that's why i said he's disturbing
Cool.
This was done .
then that's it
and this was the status
alright, 1 second
sure
i will use this image as an example
go ahead
i open it in squoosh.app
okay
resized it and picked these settings
then just click the blue button on the bottom right side
exactly
that's it
BUT
but what?
in this case, since it is a jpeg image, just export as a webp image, and you should save some space automatically
ya try implementing the same in your system
i've messed about with some settings, and got this
but if you just leave it at 75 quality, and convert to webp, you should save 20-30%
yea
that should be it
i too followed the same as per your instructions
then you should have 2 webp images
how original to new webp image
one only ..
may be for diff diff screen sizes you are saying?
yes, one with the same size as the original version, and one that's 50% the resolution of the original
yea
check the code its there as you say
try reproducing in your system
your image has
-625 in the name, then you say it is 560px wide, but it's actually 617px of intrinsic width
wait, no, that's still the wrong size
nevermind....
i am wrong
so, chrome does this weird thing where it shows the full size on the url of the half size
you are correct: it is 560px, but the name of the file has
-625, which will confuse you in the future
you should fix thatjust for urge
definetly first i want to get confirmation from your end whether i am doing right
you're 90% there
you're still using the original jpeg, instead of the full-size webp
where pls point out
<img srcset="/images/img4-625.jpg 560w,/images/img4.jpeg 1120w" sizes="(max-width: 1220px) 560px, 1120px" src="/images/img4.jpeg" alt="Scenary" class="img-four">
the 1120w path and the src path
both point to the jpegsrc and 1120w point to original version of the image
yes, but should be to a full-size webp image, which saves some space
again the squoosh app?
to convert to webp
yes, but you just change it to webp, and don't resize
god!!
but aleast at small screen sizes what is happening?
it is correct
images are gigantic only na for small screen.
this is for large screens .got it
yes, it is
remember: it's only worth it to load the bigger image when the size in css starts to make the image look really bad
which should be at about the resolution you have there
yeah, about 1220px
maybe more, since the image takes 50% of the screen size only
what happens if it is of other formats
they are full fleged only
only for space i need to make the original version of image to webp?
yes
well, avif looks very horrible, in my opinion
it's a video format, and it loses a lot of "texture"
it's great in many situations, but ...
png will explode the size of the image into ridiculously huge sizes
jpegxl will reduce the size of the image by about 30% - but only iphones, ipads and macs support it for now
with the right tool, it can be encoded to and from jpeg without losing any quality
the rest is just different encoders for jpeg, webp and png
ok ok
i suggest webp because it (sometimes) reduces a little more than jpegxl and is supported in most/all browsers, despite being super annoying
you still have a jpeg image
and another one
and another one ...
you should enable the file extensions on windows
this is for the small screen sizes na output should be in jpeg
no, it should be in webp because it's smaller
.....
small screen sizes was set to jpeg.now again should modify to webp??
infact large screen are set to webp only..
yes, everything should be webp
..
it's gross, i know, but it should be webp
now pls go through
still has jpeg
wait a bit it isnt deployed yet
alright
check
now it is webp
whats the result now?
what to conclude images are still big?
no, no
the media query needs some tweaking, but it is working properly
what next?
the media queries need tweaking, to take advantage of the small images
lets take the image 4 as an example
img4-625.webp is 560 pixels wide, and img4.webp is 1120 pixels wide
at which resolution(s) the css size of the image is larger than 560px?
no size as such here is the proof
Stephen Lee
CodePen
Assorted cards & images (CSS Grid + BEM)
A card layout with various sizes, containing images and/or text. Using BEM to try to keep the code organized (and to help keep the design consistent)....
that's not true
at 1429px, it jumps to 573px
and at 1428px, it's 669.94px
oh i see
it's what the browser says
and at 1180 it goes up to 719px
in this specific image, i would set the
max-width of the media query to 940px
all other sizes get the original image
944 accurately.. has 561
940 has 599.64 pixels wide
also, 940 is a "round" number, without that nasty 4 at the end
when calculating sizes, the browser rounds up, but, again, 940 is a pretty number
okay okay cool
but you can use 944 if you want
ok
then for img1-675 it is 2821px wide
yuck, another non-round number
2820px is enough
by doing this annoying process, you will save quite a lot in terms of bandwidth
currently, you're downloading about 879kb in images, which is quite a lot for the current website
i remember it was 1.2mb, which means that you saved about 30% of space
actually prior it was more than this i feel initially in one of your explaination.
i have a faint idea it was 1.2mb
am i right na?
great memory exactly
im surprised i remembered
na i have troubled that much and irriated that is why
irritated because of this process?
it is a very annoying process, i know
i meant you remember its 1.2mb because i have troubled by my queries and irriated you .
oh, im not irritated
thanks for your patience
now completed with tweaking media queries kindly check
well, i will annoy you, but ... i think you should swap the order in which the images are loaded
so it loads the low quality one and then loads the high quality one when it's bigger
instead of this:
probably would be better to write this:
how do we get to know this?
is my thinking right that at upto 2820 screen size it loads an img width of 561px which is called low qualtity,becuase the other remaining screen size has 1122px width image (termed as high quality ,because of its higher img widthhh???)
both means the same,,,,
if i am write in my explaination then,,<img srcset="/images/img1-625.webp 561w, /images/img1.webp 1122w" sizes="(max-width: 2820px) 1122px, 561px" src="/images/img1-625.webp" alt="Tower" class="img-one">
instead of
max-width, it's min-width
basically, yes
first, the lower resolution image, and if the screen is bigger enough it loads the original imagefirst equation seems correct .
lower resolution of img till 2820 screen size,then for large screens more than that it has high resoultion img i.e1122px
yup, that's it
then why you wrote equation2
what do you mean?
you got confused here.
this sentence is right ???
yes, that is correct
then first eq is right ..
not the second one .
no, because you want to show the full image only starting at 2820 pixels
and under that, you want to show the 50% size image
its anyway one and the same only it means
no, the logic has to be swapped
you have to change from
max-width for the low-res, to min-width for the originalwhats the difference still i am not getting ,its anyhow same help me to understand this.
the difference is that one will load the low-res image and the other loads the original
ya bu then i am getting confused about max and min width media query
..
<img srcset="/images/img1-625.webp 561w, /images/img1.webp 1122w" sizes="(max-width: 2820px) 561px, 1122px" src="/images/img1.webp" alt="Tower" class="img-one"> here also one will load low resolution image and the other the high resolution after 2820 screen size
that might work as well, try it
tehn before it was that only
look here
i didn't notice
Ahhh!
b?
what?
you said "ahhh", i said "b"
meaning
i don't know why you said it
a = 1st letter of the alphabet
it took lot of time to explain it to you
i guess since sday
yeah, because i wasn't noticing any differences
all images being the same right
no, you don't use code blocks
makes everything look the same, and very hard to read
nopes now ill start to use.
thank you
?
is this becuase of the difficulty in reading the code
no, it's because it's better
for old browsers or browsers without srcset support, it loads the low quality image by default
i hope this is correct
it seems correct
seems correct and correct there is a difference.
yes, and the difference is that it isn't tested
correct or seems correct?
correct
thanks a ton big relief
you're welcome
but then a doubt
ask it
by the way, 4 and 8 need a look
also, your 978kb website is just 356kb now
good right?
however, for mobile, it's loading the full size images
https://assorted-grid-images.netlify.app/
this is the latest one..
i know
but the link here is different.
well, the link is wrong in your github then
same issue anyways
for mobile?
yes
by the way, i just noticed
you don't have lazy loading
but then in currentSRC it shows the 50% image
over here.
One big issue .
on desktop or mobile?
everything is 100% resolution only webp image
everything was working the day before only.
both
try what i said for an image
min-width right?
yes
not working..
what's the code?
<img srcset="/images/img1-625.webp 561w, /images/img1.webp 1122w" sizes="(min-width: 2820px) 1122px, 561px" src="/images/img1-625.webp" alt="Tower" class="img-one">
try adding a
max-width to the 2nd size
is it working?
no its being so frustrating,because by the day it was working well
that should have worked
why did this broke suddenly?
and even trying the same as the day before it isnt working.We had reached 90%,but now!!
i have no idea
images are absolute hell
what can be done
honestly, at this point, i would stick with just the low quality images
the website looks the same, until you check it on a 4k display
But then these many days of efforts will go in vain which i dont want too
no, they won't
i mean, a tinsy tinsy bit, but that's ok
then now i need to remove srcset then
yes, and sizes
but keep the src set to the low resolution version
and that last part is where 99% of the work was done
what will happen by keeping ,we didnt achieve the desired result right. its disappointing me,Because with lots of patience you have taken up this and i am very grateful for your help and i dont wanna leave it like that only without achieving.
we achieved 50%
and that 50% is the most important half
rest 50%??
not as important
it will only affect 4k users
ohh!
one more thing you stated about lazy loading
i tried to use the attribute
loading="lazy didnt achieve that as wellloading="lazy" decoding="async"
add those to all images
and the website should load just the few images at the topDone with this but seems no change i felt as before only GIGANTIC
doesnt happen all images loading at once only i checked the network tab
show me
and you've set the lazy loading on all images?
yes yes
can you update the page then?
in the sense?
it didn't load as many as before, just 10 images
the other 4 loaded later
i think i know the issue
again?
go ahead what is it?
this is your website before loading the images
and without css, this is it
so, all images are shown at some point, because you don't have any critical css/above-the-fold css
critical css represents what?
and what is above-the-fold-css
it's everything that's visible when the website loads
all the content that's at the top, before the scroll
why is this important? well, when the website loads, it needs to download the css to show the page properly
but until the css is loaded, the website will be all ugly
the critical/above-the-fold css is used to apply just enough styles so that the layout isn't all broken
stuff like colors and things like that will be missing, but the website will sorta kinda resemble what you have
ohh then if we have that critical fold css then lazy loading might work?
it should, yes
then in my case critical fold-css is not required actually
for what can i use since entire website is of images only
lazy loading won't always work, but it's fine
it's less than 400kb, so, it's fine
okay then
one another thing you told me to minify css
but then i tried to research how to do it
yes, you can do it manually with any of the many online tools
CSS Minifier & Compressor | Toptal®
Use our CSS Minifier & Compressor tool to reduce CSS code size and make your website load faster. Get started for free now.
or, you can configure your build script to do it all
that one is ok
how is this?
that's something im terrible at
i recommend asking about it in a different post
but then a general question if i write the minified css ,how will the third person read my code?
why are you worried about that?
then the minified code is lines of code without spaces,forget third person i myself cant read that code
that's why you only do it when you deploy the site
okay
Thanks for answering .
you're welcome
any other improvements fot this project?
no, that's it
i guess its been a long headace for you
apologies.But i have learnt lot many things through this !Sincerly Thank you!!
you're welcome
https://discord.com/channels/436251713830125568/1253729651826757673 pls help me here as well i am stuck and no response might be that post isnt highlighted
it's against the rules to do that
also, you've got plenty of people answering to you there
i understand,
but then take a glance of it.may be it can save time for everyone
i will check later
sure thanks for the help and always responding.
you're welcome
Can you pls look into it.It would be a great help