Готовые работы
Полезные ссылки
Контактная информация
Articles about web-design

Optimization in
JPG format

Print this article
Print this article

So, you’ve prepared images for your web pages. But uploading to the server is still early, as was said many time - if loading time of the pages is long, there is no use of them. Let's see optimization in more detail.

The given format stores images with color depth of 24bpp (True Color) and uses compression with loss of information. It hasn't much modes of optimization, more precisely to tell, only one - you can select an optimum compress coefficient.

Your can use image editing software which controls this coefficient of compression. Unfortunately, PhotoShop in it base configuration does not allow us freely to control compression (it offers only some fixed values). Though, you can find plug-in(s) realizing given operation. This compression is not bad realized in such programs like PhotoPaint or PaintShopPro. In these programs you can assign degree of compression by either percentage of losses or value of quality from 0 up to 255.

How to define optimum degree of compression?

For this purpose save an image with a few values of aspect ratio, and then look them closely. A criterion of loss of quality will be “shivering outlines”, most noticeable in contrast places, and emerging of spots in areas with smooth transition of colors (see Figure). Coefficient, for which the distortions are not visible yet, but for the next step become noticeable, will be optimum. The file size for such solution will be minimal without loss of quality.

If such operation to carry out with each photo, it can take too much time. But there is a solution, all photos can be divided on some subtypes (for example, black-and-white images, colorized images, landscapes etc.) and to each subtype you can assign optimal coefficient. Afterwards you can apply earlier found coefficient to all similar image. Two identical photos, but with different JPG compression are shown below. At the left, you see photo written in PhotoShop 5.0 with a degree of compression 3 (not optimized), at the right, photo optimized with the help of Ulead SmartSaverPro. Pay attention to sizes of photos, they differ three times and have almost identical quality.

Not opimized image (14.91KB) Optimized image (4.14KB)

Use of progressive development

There is one more small method of JPG optimization - use of progressive development. It practically has no effect for a size of a photo, but is noticeable at loading. Standard image format output to the screen is carried out by horizontal strips, and up to the complete loading of the image we can not see it. On the contrary, image in a progressive format occurs at once, but in a rough form, and gradually improves in quality. It gives the visitors a possibility first to evaluate and image and decide, whether it is necessary to wait the image or to save time and start looking other stuff. Below you can see two photos one with standard appearance, second with progressive. Look how these two images appear at loading of this page, and everything will become clear for you.

Usual image Progressive development

The progressive development of JPG files is supported by all browsers, but not each graphic software supports this feature. Check whether your programs have this possibility. Latest versions of PhotoShop and PaintShopPro know how to do this.

<< Previous Article | Next Article >>