On the page speed insights it says that I have to scale the images correctly. I thought webflow resizes them according to the resolution.
What should I do?
LINK : Webflow - Enigma-Protection CLICK PAGES THEN “HERE”
Page Speed Insights: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fenigma-protection.webflow.io%2Fizmivane-na-dvigatel
problem may be with a background image. Settings: "custom ".“cover”, “contain”
If wrong setting can overflow device width. style background image.
Also I think only 4 image sizes based on breakpoints. Did you optimize your image first before uploading?
Also it is customary to add link to site. Get better help if do this.
I have used the built in option for images in Webflow. The images I uploaded are optimized but not sizewise because I want them to be responsive as possible and set the images to percentage based size.
VW% is a good option and these will resize appropriately to device width.
Are any of your images used as background images? This is the most likely cause of your problem.
I have set them to be % based and they are just images, not background ones.
From what I understand for the image option is that you better upload a bigger resolution image so that webflow has a scope for the bigger as well as smaller resolutions.
Yes, but the file size should be small if possible. Perhaps largest width 1600px.
I am afraid the screenshot you posted does me no good to help you as I cannot read that language.
Please look up how to post a read only link to the forum. You will receive better help if people can see what you are talking about.
Yeah I will post the link. Thanks
The largest width is 1024px. And I uploaded the link. The page in Page Speed Insights says that the way to handle this issue with the images is to use responsive images (different images for the different resolutions). The same thing that webflow uses. So the results show that this feature in webflow is not working or what?
Actually the first image I see is a background image. To edit properties select section see the right side of the first screenshot.
In the next three screenshots start with the bottom one. Under background you will see "automobile… " .jpg
click on this and you will see editing tools as in the other two screen shots. Cover is good for desktop breakpoint but I recommend for tablet contain and x for tile.
I think if you adjust these settings for your background image you will obtain better results.
There is a forum discussion here
As for using other image formats you may need to add code. there is a css query to query browser support of newer images and code (Jen Simmons, Mozilla discussed this in a video a short time back). If doing this you must provide backup.
![screencapture-preview-webflow-preview-enigma-protection-2019-04-20-11_07_18|690x324]
(upload://AnUNGjGqrdkhDxhxPhj3Zx0nUlL.jpeg)
I know about this page and I am not talking about it. I am talking about other page. Called HERE (I renamed it so people know which to click)
I looked at this page and it looks good to me in Webflow editor. I did learn something new while investigating your issue.
There is an update at https://webflow.com/feature/responsive-images
