October 2017 Update | Image resizing
Keep in mind that this documentation may be out of date. Our past updates remain available in our help center as a historical record. We've come a long way since 2014!
Went live on October 18th
Resizing an image is easier and faster
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:
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:
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.
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.