October 2017 Update | Image resizing

Going live on October 17th

Resizing an image is easier and faster

Screen_Shot_2017-10-12_at_16.00.23.png

Until now changing the size of an image required editing the image file itself.

This took a bit of time (using the built-in image editor or in another application), and did not work well when needing crisp graphics on high-definition displays.

A new image width widget now 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 message, without changing the file itself. As the image file remains 500px wide, the logo will look great on high-definition displays.

 

How it works

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

AutomaticResize.gif

Automatic image resizing 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 Automatic image resizing 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:

ManualResize.gif

The slider allows you to quickly scale an image from 100% to 20%, and you can decide if the image will display at full width on mobile or not.

 

Benefits of this new 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.

 

What if...

I swap an image with a new one that is totally different in terms of 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 Automatic image resizing is on, the editor will automatically pick the best size
  • If Automatic image resizing is off, the new image will use the width that had been manually set for the previous one, and some adjustment may be needed.

 

I edit messages that had been saved before this update

A manual width setting did not exist, so all images will use automatic resizing and will display exactly as they did before this new feature was introduced. So, there should be no backward compatibility issues.

 

Have more questions? Submit a request

Comments

  • Avatar
    Corey Moen

    Super excited about this essential update and workflow improvement! Will this only release on the plugin version on October 17?...if so, when will it be released on the other versions like Pro?

  • Avatar
    Massimo Arrigoni

    Hi Corey, this feature change - when it goes live - will be immediately reflected in any application that has embedded the BEE editor, including BEE Free and BEE Pro!