Streaming live at 10am (PST)

How to best handle image cropping and optimization?


#1

What is the best way to handle images in Webflow? I am used to having image transformation features with other CMS so excuse my ignorance as I am new to Webflow. If I want a Collection to have a logo field with logos auto sized to 200px by 100px with quality 85% JPG how can I do this?

I know I can set a DIV background with an image but that is not the same.

Any suggestions or am I missing this feature somewhere?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

I have been looking and can’t find how to do this. I just want to make a couple simple card components https://www.w3schools.com/howto/howto_css_cards.asp. The issue ks I want the images same size no matter what size the original is. That is why I wanted a crop.


#3

Webflow does not include an image manipulation tool or functions you can access directly. There is automatic resizing of your upload, creating versions of the file that are optimized for different viewports down from desktop. This is explained in greater detail here:

A quick search of the forum turned up this thread you may consider reading.

I crop, resize, and optimize on my desktop before uploading to Webflow, In order to have complete control of images on sites I build. As a professional photographer also, image quality, and fast load times are very important to me, so I don’t mind the extra work to get the best results.

Personally my favorite tool for that is Graphic converter on a Mac.

It’s batch processing is far superior than anything else I’ve ever seen and used.

When clients want to process their own images, I have a web app that stores the site requirements and creates custom sized and cropped images for them. I use a processwire CMF built engine for that. Hope this helps. Good day.