What-Why-How to Optimize Images for Website?
Image optimizing is one of the must know skill as professional web designer. In the following, you will find out what do it mean, why it is important and how to optimize images in Photoshop:
What optimizing images means?
Almost all website and weblog use image as background, button, logo, icons, and so on. Some use few and some use many. Optimize images simply mean that make image size become smaller and the quality of the image is still good. Quality of image may be lower if you over optimize.
Let me show you an example:
| Not Optimize (44KB) | Optimized (14KB) |
 |
 |
There are two images in following; one is optimized image and another one is not optimized. As you can see the quality of image is the same, but the size is much difference.
Why do I need to optimize image?
It is simple. The more optimize image, the faster web page can load. You also can save storage and bandwidth space for your hosting. As you can see the above comparison, after optimize I can save 44 – 14 = 30KB. This is only one image; imagine if I use 10 similar size images on my website, I would save around 300KB per page, when it load one time.
How to Optimize Image for Website?
It is simple if you are using Adobe Photoshop. Let see the following step by step instructions:
I assume that you are opening the image you want to optimize.
1. Go to File menu
2. Choose Save for Web & Devices
3. Then, the Save for Web & Devices window will open
4. Choosing file format (GIF, JPEG, PND and…) as you prefer. See the following picture. (Remember difference picture, may optimize well at different file format, sometime GIF, or JPEG or PND. One way to find is trying). You also can adjust some setting like quality, color.
5. After you completed setting, then click Save button
6. Then, Save Optimize window will open, find where you want to store the image and put name of your image, then click Save button.
