Imagination is our power

#1: Choose the right image type for the job

There are currently quite a few image formats that are used within web design: PNG8, PNG24, PNG32, JPG and GIF. These are widespread and supported by every browser, all are very different and are all suited for a particular use. Lets take a closer look at each.

GIF ~ *.gif

Where to use: IE6 clients when you need transparencies, non-complex images with less than 256 colors and it can be animated.

Limitations: Can only hold up to 256 colors in total.

Pros: Their transparencies work on all browsers, the smallest size completely blank image (see CSS sprites further on), very easy to reduce the color depth to make smaller a file size and offers an animated format.

Cons: Images often loose quality when in GIF format as the image creation package has to workout the closest color match. Not very good for photo’s. Animations can be massive in size if you are not careful. Images can appear jagged, and transparencies can sometimes have bleed on the edges.

JPG ~ *.jpg or *.jpeg

Where to use: Perfect for photos or images where no transparency is needed, such as background gradients.

Limitations: No transparencies, not very good with text.

Pros: Excellent for photos, 24-bit color giving 16 million colors.

Cons: JPGs are much larger when creating files with few colors in it, they have lots of extra info included in the file (Exif) such as camera, ISO and shutter speed, which are not needed on the web. No animation support.

PNG8 ~ *.png

Where to use: Any browser with the exception of IE6 when needing transparencies.

Limitations: Like GIF only has a maximum of 256 colors.

Pros: Similar file size to GIF but with a sharper output. Transparencies work great. Excellent for CSS sprites when using only up to 256 colors and reduced color depth images.

Cons: Not so handy with IE6 as you would need a separate PNG fix to make transparencies work, but that only applies to images with transparencies. Not very good for creating photo quality output. No animation support.

PNG24 ~ *.png

Where to use: High quality images that do not require a transparencies.

Limitations: No transparency support.

Pros: 24 bit colors giving 16 million colors for very high quality images.

Cons: No transparencies and often larger than JPG when used for photos.

PNG32 ~ *.png

Where to use: High quality images, icons and colored based opacities.

Limitation: None really when it comes to the web.

Pros: 24-bit color and 8-bits to handle transparencies. Excellent for icons, gradients and other images. Easy to crush.

Cons: Over sized KB’s when creating photo images.

Rule of thumb

So to round that up into a rule of thumb, use JPG for photo’s and gradients without transparencies, use GIF for IE6 transparencies, use PNG8 for all other browsers with low color depth images and transparencies and use PNG32 for the best quality and transparencies.

Of course you can use PNG with transparencies on IE6, but it will need the addition of a .htc file and possibly a Javascript file to make it work in all situations, or just a Javascript file depending on what version of the PNG fix that you use on your site to make it work, it will however slow down loading time.

#2: Use the right tools to create a web friendly image

Many designers and design studios use Photoshop and Illustrator to create their images, whether that be logos, gradients, icons or whatever. But these tools may be a great for creation, they are at times truly woeful for outputting images for the web.

Often images that come out of Photoshop are up to 50% larger in KB’s than are actually needed for the quality, and Illustrator is often not much better when talking about Jpgs. On top of that they don’t support Gif animations that some of your clients may desire. So instead of using the save for web options that come with Photoshop, just save it as a PSD and open it in Fireworks (or maybe Illustrator depending on the output medium) and export for the web from there.

Fireworks is the superior Adobe product for creating web ready images. OK, I am a mega bias Fireworks fan, so to prove the point to myself I’ve done a bunch of tests and have the results below. For me the most consistent performer is still Fireworks, especially when you look at Jpg, Illustrator is a far superior tool over Photoshop, with Photoshop being truly dire on nearly all file formats.

Photoshop Illustrator Fireworks
1x1px transparent Gif 1,101bytes 43bytes 43bytes
Sample Jpeg image(my cat Jack), orignal size 2848×2134 reduced to 800×599. Output at 80% quality 124,206bytes pre-crushing


119,393bytes post-crushing

119,599bytes pre-crushing


114,844bytes post-crushing

51,838bytes pre-crushing


51,838bytes post-crushing

PNG8 output with transparencies with facebook icon 3,456bytes pre-crushing


2,582 bytes post-crushing

1,805bytes pre-crushing


1,738 bytes post-crushing

1,762bytes pre-crushing


1,646bytes post-crushing

