Optimize your images for mobile email

Reducing the Size of Your Email Graphics

Article by Venessa Baez | May 25, 2018

Here are some quick points to help you get your email graphics to the smallest size possible, without sacrificing (too much) quality.


47% of email opens in 2017 were on a mobile device. It’s more important now than ever that we create designs that are not only responsive but are data-friendly as well. Reducing the size of your email graphics can have a large impact on whether or not someone reads the emails you send.

When on a slower network, mobile devices can take forever and a day to load photos and graphics on a webpage. Email load time is no different. While it may be tempting to create gorgeous 2x retina graphics, we as designers should keep in mind that our file size can affect a user’s data and your click-through rate.

So here are some quick points to help you get your email graphics to the smallest size possible, without sacrificing (too much) quality.

Optimizing JPEGs

If you are saving an image that needs more complexity (such as a photograph), saving as a JPEG will get you the best quality for its file size.

  • Use “Save for Web” if designing in an Adobe program.
  • Lower the quality of the photograph. I find 85%-90% quality is usually the ideal
  • Save your JPEGs as progressive, as opposed to baseline. If on a slower connection, the device will show a lower quality version of your JPEG before rendering to the higher quality version. This is usually preferred over how a baseline image won’t show anything until the entire image has loaded.
  • Use tinypng.com to compress your image size even further (TinyPng also does JPEGS!)

Optimize your PNGS

If your graphic has a limited color palette, a PNG-8 might be just what you need.

  • Use “Save for Web” if designing in an Adobe program.
  • Lower the number of colors used in the graphics to just before you notice a shift in quality. The fewer colors used, the smaller the file size.
  • Don’t interlace your PNGs. This will actually bump up your file size a little bit more.
  • Just like the JPEGs, compress your PNGs using tinypng.com.

Reduce your GIFS

If it’s gotta be animated, it’s gotta be a gif.

  • Just like PNGS, “Save for Web” and reduce the number of colors.
  • If it’s animated, limit the number of frames in your animation for the smallest file size.

A Final Word on Reducing the Size of Your Email Graphics

Always use a properly sized image when creating up your email graphics. If the space your image needs to fit in is 200×200, make sure that’s the actual size of your image. Don’t use an image that’s 500×500 and resize it using CSS. The full-size image will still be pulled from the server and then be resized in the browser. No bueno.


Don’t want to design your email graphics yourself? Hire someone else to do it for you!


Small changes are currently being made to the website. Pardon our digital dust!
+