One of the concern these days for “Pics” is its image quality and size when uploading them to web. Obviously we all need and buy camera which gives best quality within our budget constraints. Most of the digital cameras these days are quite cheap now and provide good quality for the money. Of what I know .. 8-16 MegaPixel cameras are quite common these days and most of us already know that as Megapixels of a camera increases the size of the image in terms of the resolution while in terms storage space it does not increase much because cameras these days are getting smarter to support fair amount of JPEG compression while taking shots. These “sizes” of the images are just too big for the web and if its like 3 to 8MB+ its gonna take a good amount of time to download it and if there are more images then that adds up to a good amount of download time. We also cant assume every one having 2mbps+ connection speeds .. like say if you wanna send some of your birthday pics to you cousins email and if your cousin doesn’t have a decent connection speed then its gonna take a very long for him to download and even worse if he uses MB based internet plans. Also for many other reasons too the RAW images from the cameras must be compressed in terms of both resolution and size without visible loss in images. This is possible because images tend to have certain types of redundancies i.e duplicated/repetitive information. Removal or encoding of these redundancies can lead to following types of compression :
- Lossless compression : Here the information, as present in original images, is kept intact and the original image can be reconstructed “as it is” after decompression.
- Lossy Compression : Here some of the information present in original image is permanently lost and the decompressed(reconstructed) image is a close approximation of the original image.
As suggested in literature there are 3 basic types of redundancies in Images:
- Phsycovisual Redundancy
- Coding Redundancy
- Interpixel Redundancy
Now, Lets go through each of the redundancy mentioned above.
Phsycovisual Redundancy:
Achieving very good compression ratios for Natural Images is possible because these type images contain a very good amount of phsycovisiual redundancies i.e information in the images to which our eyes are least sensitive which simply means that information of this sort can be simply removed from the images and we would’nt notice it 99% of the time .. unless we zoom too much. In this the following fact is exploited : Human eye is less sensitive to higher frequencies and more sensitive to lower frequencies in the visual spectrum.
Coding Redundancy:
In all of the images we can group pixels as per their intensities or gray-levels. Certain type of intensities are more frequent than others or simply certain pixel colors are more than others and can be grouped to encode this repetition in a way in which – the pixels which occur more are assigned shorter codewords and those which occur less frequently code words are bigger. The entire images is represented using these codewords. Obviously since we have grouped the pixels the space required to represent a codeword will be much less than the individual pixels. Since here we encode the repetitive information , none of the information is permanently lost which leads to lossless compression of images but the compression ratio is not good many times but is indeed acceptable.Example of this is the famous Huffman coding , Arithmetic coding etc.
Interpixel Redundancy:
This redundancy exists for the fact that adjacent pixels are correlated; which is to say that adjacent pixels have similar intensities (most of the times) and hence we can predict the intensity of a pixel from its neighbors. Usually Image is transformed into frequency domain from spatial domain to remove Interpixel Redundancies. Examples are the famous Fourier-Transform , Discrete cosine Transform (DCT) used in JPEG , Walsh-Hadamard Transform , etc.. Out of these DCT is a better option and is used as a standard for achieving Lossy Image compression in JPEG Compression technique. DCT is lossy because after transforming the Image to frequency domain the values High Frequency components are rounded-off which results in a permanent loss of information.
Widely used Image File Formats on Internet:
Some of the Most widely used File Format on web are :
1. JPG (JPEG – Joint Photographic Experts Group)
2. PNG (Portable Network Graphics)
3. GIF (Graphics Interchange FileFormat originally developed by CompuServe)
I generally use JPG for Images taken using a Camera since it gives best results for such kind of Images.
The storage space required for Images can be reduced by :
- 1. Reducing resolution of the image
- 2. Converting to a suitable fileformat (lossy/lossless)
- 3. Encoding the image information (lossless)
- 4. Reducing the image quality (lossy) like reducing the color space and some other techiques as well..
We shall use a combination of methods as mentioned above. Now lets actually see how do we compress(permanently hence lossy) the image till a point where its easy to exchange images on Internet.The software that I frequently use for processing Raw Camera Images is IrfanView which is free to use.
Cameras and Images used for this Guide :
1. Olympus FE-170 6 Megapixel Camera :
Images -> olympus_1.jpg to olympus_6.jpg
2. Canon EOS 1000D 10.1 Megapixel Camera :
Images -> canon_1.jpg to canon_3.jpg
3. Nokia N73 ME 3.2 Megapixel :
Images -> n73_1.jpg to n73_2.jpg
4. Fujifilm FinePix HS20EXR 16 Megapixel Camera :
Images -> fujifilm_1.jpg to fujifilm_3.jpg
How do I download Original Images ? (Links below)
1. Links to Original Images taken from Olympus FE-170 :
Olympus_6Mpix_1.rar
Olympus_6Mpix_2.rar
2. Link to Original Images taken from Canon EOS 1000D :
Canon_EOS_1000D.rar
3. Link to Original Images taken using Nokia n73 :
Nokia_N73_ME_3.2Mpix.rar
4. Link to Original Images taken using Fujifilm FinePix HS20EXR :
Fujifilm_FinePix_HS20EXR_16Mpix.rar
How do I download Processed Images ?
1. To download the processed Images as done in PART I and PART II of this guide just click on the Image(Thumbnail) shown.
2. To download the Thumbnails as generated in PART III Right-Click on the any thumbnail in PART I or II and Save it as Image – since Thumbnails are used Inline in this Guide(Post). Clicking on the thumbnails will lead you to the corresponding processed file in PART I or II. The thumbnails used in this guide were generated with the same method as mentioned in PART III.
My Assumption : I assume you will be using this Guide to optimize Images taken from Camera/Mobile and not computer generated images (CGIs) .. though this guide is fairly applicable for CGIs as well.
Compression Ratio Basics:
Of what I’ve studied in Literature there can be 2 possible methods to calculate Compression Ratios.
[Lower Values mean Higher/Better Compression]
Method 2:
[Higher Values mean Higher/Better Compression]
PART I : Reducing File Size
Here we’ll see how to Convert images to JPG and reduce the image quality without reducing the “Visible” Image quality. We will convert images in any file format to JPG (even JPG to JPG) and reduce its file size by reducing the Image Quality level.
- Step 1 : Open IrfanView
- Step 2 : Select File-> Batch Conversion/Rename : A popup window will appear.
- Step 3 : On the Left side of the Popup you can select and add files to be converted.
- Step 4 : Now , on the right.. Under the “Work as” field : Select “Batch Conversion”
- Step 5 : Under “Batch Conversion settings” field : Select “JPG -JPG/JPEG Format” as output file format.
- Step 6 : Now Click Option on the left of File Format selection dropdown and one more popup will appear. Make sure you select the settings as shown in the screenshot below. In my experience the Value for “Save Quality” is optimum between 35 to 50 without inducing and visible quality loss in processed Images. Lower the Value higher will be the compression.Click OK.
- Step 7 : Set your output Path under the field named “Ouput Directory for result files”
- Step 8 : Click “Start Batch” and you are done!
Results :
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
| Camera | Image Name | Original File size |
Processed File size |
Compression Ratio* |
| Olympus FE-170 | olympus_1.jpg | 4.23 MB | 450 KB | 89.6% |
| “ | olympus_2.jpg | 4.18 MB | 184 KB | 95.7% |
| “ | olympus_3.jpg | 4.84 MB | 298 KB | 93.9% |
| “ | olympus_4.jpg | 3.90 MB | 412 KB | 89.7% |
| “ | olympus_5.jpg | 4.12MB | 377 KB | 91% |
| Canon EOS 1000D | canon_1.jpg | 3.37 MB | 382 KB | 88.9% |
| “ | canon_2.jpg | 3.31 MB | 325 KB | 90.4% | “ | canon_3.jpg | 3.11 MB | 333 KB | 89.4% |
| Nokia N73 | n73_1.jpg | 743 KB | 214 KB | 71.2% |
| “ | n73_2.jpg | 687 KB | 195 KB | 71.6% |
| “ | n73_3.jpg | 588 KB | 155 KB | 73.6% |
| Fujifilm FinePix HS20EXR | fujifilm_1.jpg | 3.51 MB | 483 KB | 86.5% |
| “ | fujifilm_2.jpg | 2.98 MB | 239 KB | 92.2% |
| “ | fujifilm_3.jpg | 3.55 MB | 663 KB | 81.8% |
PART II : Optimizing Image Resolution and Quality
Generally Image Resolution (i.e Image Width x Height) from cameras with Mpix >= 6/5 is Uber High! The width is around 2500 to 4000 pixels and height around 1800 to 2600 Pixels. Now to view the Images in its actual resolution you will probably required Monitors having native resolution > 30/32 Inches! But this is not the reality since the most widely used Monitor sizes as of now is 18″ to 24″. Hence its quite obvious to reduce the Image’s Resolution down to around 20″ i.e around 1024 to 1400 pixels wide.
- Steps 1 to 6 are same as done in PART I.
- Step 7 : Under the “Options” click button named “Advanced” : A new window will popup.
- Step 8 : Under “RESIZE” field select “Set new size” and under that select 1st option called “Set one or both sides to” and the New Width of your choice. I recommend value between 1000 to 1500 Pixels. Leave the Height BLANK. You Can also set the New Size(WxH) as a percentage of the Original Size. You can play with this option Later.
- Step 9 : Now , Under Resize field check the 1st two checkboxes. “Preserve aspect ratio will lock it the aspect ratio as per the Original Image.”Use Resample function” will avoid Image distortion when down scaling. In short , Make sure you use the settings as shown below:
- Step 10 : Leave other settings as they were and click OK.
- Step 11 : Now click “Start Batch and you’re done!
Results :
 |
 |
 |
 |
 |
 |
 |
 |
