wait why are you adjusting the size, the image is responsive, it should render on the published site in a size that depends on your viewport size
that size in width/height is the max sizes basically, the one of original
we used to set aspect ratio before, it has given issues, because now there are 2 sources of size and aspectRatio is in style panel, so its not visible right away
I guess we could also add a checkbox for "keep aspect ratio", so when you set a different width or height, the other one gets changed proportionally
Yes to that last part and have it checked by default. There's like no use cases I can think of youd change one dimension without keeping the other proportional
Use case: When Cloudflare image optimizer kicks in, it takes the width and height attributes on the image to create a resized image. So unless we manually change the dimensions on the setting tab, the largest version of the image is getting served up. Even without Cloduflare, it still would make sense to do this so that the correctly sized image is served up
I'm not sure on the responsive image side but all I know is if upload a 1920px image, it's getting served up at 1920 unless I change the dimensions in settings @Oleg Isonen
And while technically only one dimension is fed to Cloudflare, both need to be changed to avoid CLS
No, not the largest, it depends on viewport size, try uploading an image that is bigger than viewport, then reload published site
I bet your viewport is 1920+ that's why you see that max size
You basically only need to set width manually if you really want to reduce the largest servable size, which may depend on your layout needs.
E.g. layout only uses an 100px image but viewport is 2000
I really wish we could automate this @Ivan Starkov
Only setting width though will mess up CLS, right? It won't preserve the proper height ratio
Yes, if you set the width you wanna set height, this would be handy to automate
Also confirmed it'll serve up the largest for the viewport size. However, if I want to reduce the size of the image which is like 90% of the time, I have to apply the width in settings. If I apply the width in css, it'll still serve up the width in the settings/the viewport width which is often way too big
For example here's a 10,000 px wide image but with a css width set to 600. It's still served at 2048 (my viewport) unless I resize it in settings
https://playground-r7uu4.wstd.io/image-testHaha yeah, hence my feature request 🙂
Yep, that's correct, responsive set of sizes is a fixed one, only width/height has impact on resizer
btw its quite dangerous to overoptimize the size, because with responsive layouts you might start rendering that image in a bigger size
with responsive a perfect image size kinda doesn't exist,
confusion for me at first was seeing dimensions in the properties panel and wasn't sure if I should be making the changes to the dimensions there or within the sizes portion of the editor panel.
I now only change dimensions in sizes panel
only use case I can think of where you do not want to lock aspect ratio would be with background images
Not sure if related, but while on topic wanted to add 👇
I don't love how height gets reset everytime I select an new image.
Mostly because I like to use image for all images (like backgrounds) and then have them cover the div. This way I can control lazy loading.
But, everytime I select a new image for my container it resets the height that I want to keep at 100%.
You mean you choose a different image on the same instance and expect to keep the previous hight property from a different image?
if we don't set the new width/height the problem will be if you choose an image with different aspect ratio, previous size screw it up
not sure what our best option here
Yeah I don't either lol.
Just expressing myself 😛
Actually, I think we had some chats around this.
Essentially:
If width/height/AR has been manually set don't auto update it. Something like that 🙂
even if you have it manually set, its unexpected to keep it if user changes image and image gets screwed
I think user expects image to render correctly first and for all
Two ideas so solve this because I've run into it as well. Not saying it needs to be solved, but just throwing this out there:
- If the dimensions of the new image is the same ratio as the old image then keep the dimensions set
- If they are different dimensions then keep one of the dimensions and auto adjust the other (likely keep width and adjust height)
what about the case where you had an image lets say 640px width, you realize it's resolution is too low and upload a different one with 2000px, but same AR.
Now we keep the 640px just because the new image has the same AR
it feels to me that no matter what we do, it will be bad for some case, changing image really is like starting over
we should be able to find a way to remove the need to calculate height if you are entering the width, that's it
entering width isn't that annoying, whats really annoying is calculating the height imho
a really easy thing to do is to add a checkbox:
✅ preserve aspect ratio
its checked by default
now you can change width - height changes automatically
or you can change height - width changes automatically
Or you can uncheck the checkbox and screw up the image if you want to
