Compress Your Images Using Photoshop CS4 For Faster Loading WebPages
Image compression is a good way to speed up your webpage’s. I had a page in particular that would get a terrible page speed score. The article called How To Build An Ikea Karlstad Sofabed (with pictures) would take just under 2 seconds to load from a server in Amsterdam, while from a server in New York it would take just over 9 second to download! Through compression and a technique called website sharding i was able to bring these load times down.
If you run your website through any of the speed test websites you will find that most will pick out images on your webpage that are too large in file size, and will recommend that you compress them for faster download times.
How To Compress a JPG Using Photoshop CS4.
To do this in Photoshop CS4 for jpg you need to open the original image and then go to File - Save for Web and Devices
In the top right hand corner (see image below), select JPEG, you then want to adjust the quality of the image, which can be adjusted between 1 and 100. I set my images at around 60 as this appears to be the lowest it will go before the image starts to degrade.
Then you want to check the Progressive box on the left. Saving your files progressively means that as your web page loads the image loads gradually in phases until it is fully complete as in the example below.
How To Compress a PNG Using Photoshop CS4.
You can also decrease the size of png images with Photoshop CS4. Again open the image then select Image - Adjustments - Posterize
Tick the preview box and then adjust the slider to the point just before the image starts to degrade, and then Save for Web and Devices as you would normally.
You could also use TinyPNG, which can reduce the image size even further!
Using these simple technique’s the savings on the overall load time of a webpage are quite considerable depending on how many images you have on that page, and in my opinion is well worth the time and effort. However you can gain even faster times by implementing website sharding which you can read more about here.