When using images in our email or web, we must take care about its size to ensure a fast download, even with the slowest connection speed.

But remember: don’t create emails which consist in just one image with all the information. Always insert text in your emails. Why? For two reasons: to avoid be considered as SPAM and to give some information to your recipient before downloading images, so, test your email without images to ensure that your message is comprenhensible and readable.

There are many image formats available, but only a few will work properly  on web and email. They differ in some important properties, and you should learn how to use them in the best way  to optimize your web or email size and weight, and get a higher download speed.

The first you must know is that there are two kinds of image compression, lossy and lossless.

Lossy compression means once you decompress the compressed data, you will not get the exact same image as the original (you lose information when compressing). However, this will only be visible at a closer look. Lossy compression is good for web and email because images use small amount of memory.

Lossless image: When you decompress a lossless image, you will get exactly the same image as the original. This compression uses greater amount of memory, so at times it may not be good for web, but for print.

Common image formats for web and email

JPEG (Joint Photographic Experts Group)

The extension for this  format  is .jpg (or sometimes .jpeg). This image type is lossy, and you
can control the compression level in image editors.

It is good for saving images with millions of colors, like photographs, drawings with shades, gradients, etc.

GIF

This format is a bitmap, which means it's a grid made of tiny pixel squares. Data about every pixel is saved (so it's lossless), and you can save up to 256 colors. Pixels may also be transparent. GIF may contain more than one frame, so it can be animated.

Since image programs can control the exact number or colors stored in a particular image, it is a good format for saving images with less colors, like charts, small graphics (bullets, buttons), images containing text and other important details, flat-color drawings etc.

PNG

This format was created to become a new and improved GIF, because GIF was
patented, and thus not free nowadays. PNG has greater color-depth than GIF, it can
store partial transparency, and can achieve greater compression. It gets the best from JPG and the best from GIF. Unfortunately Internet Explorer 6 and less versions doesn’t support PNG transparency and a small hack is needed.

It's better to save images in this format when it's both needed to preserve transparency and large amount of colors, or partial transparency. Since it's a lossless format, these images are often not small enough for displaying on the web.

Image file sizes for web and e-mail

Which file size is recommended for images in web or email? Well, there’s not a specific rule but I recommend this as guideline:

Anyway. Before choosing which image format we need, whe  should  set properly image dimensions in pixels to get  an optimized image size. I’ll talk about it in the next article.