Hey people,
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 : https://preview.webflow.com/preview/enigma-protection?utm_source=enigma-protection&preview=cf105ae720886daed44c132e3f681cf1 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
Not sure why psi considers your images to be larger in size than necessary - they are pretty small (max 1024px I think). Perhaps it wants you to optimize them?
To address your concern about wf auto scale - yes, wf optimizes images for you but only for smaller breakpoints, while gsi refers to the original full-sized images. You can read here about the mechanism of responsive images.
1024px width. Okay so… What should I do?
If I have to do it by myself (uploading images for different resolutions)… Than wf’s feature is pretty useless
No, i mean you may try optimizing their size in kb. Just drop all of them into tinypng.com for example, and reupload
I have used cloudbinary and they are optimized
Netflix uses Cloudbinary.
Well, then i have no idea what does psi want from you, sorry.
Cloudinary is a nice tool however it does not automatically size the image or compress images, you do using the API. Which is very easy.
Most of my images there are +4000 pixels wide at 150 dpi with zero compression. I don’t embed source images, I create derivatives with the api and use this tool as a digital asset manager.
Using the tool as an image generator with webflow make it very easy to create images for your particular design and then download and upload into webflow or generate and paste the image into a rich Textfield.
It would be AMAZING to be able to use cloudinary sources right in the designer without custom embeds. One can hope.
To reiterate what @dram is saying; you need to determine, as an art director would, the dimensions, crop, resolution, and compression of the “source” image you upload to webflow. That choice is going to cascade down into your design. Too many designers here just throw some large image to webflow, and think manipulation of the dimensions in css will magically optimize the image in the browser. Especially with background images , WHICH ARE NOT OPTIMIZED.
The #1 issue people complain about when doing page speed tests, is image load. Yet that is all on them.
Are you doing the images one by one with Cloudbinary’s website? That is what I am doing - optimizing each one, then downloading them and uploading them to webflow. But If I have to make several instances of each one, then uploading them and putting them into the sliders. Well that is A LOT of work.
For background images yes. For regular images no, since webflow will create responsive versions from my first selected image. For CMS items I use custom embeds and store the “source” image path for manipulation in the cms item, then insert that as the variable in a custom embed. For placement in RTF’s I have to copy my derived “new” image and paste into the RTF or upload as you would normally.
My custom sites do it all in code on the fly.
Okay. Also the Page Speed Insights says that my images are not sized optimally. But If webflow resizes them, then this wouldn’t be an issue.
I found a solution. I will use the links from Cloudbinary in a embed in the sliders. But I still have to go through them one by one.
I tested it again in PSI, same stuff. I don’t care. I will leave it as it is.
Thank you for the help! 