May
07
2014

Quick – what are the best ways to speed up image loading times?

On several occasions I’ve been asked about the recommended file size of an image in order to improve loading times on email clients. It’s a great question, because if images don’t appear immediately upon opening, the recipient might move on from the email without reading it. At the same time, designers don’t want to compromise an email’s visual appearance just so it will load faster.

Well, here’s the truth: there’s no “exact” file size to work with. However, it is recommended to keep all images between 100kb and a maximum of 500kb.

Those images will be displayed quickly (we’re talking seconds here) on most connections: Wi-Fi, Cable (100mbps) and 3G, with 3G being the slowest.

Personally, I like to keep them between 100kb and 200kb. But on occasion, some clients will have a big image around 400kb to 500kb to work with. A good practice, if you’re not willing to risk a long loading time, is to slice a big image into 2 smaller images horizontally, since this is how the browser will load the images.

Image compression

It will first depend on what kind of image you are trying to compress. The two basic categories are:

  • Picture
  • Illustration

For pictures (such as photographs), a “lossy” compression format like JPG will be best, as it will remove details that aren’t easily noticed by human visual perception. This will allow very high compression rates. The downside is that excessive compression will result in a very noticeable quality loss.

For illustrations that contain large areas of the same color, using a lossless compression format like GIF will be the best approach. GIF images will compress repetitions of the same color very well.

Let’s see an example:

ccm-email-images1

The above image contains both a picture and illustration.

When slicing, it’s a good idea to export the left side as a .gif image, while the right side can be a .jpg image.

GIF

ccm-email-images2

JPG

ccm-email-images3

 

A designer’s tip

On some occasions, the default behavior is to save a full copy of the image’s color profile along with the image. That’s known as the device calibration map, usually sRGB or something similar, which tells us how to best map the color to real-world colors instead of device independent ones.

ccm-email-images4.jpg

This is useful for photographers, since this feature will choose a set of more realistic colors, more natural and print-ready.

Admittedly, sometimes the final creative looks slightly different from a submitted image. At a quick glance it’s the same, but deeper inspection reveals changes. Why does this occur?

When an image profile is quite large, it can make some of the files you anticipate being small to become very large. For instance, a 1px by 1px image could consume a massive 25kb.

This profile is generally not needed for the web, so when saving your Photoshop images, make sure to export them without this profile by unchecking these boxes:

ccm-email-images5.jpg

By doing so, you should notice a marked size improvement.

Remember these tips when deciding on the best course of action for determining image size and web optimization. Of course, you’re always welcome to contact our experts at Experian Marketing Services for all your design and coding needs. Just reach out to us at crosschannelmarketing@experian.com.


Comment are closed.