PNG32 output with transparencies with Facebook icon 3,654bytes pre-crushing


2,798bytes post-crushing

2,831bytes pre-crushing


2,760 bytes post-crushing

2,882bytes pre-crushing


2,802bytes post-crushing

Animated Gif Not Possible Not Possible Works perfectly

Do feel free to complain that I did not use Gimp or any other software for this comparison, and if you wish do provide me with the results I will certainly add it to this table. All versions of the Adobe software were from the CS5 set, lets hope that CS6 will be even better.

#3: Learn how to output the lowest kb’s with highest quality

Firstly, it’s got to be said that there are no hard and fast rules for choosing the image that will give you the best output quality while still maintaining the lowest kb’s. It’s all about trial and error.

Ok, these are the rules of thumb mentioned before, that for example if your working with images that are above 256 colors forget about Gif and Png8, and for most photo’s Jpg’s are the best, for icons with transparencies Png32 will always kick butt, but for gradients without transparency then it will usually be Jpgs, for transparency it will be Png32, borders and lines tend to have transparent backgrounds so Gif, Png8 and Png32 are usually the best.

Lets take a closer look as some examples of where a wrong choice in the image format can cost 100′s of KB’s of size and maybe valuable seconds of loading time. Again, I am using Fireworks as the tool for creating all of these images due to it’s consistent results and then ImageOptim for crushing.

A text image with a low number of colors

This really simple (very un-artistically made) image is pretty damn ugly, but will give you a good idea of what I am trying to illustrate. It’s the kind of thing that is often used on a website to create a meaningful feel with text only.

Ugly text image

GIF Jpeg png8 png24 png32
Size in bytes after crushing 4,210 bytes 9,718 byte 2,554 bytes 2,385 bytes 2,827 bytes

As you can see, PNG24 wins out on this image (after crushing, PNG8 before crushing), with PNG8 coming a close second, at the other end of the scale JPG performs incredibly badly, not only in KB image size but also in picture quality. You can view a comparison page yourself to take a look at the output.

A photo image

Another take of that photo of Jack, this time re-sized to 400px wide and formatted into various different file types.

GIF Jpeg png8 png24 png32
Size in bytes after crushing 36,415 bytes 100% = 134,915 bytes
80% = 20,368 bytes
80% Smoothing 2 = 19,479 bytes
80% Smoothing 2 Sharpening off = 14,912 bytes
29,904 bytes 178,727 bytes 179,044 bytes

This time Jpg is the clear winner and when turning off the sharpening and setting the smoothing to 2, without any perceivable change to the image I was able to knock off many of those extra kb’s. Again I have made a comparison page so that you can check the output.

Here is a screen shot of the Export Wizard of Fireworks that shows the settings I used to get the lowest size image possible.
(Click the image to see it properly).

An icon

Icons are very important in modern web design, and their quality is exceptionally important. Just one bad looking RSS icon can make a whole site look really bad. The thing that you have to think about when creating icons is what type of background it will be used with. If you don’t know what color or colors it will be then GIF, PNG8 and PNG32 are your only options, which means that you have to consider how many colors you need to have in it’s creation also. If you want to have over 256 colors then PNG32 is your only choice. Here is a Facebook icon as PNG32 on the left and PNG8 on the right. If you look carefully you will see the quality difference with the PNG8 version obviously having banding.

Some Icons in a sprite

It really depends on if you are planning to have many colors or not. If, for example, you are making a set of icons that are only white are going on a black background, then it’s perfect to use PNG8, but if you are planning to have the iPhone icon style using many colors in the same sprite set with a background transparency, then PNG32 is the only way.

This is the 32px sprite set used for the share and follow plugin, click the image to see it in it’s full size.

A gradient for a background

If there is no transparency involved then go for Jpeg every time, it’s perfect. But if you need to have a transparency then go for PNG32 which will allow for the most amount of color changes, as PNG8 only can do 256 colors. Most of the time you will also want to reduce your gradient to only 1px wide so that it does not take up load time and then use repeat-x to repeat the gradient across the whole of the body of the HTML document. See point #9 on this list for examples.

Some borders and lines

Same rules for borders and lines as the gradients above. If there is no transparency involved then go for Jpeg first every time, it’s nearly always perfect. But if you need to have a transparency then go for PNG32 (or PNG8 if you don’t need many colors). There will be more about gradients, borders and lines on point #9.

