Compressing Pictures For The Web
Tuesday, December 2, 2008
Hello there again.
This time, I shall teach you how to compress you images for the web, also known as Graphic Optimization.
Why compress your images?? :
- So they can load faster.
- There are still some people using 56kpbs modems or phonelines out there for the internet.
- Even if you do not consider the above, due to the huge masses that have high speed internet access nowadays, do note that there is also a huge number of people who are using wireless networks that... may not be so fast as cables.
- Not every server and host out there has unlimited upload and download limits. Bigger file size mean the limits are reached faster.
So, how much can you compress?:
- The page background of this blog is actually a very huge gradient fill with a shadow outline in the middle. It's huge enough to fill most of largest screens today.
- If the backgound is saved in .bmp format, it will take up a whole 6 MegaBytes (6,000,000 bytes), which will take about five minutes to download for a high speed cable.
- If it is saved in .jpg at full quality. It will take up 70 kilobytes (70,000bytes)
- If it is saved in .png, with optimizations, it will take up only 10 kilobytes.
That is 600 times much lesser than an uncompressed bmp.
But compressing will reduce quality! :
- Well, its true. Higher quality images are more detailed, which requires more bytes to store those details.
- But with a little adjustments, you can actually compress your images without any loss!!!
- Many internet users and graphic designers often have nice images, but they often compress them wrongly, resulting in a beautiful artwork being ruined.
Step 1: Identify the type of image.
Different types require different compression methods!
I would classify most images seen in websites into two main types.
1. Scenery/General Pictures
These type of images usually require .jpg compression.
2. Web design elements (text in images, web backgrounds, simple logos)
These type of images usually require .png compression.
And, never save web images in .bmp. It's unreasonably large, and .png does the exact same full quality with a fraction of the size.
Step2: Compressing
The two main formats for web are .jpg and .png. I won't touch on .gif in this tutorial, as it is mainly for animated images and cant be compressed much.
Both formats compresses the images to a rather similar small file size, but the compression methods are different in their own ways.
.jpg Compression:
A thing about jpg compression is that it makes ugly "jpg artifacts " See those fuzzy stuff around the jpeg words in the image? But don't worry, these "artifacts" will only be obvious in images with very precise edges, like text and shapes. They are usually too subtle to be noticed in scenery images.
To compress a jpg in Paint Shop Pro, in the Saving window, click on "Options" and click on "Run Optimizer".
The instructions there explain the controls. After adjusting the quality to hit a balance between image quality and file size, you may want to change the loading format of the jpg. Go to "Format" and choose either "progressive" or "standard". Sometimes, either one may have smaller file size than the other.
.png Compression:
png compression is a bit different from jpg. Jpg compresses images at full color quality, but fuzzy edges. On the other hand, .png compresses images with full quality edges, but you can adjust the number of colors to make the file size really really small.
Lets take the blogger logo as an example.
You can notice that it has very few colors, but very clean edges. We won't want to destroy these clean edges with .jpg compression. So, we save it as .png format.
If we save it as .png with the default settings, it will be a very small 5.5 kb.
Actually, you can still reduce the size further.
Click on the "Pallete-Based" instead of the "24 bit" option. Then, drag the number of colors as low as possible till you notice any color loss. Since this image has only a few colors, the number of colors can be reduced to as low as 17.
This color reduction trick has reduced the file size further to a stunningly low 2.8 kilobytes!
Yet, the loss in color is too little to be detected by the naked eye.
I hope I've given you a clearer view on image optimization for the web. May you enjoy the benefits of high quality images at smaller sizes. =)
Labels: Graphic Tutorials, Web Design
<< Home