Because loading speed of web pages is a very important factor in SEO and ranking, I will show you in this tutorial how to optimize images using Photoshop save for web option and compare the results side by side to check each image size.
We will start with a full png picture with no changes in quality or colors, and we will try to compress the image as much as we can with Photoshop save for web option, without dropping the quality of the picture too much, using three different extension types (jpg, png and gif).
To use the Photoshop save for web feature go to File - Save for Web or press CTRL+ALT+SHIFT+S. I used Photoshop CS6 for this tutorial. Now a window should appear to do the settings for your image.
In the right corner, you can select the type of your image (jpg, png or gif) together with the quality and extra options to your image (progressive download in multiple passes, optimized, transparent and others depending on the extension type). Check the image below:
Below we will compare the original image (png-24 format @ 573 kb) with different extensions types and quality to increase the loading speed of your web page.
In PNG-8 format there are 3 important color reduction algorithms that you should know about (Perceptual, Selective and Adaptive). Adaptive option has a slightly better quality, but with the cost of a few kilobytes.
Also there is a Dither algorithm with 3 types (Diffusion, Pattern and Noise). Using 100% Diffusion Dither will increase your image quality, but again with the cost of some kilos. My advice is to use these settings if you want a good quality (almost like original) with a smaller size.
Sometimes jpeg images are smaller than png, usually when you have a picture with a lot of colors and details, so make sure to use Photoshop save for web to compress your image in jpeg with high quality between 75-80% (79 is the best value) and progressive option (means that your image will be download in multiple passes).
This gif extension type is not that great when it comes to pictures with a lot of colors. You won't save any kilobytes better than jpeg extension, even with Adaptive Mode and Dither Diffusion at 50%. The quality is also weaker.
Below you can see a comparison of all 3 types, including file size. The winner is JPEG in fully colored pictures.
There are few things you need to know when it comes to images. If you have a picture (with a landscapes for example) it has a lot of colors and the smallest size will be for jpeg type.
If you have an image with some text and one background color, use PNG-8. It has a great impact on file size when picture does not contain a lot of colors.
You can download the sample images above and analyze them. If you know better settings in Photoshop save for web feature, to create smaller images, drop a comment in the comments section. Find more details about optimizing images here on Adobe's websites.
If this tutorial was useful, you can help me maintain this website with more tutorials by buying me a coffe (or at least the sugar).