| Optimising Web Graphics with PSP 7.0 | ||||||||||
|
Before thinking about optimising web graphics it is worth taking a moment to discuss what we mean by web graphics. Almost all graphics on the Internet are either JPEG or GIF format. As with most Internet 'technologies' this is primarily dictated by the portability between browser clients. Other graphic formats, such as PNG (Portable Network Graphics), exist but are not widely supported. JPEG and GIF are the commonly accepted standards. JPEG (Joint Photographic Experts Group) As its name implies the JPEG format can support images with millions of colours, such as photographs, and is what is known as a 'lossy' format. This means that some data is lost during the compression of a graphic. Subsequently, the overall image will degrade as the compression increases. More about this later. JPEG's can also be saved using a 'Progressive' option. Progressive JPEG's support interlacing. This is the way in which an image loads. An interlaced image starts looking 'blocky' and then as the download progresses it becomes more and more defined until the download is complete and the image is completely 'focused'. Some older versions of browsers do not support Progressive JPEG's.  Figure 1 - PSP7 Save Options for a JPEG image GIF (Graphics Interchange Format) GIF format images support 256 colours and are lossless. This means that the image does not degrade when it is compressed. Generally speaking, GIF images are small and support features such as animation, transparency and interlacing (explained above). These features are divided between two versions of the GIF format. GIF87a supports transparency and interlacing and GIF89a supports transparency, interlacing and animation. The major browsers all support both of these formats. Interlaced files are usually slightly larger than their non-interlaced counterparts. Animated GIF's are beyond the scope of this tutorial.  Figure 2 - PSP7 Save Options for a GIF image Transparent GIF's Everyone knows that images have to be rectangular (or square), right? Transparent GIF's enable us to provide the illusion of images that are anything but square (or rectangular). A detailed study of transparent GIF's is beyond the scope of this tutorial, but suffice to say that a transparent GIF is still really a rectangle (yes, or square) with a portion 'masked out' to allow any background colour or image to show through.
That's all very well, but what does it actually all mean? Well, it means that you can draw on general rules for when to use JPEG images and when to use GIF's. Ideally, you should use JPEG's for:
Why optimise? The short answer is; speed. In fact, so is the long answer! Even though the advent of cable modems and broad-band internet connections is sky-rocketing, and will continue to do so for quite some time, we must remember that it is often worth planning for the worst case. Or in terms of speed, the slowest case. We want our web site to be available to the widest possible audience. And we want it to be an enjoyable experience that won't be marred by the endless wait for graphics to download. Right? But the good news is... Actually, that was the good news. Optimising our graphics does not mean we have to compromise on the quality. Remember, JPEG images can show millions of colours, and how many colours can the human eye differentiate? No idea? Well, me neither. But it's not that many! JPEG Compression
In the above example you can see the huge variation between compression, the resulting file size, and, of course, the quality (or not, in the case of Figure 4.4). Particularly look at the Figures 4.1 and 4.2. With only 20% compression you are reducing the file size to 29% of the original without a great deal of degradation in the quality of the image. So, if you had twenty images of roughly the same dimensions as Figure 4 on one page, setting 1% compression would give a total download size of 910Kb or with 20% compression, 268Kb. On a 56K modem with a perfect connection (some hope!) that's the difference between 40 seconds and 2 minutes 13 seconds. Now we can start to see how important compressing our JPEG images can be in the overall load times of our web pages. To change the compression settings for your images in PSP 7 click on the 'File | Save Copy As...' menu items, change the 'Save as type' to JPEG, and then click the 'Options' button. The screen as show in Figure 5 will appear. Simply move the slider to change the %age of compression to be applied to your image before saving. Click 'Ok' and then save your image. This change will not be reflected on the open image in PSP so you will need to close and then re-open the image. CAUTION: Note that above we are saving a COPY of your image. Be careful if you are overwriting your original image. Figure 5 - PSP JPEG Save Options showing the compression slider Now we have explored the theory behind compressing your images, there are two nice features available in PSP 7 that allow you to not only compress your images but also see the results before you actually compress them. PSP 7 includes a 'JPEG Optimizer' and a 'GIF Optimizer'. Both of these can be found under the 'File | Export...' menu items. I don't want to go into the details of each of these since this information can be found in the PSP Help File. And finally, for the more advanced... A little known fact about JPEG's is that they support variable compression. That means you can apply different levels of compression to different parts of your image in eight pixel squares. For instance, if you have a picture with a fairly plain background you can compress it to a higher degree than, say, some details in the foreground or perhaps some text. In this way you can really tailor every single one of your graphics for the absolute optimum file size. Sadly, this feature is not available in PSP 7. For this, I would recommend 'JPEG Optimizer' by XAT.COM. Full details of this great product can be found at their web site: http://www.xat.com. |
||||||||||
