Optimizing Image Size for Your Website30 Nov 2016
Visitors to your website are more likely to stick around and not abandon your website if the page is quick to load. Google has a whole host of information about this. There is typically no single solution that would speed a page load up on a website; instead, there are many small optimisations that can be done each shaving a few fractions of a second off of the page load.
While working on page speed today on my iOS tutorial blog to see if I could cut down the overall file size of all images. On that blog there’s roughly 150Mb of images and zip files in the wp-content folder. The majority of that is images. I figured that if I could shrink those image file sizes down of the several hundred images it may cause the pages to load quicker. The other benefit of course is that those viewing the site on a mobile browser won’t have as much bandwidth eaten for each page load.
To check things out and see what difference it made I opted for a plugin called ShortPixel for Wordpress (just navigate to plugins > add new > and search for ShortPixel to find it). They have a free plan that allows 100 image compressions to be performed. This allowed me to test and gauge what kind of compression I could get on each image. The statistics showed about a 40% decrease in image size on the first 100 images. Keep in mind that each image you upload has perhaps 4 or 5 different versions, so out of the 100 images about 20 unique images were compressed in the first batch.
Signing up was straight forward. I installed the plugin on WordPress, activated it, and followed the instructions to get an API key. The API key is what is used to tie your plugin to the developers website so that you can access the compression services. Don’t share it out as anyone who uses it will take from your quota.
After running the first initial test I decided to purchase a one off plan for $9.99 that includes 10,000 credits that do not expire. I plan to activate the same API key on this blog also if the rules permit it. For some reason they gave me 15,000 credits which is even better!
After all was compressed I ran some tests on a couple of pages and saw the page size reduce by quite a lot in one instance, and a bit less in another instance. Overall, the wp-content image folders went from about 150Mb down to about 65Mb. This doesn’t seem like a huge drop (although 55% is great), but if you think of the number of page loads on a blog; by knocking 55% off of the size of the images will save bandwidth, increase the page load speed, and be a better experience for your users which in turn, should keep them on your site longer (or stop them from hitting the back button).
Here are my brief results of the two pages I checked. The first number on each line is the full page size and the second number represents the size of the images on that page. The tests were performed at Pingdom. By the time all optimisations had finished on my few hundred images, I had used 1,811 credits and had reduced file size by 55%.
Page Before: 615.7KB of which 335.18KB are images. After: 532.1KB of which 253.43KB are images.
Page Before: 877.1KB of which 621.69KB are images. After: 462.5KB of which 209.03KB are images.
Although this won’t fix all page load speed issues, it is certainly one of the many vital elements that make up for a website loading quickly.