Image saving:
After receiving images from a designer, they will need to be optimised for the web. This means they will be faster to load and will improve the deliverability of the email.
The easiest way to do this is to:
Opening the image in Photoshop
Selecting File > Export > Save for Web
This will give you a few options for you to consider depending on the type of image it is:
If the image has transparency save as a PNG
If the image is like a photograph save as JPG
If the image is simple (only a few colours, like a logo) save as GIF
Also if the image is animated save as a GIF
JPG is probably the most common type you will use.
Image sizes:
There are two aspects of image sizes which are important for email, image dimensions and image file size.
Dimensions
It is best practice to use retina images in email. Retina images are images that have been purposely made to look sharp on Retina displays, such as iPhones
This is done by creating more pixel dense images which will then appear sharper on high performance screens. You can do this by saving the image at 1.5x or 2x the production size (the physical size you see in the email). You don’t need to resize small images to be bigger in Photoshop, the images must be supplied bigger already. Only go from big to small or you will impact image quality severely.
For example a 600x300 banner in the email, can be saved at 1200x600 raw size and then it is resized in the HTML. This technique is particularly useful for small images such as logos and icons, and for images that are scaled up on mobile.
File Size
Generally speaking, the higher the dimensions you save the image at, the larger the file size will be. Once you have resized the dimensions of the image you should compress the image files before adding them to the email. For example, you could use something like tinypng.com.
As a general rule of thumb when working with emails, 100kb is a good size of image, 200kb is large, 500kb is huge. Some ESP’s limit image size to 200kb at upload.
Having a smaller file size will help your subscriber’s experience of your emails as images will download quicker when they open the email.
Animated GIFs
Animated GIFs are generally heavier images than static images, we recommend that you try to avoid GIFs that are larger than 1mb. You can make gifs more optimal by carefully removing frames and or colours.
When saving ensure there is no matte applied to the images and that the embed colour profile is not checked.
Naming images:
Images need to be more than 4 characters for some ESPS and should not contain any special characters e.g. full stops, brackets, capital letters or spaces. We can use hyphens and underscores to make the filename easier to read
e.g. logo-v1.png or logo_v1.png
Dark Mode:
Make sure to check how your images appear in dark mode. Not optimising your images for dark mode can make the email look a little messy. For example, with icons and logos. If they have a white background as part of the image, when the background colour is inverted, there will be a white block around the images.
Saving the images as transparent PNGs will make these icons look a lot cleaner in dark mode.
Similarly with logos and icons, if they’re already dark, they can become lost in dark mode as the colour matches the background.
Including a slight white outline to the text or image can help it appear as you need in both light and dark mode.
Image hosting:
When images are included in emails they need to be hosted somewhere. With Taxi you have two options for this.
They can be hosted with Taxi in our CDN or they can be hosted on your side, either with your own servers or another third party such as your ESP or DAM.
Last updated