Adaptive Images: Lessons from Creating Letter

published on 22 September 2021

No more time wasted cropping and stretching! I've just got images in Letter to automatically scale and adapt to any size. Check out this video I made to show off this awesome feature: 

It's as simple as dragging from the image resize handles, and the image will fill out the available space!

Good to be a bit stupid

Despite it being really nice and easy to use, there was quite a lot of complexity to deal with behind the scenes to make it simple for the end user.

Email clients like Microsoft Outlook 2013 don't support a wide range of CSS properties, which means the images need to be resized in the background.

Had I known all of this before I started, I probably would have built something else. But that's also why I think it's good to be a bit stupid – you won't get put off by how difficult things will be. I think being excited to solve the problem lets me push through where a lot of people would probably give up.

What's new:

Here's what's changed when resizing and working with images:

  • Adaptive Images: By default, images now adapt and fill the available space when inserted or resized. This works when resizing images, and when new images are inserted or imported.
  • Preserve Aspect Ratio: Hold shift while dragging to maintain the image aspect ratio whilst resizing.
  • Double click for Image Editor: Now you can double click images to open the image editor for cropping and filters.
  • Crop to Aspect Ratio: The default crop shape of the Image Editor is now set to the same aspect ratio as the image you open. This lets you preview exactly how your image will look on the card during the crop, ensuring you get a perfect fit.

See the Changelog for all the updates.