Image CDN - Speed up the Delivery of Your Most Important Asset

By Martin Williams
Updated on August 3, 2019
Image CDN - Speed up the Delivery of Your Most Important Asset

Images are an integral part of the web today and are used in all sorts of different ways. They say a picture is worth a thousand words. Well, that is probably true, as long as they don't slow down your website to the point where you are losing visitors. When it comes to optimizing your website, images are generally the most important asset you should spend time on figuring out how to reduce in size and deliver in a more efficient way. Using an image CDN, such as KeyCDN, can significantly reduce the latency of your image delivery. This allows your images to be delivered much faster all around the world.

Image optimization importance

We have been talking a lot about website optimization lately and have interviewed many web performance experts to get their recommendations and advice. We received great responses from experts who work in the industry every day, such as Jeff Atwood (co-founder of Stack Exchange and Discourse) and Patrick Meenan (creator of WebPageTest). If you haven't had a chance to read it yet, we recommend taking some time to go through it as there was a lot of great applicable information that was shared.

Not to our surprise, 46% of the experts said that the number one priority or focus should be on image optimization! Furthermore, over half of them mentioned the importance of decreasing your overall page weight. Do you know the easiest way to decrease page weight? You guessed it, images. Here are just a few of their responses:

A big focus for our performance team is (and will continue to be) optimizing images. The average page is around 2200 KB and around 1440 KB are images which means that's a good target for the biggest performance wins. There are a number of file types out there that can help in image compression (*cough* WebP *cough*) and they are underutilized...

- Matt Shull

Images! Developers often focus on improving scripting performance, but they need to realize that the bulk of their performance woes come from media content...

- Una Kravets

Image optimization. Optimize and use responsive images (<image> and the srcset attribute). I'm almost always on a slow connection and the amount of time it takes images to load on most websites is just horrid...

- Sara Soueidan

Desktop and mobile images

Just how much of a website is made up of images? Well, according to HTTP Archive, as of June 1, 2019 the average desktop page is 1,896.8 KB and the average mobile page is 1,683.5 KB.

Images on a desktop page take up an average 971.5 KB and on a mobile page take up an average of 865.9 KB.

That means about 51% of the average bytes per page, whether on desktop or mobile, are solely made up of images (an image is identified as a resource if the file extension is png, gif, jpg, jpeg, webp, ico, or svg or if the MIME type contains image).

Optimizing images for both desktop and mobile devices is important, however, with worldwide mobile users now having recently surpassed desktop users (StatCounter) there is an even higher importance on ensuring images are optimized as much as possible. This is crucial due to mobile devices requiring additional optimizations because they typically have less powerful hardware and a slower network connection when compared to desktop devices.

As Sara Souedan said, not everyone has access to fast internet. For example, while the average mobile download speed on 4G in Switzerland is fast at 35.2 Mbps, countries with a growing Internet users like India is only at an average mobile download speed of 6.8 Mbps (Opensignal). This means we need to always be testing for different devices and connections.

Don't just assume because your website is fast on your desktop device, that it will be the same for those on a mobile device. Take advantage of free website speed test tools, many of which have options to test on mobile.

Ways to optimize your images

There are many ways that you can optimize your images, such as utilizing image processing services and image compression software, choosing better image formats, using srcset, sizes, and media attributes. Find the best approach that will give you the greatest outcome for your website.

Image processing service

We offer an image processing service that is fully integrated into our existing network. It allows comprehensive on the fly image transformation and optimization. Images can now be altered in real time with simple query parameters and will then be delivered by our CDN.

For example, the query string ?width=600&quality=70 would transform the image to be 600 pixels wide and sets the quality level to 70:

    
        https://ip.keycdn.com/example.jpg?width=600&quality=70
    

Combine this with our WebP caching to automatically deliver the highest performing image format. Optimizing your images for the fastest delivery has never been easier.

Image compression with Optimus

Take advantage of smart image compression with the Optimus image optimizer. This is a powerful WordPress plugin that can reduce the size of images without any visible loss in quality. WebP conversion is supported with a paid license. Optimus allows images to be optimized and then stored. This is useful if you want to store optimized images instead of using a real-time image processing service.

Depending on the image and format, reductions in size of up to 70% are possible. Optimus can be installed on any WordPress website.

Image formats

We already know that images are usually the heaviest part of a web page, which is why using the highest performing image format is recommended. WebP formatted images are on average 26% smaller than PNG formatted images and 25-34% smaller than JPEG formatted images. This means just converting your images to WebP can decrease the size of your pages by about 25%. However, it's important to keep in mind that not every browser supports the WebP format so you'll want to make sure that you only deliver this format to accepted browsers. This can be done automatically with our image processing service. If you have a WordPress website our Cache Enabler plugin can handle this automatically.

Another image format to consider is the SVG format for better scalability. One major advantage to this image format is that it can be compressed with Brotli. This is a leading compression algorithm developed by Google to help further reduce the size of files. You can use our Brotli Test tool to see whether or not your server supports Brotli.

Using srcset, sizes, and media attributes

Responsive image techniques, such as the srcset, sizes, and media attributes, allow you to serve different scaled images based on the size of the display. This means mobile users can now be served smaller file sizes, which in turn speeds up the delivery of the content because the overall page weight is smaller. Check out our in-depth post on how to use responsive images.

How can an image CDN help?

