HTML and CSS   XSLT   JavaScript   Images   Soft   Etc  
Sergei Chikuyonok

JPEG optimization. Part 1 6 March 2005


Many believe that optimization of JPEG format means just matching quality and size of a file, or, in more complicated cases, a selective compression. There are many programs that allow you to downsize images in a single operation. But you shouldn’t think that such a magic wand would give you the result as magically good. It’s a better idea to study how files are saved in JPEG format, and then find a simple and effective way to make excellent smaller file size images. For example, you can align rectangular objects with the eight-pixel grid.

Here is an example:


32×32, Quality: 10 (Photoshop), 396 bytes

Although Quality is set low, the upper square is nice and clean, while the lower one is fuzzy


Both white square are of the same size which is 8×8 pixels. The first one is aligned with the grid, whereas the second one is 2 pixels off to the right and to the bottom.

Housekeeping tip

When saved, the image is divided into blocks 8×8 pixels, and optimization takes place in each of them. As the lower square does not match the grid cell, the optimizer looks for color indexes averaged between black and white (in JPEG each 8×8 block is encoded as sine waves). This explains the fuzz.


Lets see how the position of rectangular objects affects file size and quality. In the first example the oven is placed at random. Before saving the second file, I aligned the image with the eight-pixel grid. Quality settings are equal for both (55):


13,51 Kb

12,65 Kb

And here is a zoom-in (red lines mark the grid):


To be continued.


Order a design...