Image Cropping and Resizing, Revamped
Over the last few weeks, I've been working on a total editor revamp for Letter, and it comes with a new and simpler way to edit images:
- 🖼 Pan by dragging
- 🔍 Zoom control to move in or out
- ↔️ Resize with drag handle
As demonstrated above, the image editor now sits inline with the newsletter itself, so you see exactly how your edits will look as you make them.
This post is just a quick overview to share some of my work in progress, and a few of the caveats I came across with sizing images for newsletters.
Adaptive Images with Pan and Zoom
The new image editor also builds upon the previous 'Adaptive Images' feature, which maintains the aspect ratio of your image. By storing the zoom and aspect ratio properties, any new image pulled in 'just fits', and can be panned and zoomed:
Below is a tweet of the old Adaptive Images work if you missed that:
Overall this new image editor has less features than the previous version, but it's a big improvement in workflow:
Improving the Image Workflow
Previously when editing images in Letter, a nice image editor was popped open in a full-screen modal.
Whilst this image editor was feature-rich, it took the user of the flow of their newsletter, so you couldn't get a realistic preview of how your changes would look in the context of the newsletter until clicking 'done':
On top of this confusion, for every change saved, a brand new image would be uploaded, replacing your original image. This meant there's no option to pan or zoom back to the old dimensions (unless you press undo).
The new image editor has less capabilities, but it's simpler, and all we really need for a newsletter editor.
Working with Email Images
When creating responsive images for regular websites, you can avoid cropping images by using CSS properties such as object-fit , or background-size:cover.
However, for email, such properties aren't supported in many email clients, meaning you actually have to crop the images to the exact dimensions. 😱
All these constraints makes image editing a bit tricker - how, and at what point do you crop the image so it will look right in the email?
After some trial and error, I solved this by storing the zoom properties and width/height dimensions for image changes, rather than creating new images each time dimensions are changed. For example, if a user closes the app and comes back later, the saved dimensions can be applied to the original image. The final 'crops' are applied only when you export the newsletter.
Animated GIF Support
GIFs are kindof necessary these days for email, and the final hurdle for this image editor will be GIF support.
I'm currently using a library called Pica for resizing images in the browser, and GIF support is out of scope. A final step would be to plug the scaling and dimension properties into a GIF resize API, such as Cloudinary:
Until at least December, this is going to be out of scope for Letter too! Thanks for following along - stay tuned for the new editor 🤫