Optimising Images
Optimising images for the web is a tricky business. You have to get the right balance between filesize and picture quality. It is an essential step though. Look at any webpage, and you will see that most of its load time comes from images. Your website will be needlessly slow if you don't drop the sizes of these images.
There are three key areas where bytes can be shaved off your graphics: bit depth (number of colours), resolution, and dimension. Here I'm going to show you the practicalities of web graphics optimisation, and less of the technicalities. You don't need expensive graphics editors to compress the sizes of your images, as there are plenty of free utilities and shareware that will do the job for you.
This page was last updated on 2012-08-21
An Ode to Minimalism
Look at this site. It is quite minimalist in design, using only 5 small images as part of the design on each page, plus a background. This is because I am not trying to wow you with my HTML skills (you already know I'm great), but I'm trying to provide a fast-loading, functional, but still nice looking site.
Much can be achieved by using very little. Using this page as an example, a tiled background, which doesn't look overly-tiled fills the whole screen. Table cells and layers are given a background colour which breaks the page into visible sections — top, right, main, and bottom. Older designs for HTML Source have used single-pixel gifs in place of coloured <hr>s, but now even their tiny filesizes have been optimised out.
Something that many people forget is that the best way to optimise your images is to not use them at all. Cutting out needless graphics is the easiest way to optimise your pages. So, you should always be looking for ways to lessen your graphics-usage, and to get more out of every one that you simply must use.
Minimalist design is a definite trend in the high-traffic sites; » Yahoo is the only example I need to give.
Which Format?
One of the more common mistakes which lead to bloaty images sizes is people using the wrong file format for the job. The simple rule to follow is this:
- GIFs should be used for the bulk of your images. Simple line drawings, shapes, small icons, nothing too complex. You won't lose any detail because GIFs are 'loss-less', but you can drop the palette down to cut a GIF down to size, and maybe up the dithering if you don't like the blocks of colour you're left with. Often, however, dithering will increase the filesize, so get the balance between colours and dithering right.
Horizontal blocks of colour compress better than vertical ones in GIFs (to understand this, have a look at this » example). If your image is going to be big no matter what you do (like most images with big dimensions), save the GIF as interlaced. This serves a blurry version of the graphic first, and gradually paints over with the finished image. This increases the filesize by a bit, but causes the perception of faster downloading. - JPEGs should be used for photographs and blurry background tiles where little of the intended look will be lost by the JPEG's compression. If a graphic needs to be accurate or sharp, stay well away from JPEGs. Just remember, most people would rather have a slightly bigger download than a messy graphic, so try not to sacrifice too much quality. Sometimes a nice effect can be had from compressing an image as a JPEG — mess around and see what you can get. Again, for big images use the progressive option when saving for the apparent speed-boost it causes.
- Never use bitmaps for anything.
The best way to choose the format for a graphic if you can't make up your mind is to experiment and save it as both, then compare both their sizes and image quality. To see what special things the different graphics formats can do, read our image formats profile. Have a look at this » page which shows proper usage for different types of image.
Chop and Replace
Some of the images on your site can be dumped without much trouble. Fancy animations that add nothing to the page and only serve to distract; graphical links (replace with text links); image rollovers;and big headings for a page can be lost in favour of large text headings with an appropriate font face and color.
Now we come to one of the worst crimes in images: GIF text. This is when you use a special font and put it in an image, because the reader may not have that font and so wouldn't see the words as you intended. This is bad. Never put text in GIFs (or do it as little as possible). It is needless excess. Very rarely does it benefit a page to have a certain font in place, usually a fancy font can be replaced by a more common font and it will look just as good. If you need text over an image, set the graphic as a table background, then put the text in the table.
Palette size
Often, a small sacrifice can lead to big gains. Drop back the colours used in your GIFs, bump the dithering up a bit to make up for the missing colours and you can cut the file size in half with little noticeable effect on the image quality.
Using the web-safe palette is often the easiest route to small file sizes. Because with that palette, you can export an image in Paint Shop Pro stripped down to just 2 colours, where other groups only allow you to go as low as 17 for instance (for Optimised Octree). If you have no idea what I'm talking about, go to our Software Review page and get yourself a copy of Paintshop Pro.
Making your own images instead of ripping other people's is a good idea too, because you can design them to be faster (not to mention the copyright stuff). Also, always have the images you're using with the rest of your files on your server. Don't link to other people's images, because this is slower than using your own (the browser has to go off looking, plus the other person's server might be slow).
Check what resolution you're creating your images at. The same size image can change drastically in size if it is at a higher resolution. The normal resolution is 72ppi (pixels per inch), so if you've gone higher than this (which happens regularly if the image has been scanned), try putting it back at the end and seeing the results.
Crop out the rubbish
Use the crop tool in your image editor to cut out everything but the essential parts of the image. As a bonus, these essential parts of the images take up less space on your page, and your readers will be thankful that they didn't have to see any rubbish.
Another way of achieving this is to use a thumbnail image to link to the main image. This means you make a smaller (in physical size and filesize) image, and make it a link to the full version, which gives the user the choice whether to download the full graphic if they like the look of it.
Stating the height and width
You should always, always include both the height and width attributes in your graphics. It means the browser knows what size the image is going to be, so it can continue on loading the rest of the page without having to worry about the graphic suddenly loading and pushing everything else around. The page will look far more developed if everything is laid out correctly straight away, increasing the apparent speed of the page. It also means that if a reader is in the middle of reading something, the text won't suddenly shift down when a graphic above begins loading, as the browser will have given it all the space it needs. Read the height and width tutorial.
Another bonus is that anyone with images switched off will still get the same layout as people who have them on, avoiding the possibility of the page looking messed up without images.
Oh, and never use these attributes to make an image appear smaller. Your readers will be downloading massive pictures when they only need small ones. That's just crazy... If you want a smaller image, resize it in your graphics program. A smaller-looking image will not be any smaller in filesize.
To increase the effect more save as many of your graphics as interlaced as possible. This will make them download a rough version first, and then add detail later. This is great because a page with a pile of half-loaded graphics looks a lot more alive than a page with one or two finished images. This option is more useful for big graphics.
Using the Cache
A browser's Cache is an area on the hard drive (a part of the RAM in Netscape) where it stores recently used images. If you go to a new page and your browser sees the same image file being called on, it can just pop it back up from the Cache, skipping the download process altogether. This means super-quick loading for many of your common images. This is why using the same images site-wide is great for speed — they download once and you can use them a hundred times without having to do it again. You could also try pre-loading some images for quick display.
Check your server
As with all things to do with optimisation, your work will be pointless if the server your pages and images are on is slow. Not only do images take time to download, but a slow server will make your reader wait before they can even start downloading it (only four things can download simultaneously, as far as I know). This can add loads of 'empty' time, where nothing is actually being added to your page. If you aren't sure, ask some people on a newsgroup or something about a fast host, or ask them for their opinion on the one you're currently using. We have a page that rates some webspace providers too.
The slowest images are the ones that aren't there. When you call for an image in your HTML, but the image isn't at the specified location, the browser does a few checks to make sure. This slows a page load down a lot, as all the browsers power is transferred to this search. Only once it has confirmed the file is missing can the browser continue the loading of the page. Don't let this happen. Not only is it slow, but a user loses a lot of trust in a site that lets this happen. Use a tool to check your links, and make regular passes over your site.
One thing to remember: when you optimise an image, and cut down its file size, you might think the difference in download speed will be negligible and you shouldn't bother. But then think about this: if you cut 40% off the file size of every image you optimise, you have cut almost 40% off the combined size of your entire page for every reader. That's a lot of extra speed. With the other tricks available in this optimisation section, your whole site will be much faster. Keep the faith.
In practice
All this advice is well and good, but let's see how it influences decisions in real web design situations, shall we?
The Test
Say I asked you to put a picture of the French flag on your page. I would probably get one of these three responses, which one are you?
The amateur
The Internet's equivalent of the 'boy racer', this guy hopes to impress his mates by sticking as many spangles on his page as possible. If you get the chance, please inform him that "it doesn't work that way, little boy".
File size: 15.5kb
The skilled
Nice and simple. A GIF with some anti-aliasing, 100 by 60 pixels and using a palette of 20 or so, with dithering set to full to make up.
File size: 0.75kb
The master
This is the same graphic, cut down to the bare minimum. In fact, it's only 3 pixels by 1 pixel. The rest was done using height and width attributes. It uses only 3 colours, all of them web-safe.
Yes, it doesn't look quite as nice as the flag above, but when you're going for all-out speed, as I explained above, a small sacrifice must be made. Look: [
]
File size: 0.08kb
Needless Disclaimer: Now, in case you think I have some strange affection for France or something, think again. I don't like it very much at all! I offered this example because I was faced with this situation early on in my designing days, and as my proficiency with my image program and my control of HTML grew, I moved through these stages. Except: I was never an amateur.
Also note that because I didn't want my site to slow down too much, these are pretty well optimised anyway.
Logical Optimising
Don't do this! Say you have a line of link buttons. They are all the same apart from the text on them.
I have seen people make each graphic out of three separate images, on the basis that the two side parts will download once, with only the middle bit having to be downloaded for each button.
Bad, bad reasoning. These buttons are small enough for the speed difference to be quite small, and with all the extra HTML you're going to need for this (three times as much!), in the end you'll probably be slowing down your page. Combine these images and you'll be minimising server requests by lots. You've got to think!
