Webstudio
Log in

Join the Webstudio community

Updated 6 months ago

Troubleshooting Image Optimization Issues in Webstudio

At a glance

The community member is experiencing an issue with image optimization in a web design tool called Webstudio. They mention that the automatic image optimization is not working, and the images are being used as-is without optimization, even though it worked fine in a tutorial video. The community members suggest options like optimizing the image before uploading or using an image component and positioning it as a background.

The community members also discuss the issue of text positioning on the image, as the text seems to be impacted by the image responsiveness. They suggest trying to optimize the text for different breakpoints, but also note that this may not be necessary as images are generally responsive. The community members are unable to provide a definitive solution without seeing the actual project, and the original poster is asked to provide a builder link for further assistance.

PPika
Do I have a bug or is something wrong with my image?

Eveytime I insert my background, the automatic image optimization doesn't work although it worked completely fine in tutorial video (Building an eye-catching hero section using webstudio-step by step tutorial). No matter the resolution of image is, webstudio uses it as it is in all canva sizes without optimization.

Side note, Image Background settings would be at default (custom, auto). İ also tried png & jpg (exported from canva)
J
P
8 comments
JJohn Siciliano
Background images arent optimized
JJohn Siciliano
Options are to optimize before upload or use img component and position it like a background
PPika
Thank you so much. So after I use the image component as a background, I should optimize text in wider canva sizes right (although I tried it but it didn't work). Is there a way that can help fix the text position on canva without containing it with background(image component)?
JJohn Siciliano
I don't really follow.

As for optimizations per breakpoint... not much you can do there. If you really want, you can duplicate the img, show one on desktop one on mobile and lower the img dimensions in settings for mobile
JJohn Siciliano
actually imgs are responsive so that's not necessary
PPika
Sorry for being all over the place. I just have one question if you may.

Is there a way I can fix the text position and not get impacted by image responsiveness?

It is because Image is pretty responsive but text isn't. So on desktop breakpoint, when I put the text on the image and go to preview on desktop, the text change it's position to a lower position. The more I increase the size of canva design, text continue to get to the bottom.

I don't encounter this problem when I adjust text in mobile breakpoint

Side note, the container of text is under the image in navigator bar.
PPika
Maybe because I played with the margin in order to be able to put text on image?
JJohn Siciliano
idk hard to undertand without seeing a builder link
Add a reply
Sign up and join the conversation on Discord