We all strive to make our websites the best they can be. We scour the internet looking for ways to make our web pages load faster in order to improve our site’s bounce rate.
We hunt for ways to bring our Google PageSpeed score up just a little bit.
But often, one of the most important factors to making our pages load fast is overlooked. It just so happens to be one of the easiest page speed optimization tasks to complete.
There are pages that improve their PageSpeed score by 60+ points by just addressing this one optimization tasks: Image Optimization.
Easy First: Image Optimization
When optimizing your website for Google PageSpeed, you really must get all of the “easy” tasks done first — it’s like when you’re completing an exam: you do all of your easiest questions first, and then come back to the harder or more time-consuming questions later.
Image optimization just happens to be one of the tasks that can have the biggest impact on your PageSpeed score. It can have the biggest impact because the more un-optimized images you have on your web page, the more demerit points you will receive. We’ve seen web pages score 0/100 simply because there were 20 very large un-optimized images on the page. By optimizing those images, the score quickly jumped to 70/100.
Now, while 70/100 is not the score you want to eventually end up with, it is a much better place to be than 0/100. That said, not every web page is going to score as low as 0/100 if they have un-optimized images on them. On average, a page with a few un-optimized typically runs about 20 points lower than those that have their images optimized.
How To Optimize Those Images
There are really four ways of optimizing your web page images. Each with their own benefits.
The Quick and Dirty: Google
The great part about this method is that the images are optimized for you, down to the size and quality that Google is expecting.
The downside to this method is that Google may determine that your image dimensions are smaller than you want them to be (based upon how your HTML and CSS is built) and subsequently when you put those images into your web pages, they may look grainy and unprofessional.
One other downside to using the Google provided optimized images is that you have to manually import each image provided into the correct location in your website. And if you keep your images in a number of different folders, you may need to hunt around to find the correct location to place those images.
What Professionals Use: Adobe Photoshop
This is how it is typically done. You take your image into Photoshop and then make sure the image is not larger than it needs to be. Images should be sized appropriately to the container that the image will reside in. For example, if your image is going to be at most half the size of your 960px wide content region, then make sure that the width of your image is only 480px wide. Often, images are being imported into websites as their original size that was taken as directly off of a camera in high-definition, at more than 2000px wide.
In addition to reducing file size by just reducing the dimensions of the image, you also should reduce the “quality” of your exported image to somewhere about 80% of the original high-definition image. This can reduce the file-size by an additional 90%, but still retain all of the quality that is required to appear clear.
A typical 2048×1536 (3.15M pixels) image might come in at over 1.2MB. By resizing that same image down to 480×360 (173K pixels) reduced its size to 218KB which is an 85% reduction in size.
By reducing the quality from 100% to 80%, that image file size is reduced to 27KB, which is a further 88% reduction in size.
By properly sizing an image, we have taken it from 1.2MB to 27KB, which is a reduction in file size of over 97%. This can also be translated as being the image being loaded 44 times faster than the original image.
And that’s just one image.
Web Optimization with TinyPNG
If your images are already sized appropriately, but you want to ensure that they are optimized, you can use the website tinypng.com. This service is extremely easy to use: you just upload images directly to the page by either dragging them from a file-window or by clicking on the “file upload” widget in the middle of the page.
TinyPNG then optimizes your images for you. You then download those optimized images, import them into your local website structure, and then re-upload them to your web server.
The up-side to this method is that it is quick and easy. The downside is that you have to have your images pre-sized, and you have to manually re-upload them to your web server. And if you have a lot of images on your pages, this can be a fairly time-consuming task.
Automated Image Optimization with Pegasaas
The last method is the Automated Image Optimization feature provided by Pegasaas Accelerator.
Pegasaas Accelerator looks at the images in your web pages and automatically builds an optimized image. If the image is too large, it will attempt to re-size the image down appropriately. If the image should be cropped for the area that it is contained in, Accelerator can crop it to reduce the file size further.
One upside to using Pegasaas Accelerator for your Image Optimization is that Pegasaas Accelerator does not modify your original image, but instead creates a whole new image that your page then loads, which allows you to use the original image at a later date for other uses.
The Image Optimization also just happens automatically. When you turn on Pegasaas Accelerator, any time a page is requested, Pegasaas will load a cached version of the optimized image. If the optimized image doesn’t yet exist, it automatically creates it. You don’t need to do a thing, Accelerator just does it for you, saving you valuable time.
And of course when you use Pegasaas Accelerator for automated image optimization, it isn’t just optimizing your images, it is also handling all of the other aspects of PageSpeed optimization to get you the highest possible PageSpeed score.
If you have any questions at all about Pegasaas Accelerator and how it provides automated Google PageSpeed optimization, contact us, or check out our knowledge base.