Images format
Can we still have a mix of webp and jpeg images ?
99 Replies
yes
pls haave a look at this
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
for the card "travel and see the world " implemented clamp. but due to margin:50% auto there is a huge amt of space to align the text at the center,tried text-align:center and flex properties as well didnt work so i used the margin
this seems like a separate question, unrelated to image formats?
if so, please make a new post
because of images something gets effected i felt that is why
you may want to remove the solved tag and change the title then, I can't look into this right now and most people probably won't open a post with the solved tag on it
works
.text-title{ font-size:clamp(1rem, 5vw, 3rem); }
for large screen size like 1100 and above font-size is 51px which shouldnt be it shouldnt exceed 48px right? because browser default font size is 16px.and third value in clamp function is 3remit shoudn't. are you sure you have 16px for the browser font size
yes sure
and 5vw for screen size 1100 will be 55px
my viewport is 1600px wide and the computed font-size is 48px
even with the 200vw which is still in the deployed version of your site
did you change the font-size on ::root or html?
nah
screen size is 1100px preferable value (second clamp value) is 5vw which is equivalent to 55px am i right here?
yeah
though clamp would restrict it to 48 with this definition of font-size
yeah yeah your right as per your explaination
it has automatically adjusted to 17px that is why the issue
so to conclude in this example font-size:clamp(16px,55px,48px) for screen size of 1100 has font-size 48px only am i right??
1rem=16px 5vw=>55px screen size(1100px)
1rem = 1 times the font size of the root element, which by default is 16px, yes
and yes, anything over the third value gets clamped to that third value, so it should never be over 48px
5vw=>55px screen size(1100px) this is also right calculation ?
1100 * 0.05 is 55, yeah
Thank you!!
no problem, glad to help!
images here are gigantic over here what is your suggestion ??pls go through and let me where and all i can modify and improve https://github.com/kvandana451/Assorted-Cards-images
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
pls look for the larger larger screen sizes as well
I'm not going to go through that all one by one, but i can give some general advice. You want the images to be of such a resolution that they're close to what they're being displayed at. If they're extra big, you may want to use the picture element with alternate image sizes.
As for resizing them, you can use pretty much any photo editor including MS Paint, or an online service
this is also very much a topic for a new post, these posts aren't supposed to cover more than one issue and its solution
ok so shall i post this as a new post?
i wanted a feedback on it that is why.and what to know where am i going wrong
if the images are big then we are resizing by width and height properties with relative units
Pretty sure you already have a code review post up in #showcase
it's about balancing the filesize and resolution of the images with the size they are displayed at in the website. If you have a 15mb 4800x3600px image and you're showing it at the top of a card at 300px wide, you're wasting a ton of bandwidth
yeah it was asked to put over there not in HELP section
unable to catch this point.. i am not showing the entire 4800*3600 on top of a card rather it will be resized accordingly by relative units say 800x400
The file is still a certain size, regardless of how it's displayed
here i cant use picture element because there are no multiple source elements that can be matched with alt img sizes. And as of now its like wasting time for using photo editor for resizing them
You don't want the image file that is served to the user to be much bigger than it needs to be, to save on bandwidth. That's all there is to it
yeah ! what can be done for this usecase now?
i recommend using squoosh.app
i pointed this out as a problem because the disgusting webp format uses less data, and keeps most of the quality
on a screen with width of 3760, it shows at 805x507px
on a 1080p display, it won't be much bigger than 377x252
and it is a jpeg image, but the image doesn't eat much space
just converting to webp, it's ~14kb now, from ~29kb
if you decide you want to resize to 50% the resolution, it's a ~5.45kb image
that's 81% in savings, according to this
you can use both versions and set a
srcset to load the original image, for larget screens
but just saving as webp, it's ~51% smaller
in 2 minutes, you can generate 2 images that take up less space than the original image alone
for img5, i wouldn't resize it, as the resolution is pretty close to the size it is displayed atwith some effort, i reduced the size of the image to ~104kb, with barely any perceptive loss in quality - which is about 40% smaller
that's an image that's ~174kb in size
by the end, your 1.2mb website may be way less than 1mb - i predict about 800kb
why is this important? well, it costs me money to see your page on my phone, it costs you money to serve the page to me (im aware of the free tier, but with enough visitors it will cost you money)
https://www.reddit.com/r/webdev/comments/1b14bty/netlify_just_sent_me_a_104k_bill_for_a_simple/?rdt=59218 <-- also, remember this?
14kb from 511kb in my screen size ..
because you copy-pasted
i dragged the image
when you copy the image, for some reason, it's set in the windows clipboard as png
(i guess microsoft was trying to avoid bmp)
when you paste, you're pasting a png, which uses a lot more space, in this type of image
just drag and drop the jpeg image into the website
you can drag and drop from the website directly into squoosh
after doing these modifications in squoosh we nedd to download the image genertaed by squoosh?
yes
Ah ! i understood the concept
why there is a divison pink and blue which result should we consider?
the idea is for you to compare the result between the pink and the blue
imagine you test webp vs avif
or you compare webp with the original, to see if you're losing too much quality
your right its blurred
it is because it's 50% the size
but, for this case, it's perfect
so this preset is 50% of the original image size right?
basically, yes
but you're changing the number of colors on both, so, they aren't the exact same thing
ok
but after getting the desired results and using srcset how will the browser know which image to select?
the window width
or the height
the window width and height will not be provided in the srcset.
after the image path, you can put a size
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset
got it ..So this process of using photographic apps and then modifying is a time consuming process.so the designer has to provide proper image formats to avoid this extra stuff right?
nah, you automate it in a build set
or use tools to do this in a bulk way
ive seen amazing designers struggle really hard to resize images, so, i don't trust a designer to do that work
this is new to me
i know
I understood this process
but you only have to do 15 imges, so, it doesn't take long
in 15 minutes you're done
depending on the image
it isn't worth it to spend 5-6 hours automating something you can do in 15 minutes
(YES, I SAID IT! bring out the pitchforks!)
So in real time apps developers are doing this bulky way using graphic tools??
i wouldn't call imagemagick a "graphic tool"
but depending on the situation, yes
some CRMs do this automatically, like wordpress
ohh!
Thanks for explaining and responding pin to pin and making me understand this concept
you're welcome
any more questions about this?
nah will implement the same and get back on this!
good luck
it shouldn't be too hard to do this
i did it 2 images in less than 5 minutes, but i was kinda distracted
yes
Thank you so much once again for sharing knowledge!!
Thanks everyone who helped me in this post !!!Iit was a great learning experience .Thank you all
you're welcome
if you have any questions, regarding this topic, just ask here
Yup..
so, any questions?
Ill get back in a while
alright
1080p display 283x189
I have a doubt i implementing the above scenario though i have understood the concept .
Intrinsic size of the image will always be the same even after reducing the file-size?
intrinsic size is the size that the image has
it's the original resolution
So after using photographic app the downloaded img has different intrinsic size am i right??
First of all thanks for responding.
this is a big "depends"
if you resize, yes. if you don't resize, no
think of intrisic size as the size that the image would have if you just put it in an html file, without setting any size in html or css
As we were trying the day before regarding the above process kindly see line no:37 implementing srcset
generally, i would say to make a new post
but this doesn't work
/images/download (2).webp 375w, /images/img3.webp 1125w <-- the spaces will be interpreted as not being part of the url
at least call it img3-375.webpcan we continue in this its a request because everything is explained well leads to confusion that is why.
i already answered
look at the current src its not taking img3-375.webp for a size less than 639 px
this is the point where it starts to go very off topic
should i make a new post now?
try checking the network tab, and see if the image is being loaded or not
if it isn't, make a new post
nah
refresh with it open
img3-375.webp isnt there
then yeah, it's best to ask in another post
i need to explain everything from the beginning
like i used graphic tools etc etc etc
no, just that the srcset isn't working, and where we can test it
okay.
I have posted and i guess there is no response still could you pls go through it.