CMS Image resizing

Design help CMS
1

I have read the article about responsive images, which suggests that the server creates multiple variants for different breakpoints. Also, I understand that I can set minimum and maximum pixel and file sizes. (This assumes that the client is able to understand these parameters).

I’m not entirely clear on the best practices for client-managed images in Webflow.

For example, I am designing a blog for a client. I created a space for an image at the top of an article in the blog collection. This is a horizontally formatted (landscape) image.

If the client uploads an image in portrait mode to this field, what happens? Does it get cropped to a landscape format, or will it always display the full image?

The blog page lists 25+ articles with a thumbnail for each. The thumbnail for this blog page is only 300 pixels wide, but the client has uploaded a 3500 pixel wide, 3MB file. Is there any way to force the thumbnail image to use a smaller image than the article page?

Does the designer offer any controls over image variant size?

Here is my public share link: LINK
(how to access public share link)

2

I’ve done some testing on this. As far as I can tell:

  • a portrait-format image will not get cropped to landscape mode, and the entire (possibly giant) image will get served to the visitor.
  • Thumbnails for Collection pages use a very large image, even if the thumbnail img size is very small

I haven’t found any documentation about having control over either of these (quite important) things.

3

Hi Ian,

  1. You can now set image size and ratio limits within the Collection List itself (see the Webflow Update posted in January 2022).

  2. As to how the image ‘crops’ it will largely depend on your layout. Rather than using an image element, perhaps considering using a div block with a set size (eg. 100px x 100px) and set the image to appear as the background image of the div block. This will ensure your images are all the same ratio.

4

Yes, I understand that I can set minimum and maximum pixel and file sizes now. That helps to avert issues, and may be the best solution.

I don’t fully understand #2. Does Webflow crop images that appear as background images differently than ones that are set as an img HTML element?

Here is my testing sandbox for example.

5

Correct. Check out the Webflow Parallax image backgrounds, gradients, and video backgrounds video on YouTube for further understanding. For what you are trying to achieve, I would suggest using a div block, with the image set as the background.