While optimization of your images is great, it really only gets you part of the way there. If you are targeting more than just a local audience, then a CDN is by far the easiest way to get instant improvements on your image download speeds. Why? The main reason is because it decreases the latency to the user where they are located by serving your images from a POP physically closest to them. A while back we did a case study on website latency with and without a content delivery network and tested overall times. Now we want to narrow in on how using a CDN affects the total download time of your images. Since more than half of a web page is made up of images, the term "Image CDN" is very applicable as that is what most of the bandwidth is being used for.

We ran a few speed tests on a test website with and without a CDN. We used our Website Speed Test tool, measuring the median results from multiple tests. Our origin server for our test website is located in Frankfurt, Germany while the tests are done from San Francisco, California. This allows us to show the difference that a CDN can make. What we care about in these tests is how our image download times are affected.

Without CDN

We first ran our tests without an image CDN enabled on the original uncompressed and unscaled images. The results can be found below:

Test 1

web.jpg = 1,557.902 ms (1.6 s)
performance.jpg = 1,715.65 ms (1.7 s)
matters.jpg = 2,432.008 ms (2.4 s)

Test 2

web.jpg = 1,868.285 ms (1.9 s)
performance.jpg = 1,370.144 ms (1.4 s)
matters.jpg = 2,154.034 (2.2 s)

Test 3

web.jpg = 1,647.242 ms (1.6 s)
performance.jpg = 1,790.945 ms (1.8 s)
matters.jpg = 1,927.415 (1.9 s)

With CDN (KeyCDN)

Next, we then enabled our image CDN and ran our tests again. The results can be found below:

Test 1

web.jpg = 615.862 ms (615.9 ms)
performance.jpg = 621.774 ms (621.8 ms)
matters.jpg = 754.177 ms (754.2 ms)

Test 2

web.jpg = 579.744 ms (579.7 ms)
performance.jpg = 582.539 ms (582.5 ms)
matters.jpg = 721.453 ms (721.5 ms)

Test 3

web.jpg = 542.771 ms (542.8 ms)
performance.jpg = 530.501 ms (530.5 ms)
matters.jpg = 733.959 ms (734 ms)

With image processing and CDN (KeyCDN)

Lastly, we then enabled our image processing service. As you may have noticed the images that we tested are large because they are uncompressed and unscaled. Using our image processing service allows us to compress and scale our images according to our specifications and then have the optimized images delivered through our CDN. The results can be found below:

Test 1

web.jpg = 615.862 ms (615.9 ms)
performance.jpg = 621.774 ms (621.8 ms)
matters.jpg = 754.177 ms (754.2 ms)

Test 2

web.jpg = 579.744 ms (579.7 ms)
performance.jpg = 582.539 ms (582.5 ms)
matters.jpg = 721.453 ms (721.5 ms)

Test 3

web.jpg = 542.771 ms (542.8 ms)
performance.jpg = 530.501 ms (530.5 ms)
matters.jpg = 733.959 ms (734 ms)

Results

As you may have already noticed from the waterfalls above there are significant performance improvements gained when using an image CDN. The average results of how an image CDN affects image delivery can be found below:

ImageWithout CDNWith CDNDifference
web.jpg1,691.143 ms579.459 ms65.74%
performance.jpg1,625.580 ms578.271 ms64.43%
matters.jpg2,171.152 ms736.530 ms66.08%
ImageWithout CDNWith IP/CDNDifference
web.jpg1,691.143 ms37.023 ms97.81%
performance.jpg1,625.580 ms47.923 ms97.05%
matters.jpg2,171.152 ms45.322 ms97.91%
ImageWith CDNWith IP/CDNDifference
web.jpg579.459 ms37.023 ms93.61%
performance.jpg578.271 ms47.923 ms91.71%
matters.jpg736.530 ms45.322 ms93.85%

As you can see using an image CDN and optimizing your images can lead to significant performance improvements, even when the images are high resolution. Optimizing your images and adding a CDN are equally important.

Image CDN SEO

Another common misconception that we see mentioned quite often is that a CDN hurts your SEO. This is not true by any means. In fact, it helps your SEO when setup properly! A common issue people run into is indexing of their images. By default, if you don't enable a custom Zone URL your images will most likely index on your CDN providers default Zone URL. If you setup a custom Zone Alias Google will see images as if they are on your site. Once we add rel="canonical" to the HTTP header, your images will index normally as the crawler will know that they are only a copy and not duplicate content. These headers are automatically added by KeyCDN. You can also control indexing further using your robots.txt file.

So how does this help you? Google loves speed. By using a CDN your images will index faster in Google image search! They will also be more likely to rank higher in SERPs. Check out our more in-depth post on CDN SEO: image indexing with a CDN.

Summary

As you can see there are many ways you can speed up the delivery of your images. The first is to make sure your images are optimized. The second is to utilize an image CDN, such as KeyCDN, to decrease the TTFB and content download times. Don't let your number one asset be the reason for having a slow website!

  • Share

Supercharge your content delivery 🚀

Try KeyCDN with a free 14 day trial, no credit card required.

Get started

Comments

Comment policy: Comments are welcomed and encouraged. However, all comments are manually moderated and those deemed to be spam or solely promotional in nature will be deleted.
  • **bold**
  • `code`
  • ```block```
KeyCDN uses cookies to make its website easier to use. Learn more