Optimize Images for Web

As we all know, Google has been preaching about importance of website loading speed for years. As of now, it is clear that it is a matter of time until page speed will become a ranking factor.

In fact, on March 2017 Google announced that page speed has indeed officially become a ranking factor for Mobile First Index.

Besides SEO benefits, faster sites gain significant improvement in conversion rates according to numerous case studies that have been conducted in the industry.

Here are 12 case studies reported recently by HubSpot.

So it is even more important these days to make sure your website’s pages are loading fast.

Obviously there are multiple factors that affect site’s loading speed besides images. I won’t be covering all of them here. You can read this article that addresses majority of them.

In this guide I’ll talk in-depth about image optimization. There are six main things you can do to optimize your images for faster page loading.

You don’t have to implement all of them. However, the more points you implement, the faster your pages will load.

  • Choose suitable file format
  • Keep the same dimensions
  • Reduce file size
  • Combine images together
  • Upload images to external storage
  • Use content delivery network

 

#1 Choose suitable file format

Ultimately, you need to use suitable file format depending on type of the image that you use. For example, if you have a photographed image, it is better that you use JPEG format.

You’ll be able to get more out of compression of photographed image with JPEG format than with PNG format. PNGs are generally better compressed with graphics with fewer than 16 colors on the image.

 

#2 Keep the same dimensions

After you scaled your images to certain dimensions, you need to keep those same dimensions when you publish those images on your website.

For example, I often see people uploading not scaled images with original dimensions (let’s say 3000×2000 pixels) directly to their site and then shrink them down on the page (let’s say to 300×200 pixels).

They don’t understand that in order for that page to load, users’ browser needs to load those huge images (that often times weigh several megabytes).

The solution is so simple but many people are not aware of that.

I see this mistake happening on hundreds of sites that we audit each month. This mistake is costing those sites’ owners 3-5 seconds in loading time (sometimes even more).

3-5 seconds waiting time in the internet means significant loss in revenues. So if you have been making this mistake on your site/s, please stop.

It is very simple to fix it. First of all, scale your images to your desired dimensions and then publish those images on your website with exact same dimensions.

This by itself will significantly improve page loading speed.

 

#3 Reduce file size

This point is an extension of the previous point. When scaling your images down, the file size will be automatically reduced.

But it doesn’t mean that this is all you can get out of it. By running those images through image compression tool like compressjpeg.com, you can get additional 50-80% overall size reduction.

So, before you upload your images to the web, always first scale them to your desired dimensions that you are going to use on your website and then run them through compression tool like the one I mentioned above.

 

#4 Create CSS sprites

The performance of your website directly depends on the amount of http requests that your visitor’s browser should process to download the contents of your page.

The more requests your page has, the slower the page will load. Now, there are numerous http requests get triggered during page loading period.

Among them are requests to download your images. So, if you have many images on your page, there will be more requests made.

Here is where CSS sprites come into the picture. It combines your images into a single image that loads in a single http request and displays only the sections that you want to show to users.

This directly improves loading time by requiring your users’ browsers to make less http requests.

If you hear about CSS sprites first time, here is a nice article for beginners that explains a little more in-depth about it.

 

#5 Upload images to external storage

amazon s3Uploading your images to an external storage is another way to reduce load from your server. I’m not talking here about free image hostings.

I do not recommend to upload your images to such storages because you are not in a control over your images. They can remove or discontinue your account at any point of time.

What I’m recommending here is to use external cloud storage like S3 provided by Amazon. S3 cloud storage is an amazing and cost-effective solution to store your media files.

I use it every time for all of my projects. It is ridiculously affordable.

From the technical point of view, it helps you reduce load from your server because http requests are sent to the cloud storage instead of your website server.

 

#6 Use content delivery network

Content Delivery Network (also known as CDN) is a network of servers scattered around the globe that helps deliver content to the end web user in a more efficient way.

Essentially CDNs have been designed to solve latency issues by literally reducing geographical distance between a visitor and your website’s server.

They do it bytoring multiple cached versions of your website at numerous data centers throughout the globe.

At the moment when a user accesses your site, CDN retrieves the content from the geographically closest data center to that user.

This dramatically reduces page loading time and improves user experience.

Let’s say your main hosting (where all your website’s files are stored) is located in San Francisco, CA. Now a user from the other coast (New York for instance) visits your website.

If you don’t have CDN setup, your user would wait for all your contents to download from your server’s physical location in San Francisco.

But if you have CDN setup, a cached version of your site will be retrieved form New York data center and served to a user.

If you want to learn more about CDNs and how they work, read this great guide created by Incapsula.