Several weeks ago I wrote about raster graphics file formats used on Web. Today I read an article by Susie Sahim about optimizing such files.
The basic things to do are:
- crop out blank margins – the video by Sahim shows how to do it ‘by hand’ in a proprietary image editor; the GIMP has special functions to do it automatically
- use appropriate file format
Usually only three file formats are available for graphics on the Web – GIF, PNG and JPEG. The article states that JPEG should be used for photos and colourful artwork; it does not explain that the lossy compression of this format has negative influence on image quality least visible in these types of artwork.
The article recommends using GIF or PNG images with small number of different colours. Maybe the software used in the video does not have this problem, but most programs which I use make large PNG files. This can be solved by processing them by OptiPNG. OptiPNG does this more slowly than program producing highly unoptimal PNGs, but more time will be saved on transfer of the file. This program also selects optimal colour space and converts similar file formats to PNG.
I don’t use GIFs, but in some cases they are smaller than PNGs produced from them by OptiPNG. The only cases in which I’ve observed this are icons; maybe it is better to put many icons in one file and select then by CSS property background-position?
