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:

  1. Opening the image in Photoshop

  2. 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: 

  1. If the image has transparency save as a PNG

  2. If the image is like a photograph save as JPG

  3. If the image is simple (only a few colours, like a logo) save as GIF

  4. Also if the image is animated save as a GIF

JPG is probably the most common type you will use.

Select the quality around 80 as a ballpark, you can see the quality change in the preview. This is related to image size (in px) so a small image can be higher quality and vice versa. This is why big images are often sliced up in Photoshop. As a general rule of thumb when working with emails, 100kb is a medium image, 200kb is large, 500kb is huge. Some ESP’s limit image size to 200kb at upload.

Animated GIFs

Animated GIFs are generally heavier images than static ones, 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 embed colour profile is not checked.

Retina images:

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 on scaled up on mobile.

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

Did this answer your question?