Optimizing Images for Website Design and Email
Let’s face it — we’ve all gone to website pages that take forever to load. Sometimes, the load times are so long, I just close the window or hit return and hope a competitor’s website page was designed and optimized to load faster. So, what’s the culprit here? Typically it’s a large Flash file or just a page with one or more images that have not been optimized for the web. Non-optimized images and long page load times adversly affect conversion rates and marketing campaign results. Whether you’re building a simple webpage, a marketing oriented microsite or an email, images must be optimized for the web.
Optimizing images for website design and email is the act of finding the sweet spot between a great looking image that takes too long to download and a grainy image that downloads in a second at dial-up speeds of 56kps. The idea is to modify the image to retain a nice rendering while decreasing the overall file size. Optimization becomes more and more critical as we add more and more images to any microsite page.
There are a number of software packages out there that allow you to resize images – Photoshop, Fireworks and Paint Shop are a few of the most popular. By resizing, I mean changing the absolute size in pixels, as well as the file size itself. Changing file size refers to changing the amount of data compression used for an image. The most common image files used for the web are JPEG, GIF and PNG. The difference in JPEG, GIF and PNG is the way they compress data. GIF and PNG compression work almost exactly the same, but PNG often produces slightly smaller files. JPEG compression is designed to optimize images with fine gradiations of color, while GIF and PNG are better at compressing images with large areas of color, such as illustrations. The more you compress JPEG files, the more artifacts you see. This is because you are actually removing “data” from the file. Here are a few JPEG examples I created using Fireworks.

Look at the captions below each of the images. This a good/bad example of compression. WordPress compressed my origianl image as I uploaded it to this blog. You can’t even read the capations here, so I’ll have to tell you what they say. The original uncompressed image on the left is 96K and would take 15 seconds to download if you were using a dial-up connection. The image on the right manitains almost the same overall quality but has been compressed to less than 25% of the original file size, resulting in only a three second download. Now imagine that there are four images on this page that are these sizes. A webpage using non-optimized images would take 60 seconds to fully render, while a webpage using optimized images will only take 12 seconds. This is the difference between losing and gaining customers that visit your web and microsites. As you can see, “size” really does matter!
While GIF and PNG compressions do not actually lose “data” like JPEG compression, they do lose color fidelity. GIF and PNG files are limited to 256 colors or less. When compressing these files, we typically move to 32, 24 or 8 colors. Here are a couple of examples of compression using PNG files.

The above images are virtually identical in appearance. However, by looking at the captions, you can see that the 16 color, 8-bit image on the right is only about a third of the size of the original.
Many companies today are adopting marketing management technology that allows marketers to easily create their own marketing campaigns, emails and microsites. This is great, but companies need to also put safeguards in place to protect their brand. This is where marketing asset management comes into play. That is, the notion of creating assets like logos and other images that have been optimized and approved for use in marketing campaigns.
Filed under: Email Campaigns, Website Design | No Comments »