|
|
 |
 |
 |
 |
 |
| Camera | Image Name | Original File size |
Processed File size |
Compression Ratio* |
| Olympus FE-170 | olympus_1.jpg | 4.23 MB | 195 KB | 89.6% |
| “ | olympus_2.jpg | 4.18 MB | 91 KB | 97.9% |
| “ | olympus_3.jpg | 4.84 MB | 134 KB | 97.1% |
| “ | olympus_4.jpg | 3.90 MB | 149 KB | 96.2% |
| “ | olympus_5.jpg | 4.12MB | 155 KB | 96.3% |
| Canon EOS 1000D | canon_1.jpg | 3.37 MB | 111 KB | 96.7% |
| “ | canon_2.jpg | 3.31 MB | 95 KB | 97.1% | “ | canon_3.jpg | 3.11 MB | 86 KB | 97.2% |
| Nokia N73 | n73_1.jpg | 743 KB | 147 KB | 80.2% |
| “ | n73_2.jpg | 687 KB | 136 KB | 80.2% |
| “ | n73_3.jpg | 588 KB | 114 KB | 75.5% |
| Fujifilm FinePix HS20EXR | fujifilm_1.jpg | 3.51 MB | 97KB | 97.3% |
| “ | fujifilm_2.jpg | 2.98 MB | 38 KB | 97.7% |
| “ | fujifilm_3.jpg | 3.55 MB | 128 KB | 96.4% |
PART III : Generating Optimum Thumbnails
As you might be knowing “Thumbnails” are basically preview versions of Images. Width is usually between 100 to 500 pixels. But since the resolution is very small as compared to original Image the redundancies are also reduced and hence trying to remove Inter-Pixel redundancy using DCT i.e JPEG there will be a good amount of visible quality loss.
The Process is Basically Same as that shown in PART I & II but with different values for Image Quality and Image size.
- Steps 1 to 5 are exactly same as PART I.
- Step 6 : Same as that in PART I except set the “Image Quality” level to 90 or 95.
- Steps 7 & 8 are same as in PART II except you need to use a lower value for the width of the thumbnail say like 350 px.(Generally in between 100 ~ 500 Pixels wide).
- Steps 8 to 11 are same as shown in 2nd PART.
Results :
For Thumbnails of width 350 pixels the average was around 30~40KB and also maintaining a decent amount quality. The thumbnails are the same as shown in PART I and II.
Finally I’d Like to give credits to 2 of my friends for providing me with some of the Images that I’ve used in this Guide.
2. Fujifilm FinePix HS20EXR (fujifilm_1/2/3.jpg) : Clicked by Sumon Pathak on his Camera and featuring p8z77-v Deluxe Motherboard which we recently reviewed.
3. Olympus FE-170 & Nokia N73 ME (Rest Images) : Clicked by me using my Old camera & Mobile. Featuring Gigabyte 880GM-USB3L Motherboard which I recently reviewed , my main RIG PSU Corsair HX850W , my Download RIG PSU Corsair CX430W and my Hexapod!(Now it walks too! More about it in other post).
That’s it Folks! Hope this guide helps many of us! 😀