I have been thinking of creating a thumbnail contact sheet that grows from a row of tiny thumbnails to full page contact sheet of thumbnails…
I have created a collection (and it limited to 100 images - as it is a limitation of webflow), and inside the each item drop a div with a background taken from my image collection and image set to cover. as soon as I set it the images cover the div but webflow starts to work slow like the molasses - unusable. I have tried to go a different way to drop in an image and that doesn’t slow down the designer but if I want each image to fill a square block I need it to cover - so I tried adding an embed with a object-fit:"cover; property - but this led to the exact same result…
I have also attempted to create it with interactions where the collection item is scaled… same thing… I have no idea what am I doing wrong, or why working with only 100 images is bringing the entire webflow designer crashing down…
Please advise - maybe I am doing something wrong, and I would be grateful to find out about it!
Thanks in advance!
Here is my read only LINK
Here is the published PAGE
If you’re trying to put many of these large images all on one page in your project, it’s definitely possible to see slower speeds in the Designer. To avoid this, I’d recommend optimizing all images to be below 350kb at the very least — smaller file size is better if possible.
There are many resources out there which you can use to resize your images other than image optimizing/editing tools like Photoshop or Lightroom.
@Brando Thanks for the reply, but I thought that webflow intellegently creates various sizes for the images automatically - isn’t there an option to create multiple sizes and that the correct ones are served up when needed…
Since this a portfolio for photographs i need to have high res images, and since they are all inside CMS I have to redo the entire collection to add a second (and possibly third) image field that will have thumbnails?
Webflow does size for different screen sizes. What it doesnt do is compress the file size.
You can still get High Quality images in a portfolio style as many others have or are doing the same thing you are.
I use https://resizeimage.net/ if you are doing one or two images at a time. But if you are doing dozens at a time, I would recommend using something like Lightroom or other resizing programs that do batch processing.
Keep in mind that the larger the file size of your images the slower the load time of your website, which diminishes the page ranking of your site.
What I am saying is that when you upload an image that has a file size of larger than 1MB you will see slowdown in loading. The responsive image feature resizes the dimensions, not the file size.
It is still best to resize the image file size to be below 350kb.
*What I do is size my images to a min of 2000px W and about 100-125 dpi. Anything larger than that for the image and your files sizes will be too big.
I just re-read the article on responsive images… and I don’t understand… from what I understood is that webflow creates additional image variants as needed to have
@IVG responsive images does create variants but for your live site. When you’re operating in the Designer you aren’t using these variants. The slow speeds come from having many large images in the Asset Manager and on the Canvas.
Once you optimize the images, you shouldn’t see the slow Designer speeds anymore
