Personal tools
You are here: Home → presentations → for lazy ones → the web standarts → level II images → image optimization
« February 2012 »
February
MoTuWeThFrSaSu
12345
6789101112
13141516171819
20212223242526
272829
 

image optimization

Images used for web pages should be optimized and transformed into either JPEG or GIF files.

The aim of this optimization process is to produce good looking images with the lowest possible download time (people don't like to wait for the graphics to load). That means web images should have the smallest possible size without loss of quality.

The first step is to define an image matrix size adapted to the file as shown before.
Then either GIF or JPEG must be chosen depending on the type of images showed before.
Then you will have to set the optimization parameters. The JPEG or GIF image formats have optimization settings that have to be defined when images are encoded.

These optimization settings are

For JPEG

  • the compression level or its contrary image quality can be set from 0 to 100%
  • the smoothing level: can be set from 0 to 100%

For GIF

  • The color palette type (grey scale or color, web, web adaptive, exact)
  • The number of colors 4 to 256
  • Other characteristics specific to GIF relate to transparency
     

The file size of the outcome image depends on these optimization settings.  Higher JPEG compression levels allow shorter files. Lower numbers of colors in GIF allows shorter files.  On the other hand these parameters decrease image quality. The image quality can be restored by using higher smoothing levels in JPEG files and adapted or grey-scaled color palettes in GIF files but these compensation methods are limited.

Usually the best settings are 80 to 90 % quality compression level with 0% to 20 % smoothing for JPEG images.  For GIF images these settings are highly dependent of the number of colors needed by the image.  Only images with low color depth should be encoded as GIF files, thus permitting to use only a few colors for encoding without loss of quality.

 

Conclusion

 

The best setting for publishing JPEG images on the web are

  • 80 to 90 % quality level compression
  • 0% to 20 % smoothing

 

Figure 6a. JPEG photo, vertebroplasty, 24bits colors, quality 80%, smoothing 0%, size 22.51k, load time 7 sec at 28.8kbps(kilobytes per second ).  There is no loss in image quality (to the human eye) compared with original uncompressed tiff. This image can be used for web publishing, can we reduce image size? See below.

 

Figure 6b. JPEG photo, quality 50%, smoothing 40%, size 8.48k, load time 2 sec. at 28.8kbps (kilobytes per second ). Image quality is near original uncompressed tiff, there is a discrete alteration of the image. This image can be used for web publishing but not anymore for an image database, can we reduce image size? See below.

 

Figure 6c. JPEG same photo, quality 20%, smoothing 80%, size 2.84k, load time below 1 sec at 28.8kbps(kilobytes per second ).  Image quality is very poor. This image is not anymore adapted for publishing. Marked block-shape effect and Gibb's effect occur.

 

Figure 6e. GIF logo, 64 colors size 5.76k, load time1sec at 28.8kbps(kilobytes per second ).  This image has a good quality. However image size could be reduced by reducing the color depth.

 

Figure 6f. GIF logo, 16 colors, size 3.44k, load time 1sec at 28.8kbps(kilobytes per second ).  This image is a good compromise for web publishing. Can we reduce more the color depth ? See below.

 

Figure 6g. GIF logo, 4 colors, size 1.55k, load time below 1sec at 28.8kbps(kilobytes per second ). This image is not anymore adapted for web publishing. Reducing the color depth reduced significantly image quality.

Figure 6h. Bmp uncompressed

Bmp uncompressed CT image of lung biopsy. Color depth 8 bits, size 391.40 k Load time 122 sec at 28.8kbps (kilobytes per second ). This image is not adapted for web publishing because of its huge size.

 

Figure 6i. Same image as above in JEPG. 24 bit colors, quality100%, smoothing 0%, image size 67.2k, load time 19sec at 28.8kbps (kilobytes per second ). This image is more adapted for web publishing, because of its reduced size. There no loss in image quality (for the human eye) compared with original uncompressed tiff. Can we reduce image size? See below.

 

Figure 6j. Same image as above in JEPG. 24 bit colors, quality 80%, smoothing 2%, image size 15.97k, load time 4sec at 28.8kbps (kilobytes per second ). This image is perfectly adapted for web publishing, because of its reduced size. There no loss in image quality (for the human eye) compared with original uncompressed tiff. Can we reduce image size? See below.

 

Figure 6k. Same image as above in JEPG. 24 bit colors, quality 50%, smoothing 2%, image size 7.19k, load time 2sec at 28.8kbps (kilobytes per second ). This image is still adapted for web publishing, because of its reduced size. However there is a discrete loss in image quality compared with original uncompressed tiff. This image can therefore not anymore serve for an image database or for storage. Can we reduce image size? See below.

 

Figure 6l. Same image as above in JEPG. 24 bit colors, quality 20%, smoothing 100%, image size 3.49k, load time 1sec at 28.8kbps (kilobytes per second ). This image not anymore adapted for web publishing, because of its quality. There is an important loss in image quality compared with original uncompressed tiff. Marked block-shape effect and Gibb's effect occur.

Document Actions