How to Use Corel PhotoPaint 8 to Make Web-Friendly GIF & JPEG Images

Web Works Part 4 - JPEGs 2

How to Get the JPEG Results You Want.
The final result in terms of both the image quality and the image file size will depend entirely on the type of image being saved and also your requirements for the image.

 

Zoom in preview: To carefully see the fine changes occurring on the image at various compression and smoothing settings, click the Original pane with the left mouse button several times. This magnifies the image substantially. Also, right click in the Original pane to zoom out when you need to see the entire image.
 
Panning in the preview. When the preview image has been zoomed in, use the hand cursor in the Original page with the left mouse button to drag the image around so you see an area with considerable contrast.
 
Use a contrasting region to observe JPEG settings. You can better observe the effects of different compression and smoothing settings if you view a contrasting region when zoomed in.
 

Over-compression. As you alter the compression settings, notice the degree of image 'fracture' or breakdown which occurs in the Result pane (Figure 4). Check the same result at the original magnification (right click in the Original pane several times to zoom out). Note also the resultant final file size as you select different settings.
 

Don't over-smooth images containing small text. When small text appears in JPEGs, too much smoothing can cause the text to blue and be difficult to read (Figure 5).
 

Figure 4:
Over-compression causing fracturing of the image.

Figure 5:
Over-smoothing of images containing small text.

 

 

 

 

The final result
The final result will depend on what you want to do with the image (and partly on specific features of the image, described below).

If the image is to be seen clearly in the foreground or if it contains small text, don't compress it too far or use too much smoothing which will make the image appear blurred.

However, if the image is to be used as a background, a smooth, slightly blurred or distorted image is often quite effective or desired as it will not interfere with body text or other foreground objects on your web page. For instance, I have use the image in Figure 6 as a Web page background. The original JPEG image is 800x516 pixels in size and yet is only 9.48KB (slightly reduced on this page) and allows the foreground text and graphics to be clearly seen.

Figure 6. An ideal blurred background JPEG image.


This image is a reduced version of the original to suite this page.
It is 600 x 387 pixels in size and yet is only 7KB..

The original image was 800 x 516 pixels, 9.48 KB.

 

 

JPEG compression
It is of interest to note that even at 0% compression levels, JPEG images still achieve a considerable reduction in image file size simply due to the base encoding method. Some images don't look good even at very low settings, particularly if the image was a compressed JPEG before further manipulation (Figure 7), while others appear as the original at even 50 or even 70 % compression or higher.


 

Figure 7.
This image was originally a JPEG with unknown compression. After adding text and some effects, the image cannot be compressed further very much without considerable distortion (25% compression after re-editing).

 

 

 

 

 

A note of caution.
JPEG compression can actually change the value of the colours in the final displayed image (see the entry for JPEG in the Glossary) and will affect the ability of one image to blend into another.

Pseudo-transparency Sometimes you may require a JPEG image to blend 'transparently' with the background colour of your web page. You will therefore need to create or alter the image to have the same background or edge colour as your web page. If you need the image to retain the same colour background as your web page, don't over-compress it. Too much compression will cause the image background to vary from the original background colour and the image will not blend correctly. Of course JPEG images can never have true transparency characteristics and this pseudo transparency effect will usually fail when using textured backgrounds. You will need to use a GIF image for this.