Kevin Powell - Community•2y ago

Images format

Can we still have a mix of webp and jpeg images ?

Jochem•6/9/24, 9:36 AM

yes

VandanaOP•6/9/24, 9:43 AM

pls haave a look at this

VandanaOP•6/9/24, 9:44 AM

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

VandanaOP•6/9/24, 9:46 AM

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

Jochem•6/9/24, 9:54 AM

this seems like a separate question, unrelated to image formats?

Jochem•6/9/24, 9:54 AM

if so, please make a new post

VandanaOP•6/9/24, 10:11 AM

because of images something gets effected i felt that is why

Jochem•6/9/24, 10:13 AM

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

Mannix•6/9/24, 10:19 AM

MMannix ```css .text-title{ display: grid; align-items: center; height: 100%; } ``...

VandanaOP•6/9/24, 10:30 AM

works

VandanaOP•6/9/24, 10:32 AM

VandanaOP•6/9/24, 10:35 AM

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 3rem

Mannix•6/9/24, 10:47 AM

it shoudn't. are you sure you have 16px for the browser font size

VandanaOP•6/9/24, 10:50 AM

yes sure

VandanaOP•6/9/24, 10:50 AM

and 5vw for screen size 1100 will be 55px

Jochem•6/9/24, 10:51 AM

my viewport is 1600px wide and the computed font-size is 48px

Jochem•6/9/24, 10:51 AM

even with the 200vw which is still in the deployed version of your site

Jochem•6/9/24, 10:51 AM

did you change the font-size on ::root or html?

VandanaOP•6/9/24, 10:52 AM

nah

VandanaOP•6/9/24, 10:53 AM

screen size is 1100px preferable value (second clamp value) is 5vw which is equivalent to 55px am i right here?

Jochem•6/9/24, 10:53 AM

yeah

VVandana ``.text-title{ font-size:clamp(1rem, 5vw, 3rem); }``

Jochem•6/9/24, 10:54 AM

though clamp would restrict it to 48 with this definition of font-size

VandanaOP•6/9/24, 10:55 AM

yeah yeah your right as per your explaination

VandanaOP•6/9/24, 10:58 AM

it has automatically adjusted to 17px that is why the issue

VandanaOP•6/9/24, 11:00 AM

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??

VandanaOP•6/9/24, 11:01 AM

1rem=16px 5vw=>55px screen size(1100px)

Jochem•6/9/24, 11:01 AM

1rem = 1 times the font size of the root element, which by default is 16px, yes

VVandana so to conclude in this example font-size:clamp(16px,55px,48px) for screen size o...

Jochem•6/9/24, 11:02 AM

and yes, anything over the third value gets clamped to that third value, so it should never be over 48px

VandanaOP•6/9/24, 11:05 AM

5vw=>55px screen size(1100px) this is also right calculation ?

Jochem•6/9/24, 11:13 AM

1100 * 0.05 is 55, yeah

VandanaOP•6/9/24, 11:13 AM

Thank you!!

Jochem•6/9/24, 11:16 AM

no problem, glad to help!

JJochem no problem, glad to help!

VandanaOP•6/9/24, 11:17 AM

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

VandanaOP•6/9/24, 11:20 AM

pls look for the larger larger screen sizes as well

Jochem•6/9/24, 11:21 AM

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

Jochem•6/9/24, 11:24 AM

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

VandanaOP•6/9/24, 11:31 AM

ok so shall i post this as a new post?

VandanaOP•6/9/24, 11:32 AM

i wanted a feedback on it that is why.and what to know where am i going wrong

JJochem I'm not going to go through that all one by one, but i can give some general adv...

VandanaOP•6/9/24, 11:38 AM

if the images are big then we are resizing by width and height properties with relative units

Jochem•6/9/24, 11:55 AM

Pretty sure you already have a code review post up in #showcase

VVandana if the images are big then we are resizing by width and height properties with r...

Jochem•6/9/24, 11:56 AM

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

JJochem Pretty sure you already have a code review post up in #showcase

VandanaOP•6/9/24, 12:46 PM

yeah it was asked to put over there not in HELP section

JJochem it's about balancing the filesize and resolution of the images with the size the...

VandanaOP•6/9/24, 12:48 PM

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

Jochem•6/9/24, 1:09 PM

The file is still a certain size, regardless of how it's displayed

VandanaOP•6/9/24, 1:16 PM

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

Jochem•6/9/24, 3:14 PM

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

VandanaOP•6/9/24, 4:00 PM

yeah ! what can be done for this usecase now?

JJochem I'm not going to go through that all one by one, but i can give some general adv...

Ἔ

ἔρως•6/9/24, 5:08 PM

i recommend using squoosh.app

VVandana Can we still have a mix of webp and jpeg images ?

Ἔ

ἔρως•6/9/24, 5:09 PM

i pointed this out as a problem because the disgusting webp format uses less data, and keeps most of the quality

Ἔ

ἔρως•6/9/24, 5:11 PM

on a screen with width of 3760, it shows at 805x507px