To optimize your JPG pictures, there is a very important thing you have to understand : visitors are not watching your website like you do. JPG best results usage are done with compromises between quality and space.
The output JPG file size can be affected by :
Do not conserve the original size of your pictures, particulary when JPG is from a high camera definition. Do NOT use HTML to resize your pictures with width and height, always write the true definition.
|
|
| Definition : 1500 x 1000 | Definition : 500 x 333 |
| HTML Resize on the fly | Sofware Resize |
| 386 834 Bytes | 76 563 Bytes |
A simple rule : if you want to save maximum quality, choose 95. For most common usage, find a quality compromise between 95 and 85 (90 is often a good choice). For Web optimization, try to choose 80 or 75.
|
 |
| Quality 100 | Quality 80 |
| 76 563 Bytes | 24 067 Bytes |
Some software results can be improved by optimizing the huffman tables (compression code).
|
 |
| Not Optimized | Optimized |
| 24 067 Bytes | 22 228 Bytes |
In JPG specs, there are two ColorType : TrueColor or GrayScale. Choosing the good ColorType can let you to optimize your JPG further. For Graylevel images (which always have 256 colors maximum), choose GrayScale. For all others cases, choose TrueColor.
|
 |
| TrueColor | GrayScale |
| 22 228 Bytes | 20 414 Bytes |
Unlike PNG, progressive displays in JPG can improve the compression. You have to test if the progressive display is interesting for each file.
|
 |
| Not Progressive | Progressive |
| 20 414 Bytes | 20 317 Bytes |
What's not displayed can be deleted. That's the case of Thumbmails, comments, exif, jfif header, software tags and XMP data.
|
 |
| Contains Extra Bytes | Cleaned |
| 20 317 Bytes | 12 255 Bytes |
Human eyes can be focalised to increase image compression, by decreasing the quality of some images area. First step in the process, find a good focalisation point. In this example, focalisation points are mines of pen.
|
 |
| Not Focalised | Focalised (give better quality impressions) |
Step two, get advantage from focalisation, and compress area which are not really watched.
 |
 |
| In red, high compressed area | Focalised and area compressed |
Visitors scan your website. If you ask someone to do a quick quality comparative test between those two images, most of the time, the compressed one is choosen, thanks to the focalisation.
|
|
| 386 834 Bytes | 8 262 Bytes |
| 97,86 % SAVED (378 572 Bytes) | |
PNG don't like artifacts. That's why if you want to convert your JPEG files to PNG, you've to delete them. To do that, on very simple image (understand on images which don't have a lot of colors), you can use this method, consisting to reduce artifacts by reducing the number of colors.
This other method is talking about image filtering, by reducing noise. ScriptRST can do that very easily, by dropping your pictures on the ScriptRST file. It runs that process automatically, and give a new output file.
 |
 |
| Input, Quality 50 | Output, Quality 80 |
| Lot of artifacts | Filter Noise reduce artifacts |
| 4637 Bytes | 6178 Bytes |
As you can see, the output image seems to be less damaged
than the original. The output file should be choosen for PNG conversion, because it contains less artifacts than original, and even if JPG quality is superior, PNG size will be inferior.
 |
 |
| PNG8 from Original JPG | PNG8 from Output JPG, with filter noise |
| Optimization Max 5 | Optimization Max 5 |
| 14015 Bytes | 13079 Bytes |
PNG conversion, PNG8 quantization or Optimization Max 5 are performed by ScriptPNG.