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 2200kb and around 1440kb 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 and image compression API 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 or you can make use of the API to be used on any platform. The PHP library for the API is available on GitHub.

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)

View test

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)

View test

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)

View test

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)

View test

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)

View test

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)

View test

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)

View test

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)

View test

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)

View test

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:

Image Without CDN With CDN Difference
web.jpg 1,691.143 ms 579.459 ms 65.74%
performance.jpg 1,625.580 ms 578.271 ms 64.43%
matters.jpg 2,171.152 ms 736.530 ms 66.08%
Image Without CDN With IP/CDN Difference
web.jpg 1,691.143 ms 37.023 ms 97.81%
performance.jpg 1,625.580 ms 47.923 ms 97.05%
matters.jpg 2,171.152 ms 45.322 ms 97.91%
Image With CDN With IP/CDN Difference
web.jpg 579.459 ms 37.023 ms 93.61%
performance.jpg 578.271 ms 47.923 ms 91.71%
matters.jpg 736.530 ms 45.322 ms 93.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!

Supercharge your content delivery 🚀

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

Get started

Comments

KeyCDN uses cookies to make its website easier to use. Learn more about cookies.