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)