Streaming live at 10am (PST)

Responsive Images when used as DIV backgrounds?

#1

Does anyone know if this is a coming feature soon. It does say on the Reaponsive Image blog post at https://webflow.com/blog/new-feature-responsive-images

At present, this change doesn’t include background images or images in rich text elements, but we’ll support these elements in a future iteration.

This was over 2 years ago…

What is happening is my clients are uploading huge images for blog and news posts. When a thumb image is needed for the summary card (looks like these https://www.w3schools.com/howto/howto_css_cards.asp) the image has to be used as a background to a div so that they all are same size. Works fine with CSS and Cover but the image size is HUGE sometimes as there is no cropping or responsive functions applied. Clients don’t know how to crop images nor do they have time.

Is this feature coming soon? Can we contribute to get it added faster? Any workarounds? Responsive background images are pretty critical since we don’t have a native way to crop.

Can anyone advise on this?

#2

Options.

  • Wait for webflow to implement it. I only know one CMS where I can do this on client upload now.
  • Create three image fields (or four) for different break points and have the client upload optimized correctly sized images. Then assign the right one as the background image source. Look at Kraken.io
  • Stop using background images for images.
  • Get a pro account on Cloudlfare, turn on Mirage.
  • Offer optimizing service to client and handle it yourself, make some extra cash.
  • Try using https://github.com/levymetal/jquery-resize-image-to-parent
  • fill in blank here

These are the ones i can think of off the top of my head.

Or live with a terrible user experience where huge images choke the mobile user’s browser and sucking up their data plan for no good reason.

1 Like
#3

These are good and I will check them out. The last two CMS I used had image transforms where it would resize images to presets on upload. Craft and Statamic both had this. Craft can do it on the fly also. Just hard to believe I ha e no way to do this in Webflow. Like in my gallery I want all 300 x 300 pixel images cropped from center.

I agree background images are not the way. We need a way to do image transforms or something.

#4

Cloudinary is an option but Webflow should have this https://cloudinary.com/documentation/image_transformations#resizing_and_cropping_images

#5

Does Kraken or any others work within webflow?

#6

Kraken.io has a web based interface that could be used by editors could use to create versions of images and perform resizing. It has an API that would require server side code. So if you used the webflow API you could potentially handle the integration on your own app.

Does not look like Cloudflare Polish will work since the images need to reside on your domain. I was just looking at this for another site. Webflow serves up images from their CDN.

#7

I am just used to Craft and Statamic where they have image transforms and optimization built in. When you upload an image, it is auto sized to presets. We really need this in Webflow. You can define them ahead or on the fly. See https://docs.craftcms.com/v2/image-transforms.html

Just need to get clients to learn to resize before upload I guess. New client flow. Not as client friendly in Webflow as far as images go.

There must be a better way to automate this for
Clients. Can Cloudinary do it?

1 Like
#8

I think the bigger issue is the one I face as a designer, each image is really unique. What settings you define for a background image does not necessarily translate to another image.

Whereas, a normal block level image is just filling the space in the flow, and is optimized.

I have a solution for this with a customized CMF/CMS I use when clients want to drive and the layout needs are complex and require programming. So if I need all those features …