#4: Crush those images before use

Most images come with extra ‘fluff’ inside the file. Take Jpeg for example that has all of the details of what camera, shutter speed, ISO, focal length, what camera was used…etc. All within the file in Exif format. All of this is not needed and will just add extra bytes to file size. To some extent, this is the same with all file formats and because of this there have been many different apps developed for stripping the ‘fluff’ out of images.

Off-line tools

MAC: ImageOptim is probably the best tool to use on a MAC as it deals with Gif, Jpeg and PNG. What it does is that it packages 5 different tools in one handy GUI to explore your images and make them as small as possible.

PC: pngcrush is handy if you like the command line and you work with a lot of Png’s.

There are also a mountain of Jpegtran apps for image crushing, or manipulation for both Mac and PC.

On-line tools

Smush.it is a Yahoo project that allows you to either upload directly or via a URL. It offers, if possible, lighter images to replace the ones you have uploaded or have on an existing page.

Punypng will try to reduce the size of any image file that is uploaded. It works with PNG, Gif and Jpegs.

If you happen to use any offline or online tools not listed here that you find excellent, please do comment so that they can be shared.

#5: Use CSS Sprites for images

CSS sprites are one of the key tools for speeding up websites and are really simple to get your head around if you have not used them before. In simple terms a CSS sprite is an image that contains many different images on it. They could be logos, buttons, menu items…anything you like. Sprite images can be used for mouse over effects, standard link buttons, or maybe even backgrounds for input styling.

Why CSS sprites are so, so important is that they basically cut down on the number of connections made to the server. No matter how small your images are in KB’s, if there are many of them then it will take a long time to download them as the browser can only download a limited amount at once. Using CSS sprites downloads one image that will be used many times, thus 1 connection, leaving the browser free to download other content.

Here are 3 different ways to show CSS sprites on screen (see here for the demo).

I) Image replacement, using display:none to hide the text

<h1 id="logo"><a href="#"><span>Logo words</span></a></h1>
#logo a {
background: transparent url(sprite.png) no-repeat -111px 0;
height:60px;
width:120px;
display:block}
#logo span {display:none;}

This technique was very popular about 5 years ago. Some designers still use it as it keeps the text visible for Google to find inside the first H1 of the site.

On the downside it means that the logo will not be picked up by Facebook when sharing your site, so you have to add some head code so that Facebook will pick up your preferred image.

II) Using text-indent and overflow together

<ul>
<li><a href="#" class="facebook">Share on Facebook</a></li>
<li><a href="#" class="twitter">Share on Twitter</a></li>
</ul>
.facebook {
background: transparent url(sprite.png) no-repeat 0 0;
height:24px;
width:24px;
text-indent:26px;
overflow:hidden;
display:block
}
.twitter {
background: transparent url(sprite.png) no-repeat -25px 0;
height:24px;
width:24px;
text-indent:26px;
overflow:hidden;
display:block
}

Again, this keeps the original text for Google to find in the HTML markup, and saves on the display:none. So, less code to make this happen. What we do this time is tell the text to appear outside the block area of the A tag, where we have set the overflow text and the stuff outside the block space, to not show up at all.

III) Using the IMG tag with a blank image

<a href="#" >
<img src='blank.gif' alt='descriptive words for google'
height='60' width=60 class='foursquare' />
</a>
.foursquare {
background: transparent url(sprite.png) no-repeat -50px 0;
}

Sprites can also be written using an inline style, here is the IMG tag version using an inline style.

<a href="#" >
<img src='blank.gif' alt='descriptive words for google'
style='background: transparent url(sprite.png) no-repeat -50px 0;'
height='60' width='60' />
</a>

Thus you can save on the CSS, which is handy when your are dealing with many sprites with many images on each. For example, with my plugin Share and Follow I use this style as I have around 70 icons per set and 5 sets in different sizes, giving 350 extra CSS statements all needing some unique CSS. And that is not mentioning the 26 different icon sets that the plugin offers. This would add up to a huge total of 9100 extra CSS statements to be placed in the CSS file. That would not be good, would it?
So, on this occasion rather than adding 9100 extra CSS statements in the external CSS file, I choose to add some extra in-line styles directly into the HTML.

The important thing to notice about this method is the use of the blank.gif which stretches to meet the size of the IMG while the CSS background image comes from the sprite. So in theory there are 2 images loaded to make this happen.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: