Resize an Image

Our image width widget allows you to manually change the size of the image without actually altering the file size. For example, you can now reduce a logo that's 500px wide down to 50px, so that it fits better in the top-left corner of the design, without changing the file itself. As the image file remains 500px wide, the logo will look great on high-definition displays.

1. How it works.

By default, when a new image is inserted, it will automatically be adjusted using the  Auto width setting:

Auto width picks the best size for the image based on a combination of image width and available space in the layout:

  • Large images, wider than the available space, will be set at 100% width and will keep this ratio on mobile, using the entire device display width.
  • Small images, smaller than the available space, will use the image natural size to avoid distortion effects or blurry pics.

When  Auto width is active, the new image width slider is visible but disabled. 

To manually adjust the image size, you will simply turn off automatic resizing and move the slider:

 

2. Benefits of this setting.

While automatic image resizing works great in many common use cases (hero images, product photos, and all the use cases where the image is meant to fill the entire column width), there are other scenarios that we regularly hear of and where some extra controls are needed. For example:

  • Quickly adjusting a logo or illustration without using an external tool or risking image distortion.
  • Using larger images to ensure good image quality on high-resolution displays.
  • Adding a logo or icon that does not automatically resize to fill the whole column width on mobile. 

 

3. What if I swap an image with a new one that is a different size?

The setting is applied to the image content block, not a specific image used by it. So the new image will inherit the existing setting:

  • If Auto width is on, the editor will automatically pick the best size
  • If Auto width is off, the new image will use the width that had been manually set for the previous one, and some adjustment may be needed.