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 of up of images (an image is identified as a resource if the file extension is
svg or if the MIME type contains
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
sizes 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:
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.
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.
Responsive image techniques, such as the
sizes 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 some speed tests again on a test site with and without the CDN. We used Pingdom and WebPageTest, taking the median results from multiple tests. Our origin server is located in Dallas, TX while we performed the tests from Amsterdam, Netherlands. This allows us to so show the CDN difference. What we care about in these tests is how our image download times are affected. As you will be able to see we chose to convert our images to the WebP format with the Optimus plugin. They are automatically being delivered to accepted browsers with the Cache Enabler plugin.
Without a CDN
We first ran our tests without an image CDN enabled. The results can be found below:
- Total: 123ms: perfmatters.webp
- Total: 123ms: jpg-to-webp-1v2.webp
- Total: 610ms: jpg-to-webp-2v2.webp
- Total: 721ms: jpg-to-webp-3v2.webp
- Total: 605ms: jpg-to-webp-4v2.webp
- Total: 607ms: jpg-to-webp-5v2.webp
- Total: 133ms: perfmatters.webp
- Total: 133ms: jpg-to-webp-1v2.webp
- Total: 318ms: jpg-to-webp-2v2.webp
- Total: 885ms: jpg-to-webp-3v2.webp
- Total: 856ms: jpg-to-webp-4v2.webp
- Total: 849ms: jpg-to-webp-5v2.webp
With a CDN (KeyCDN)
Next, we then enabled our image CDN and ran our tests again. The results can be found below:
- Total: 53ms: perfmatters.webp
- Total: 61ms: jpg-to-webp-1v2.webp
- Total: 87ms: jpg-to-webp-2v2.webp
- Total: 94ms: jpg-to-webp-3v2.webp
- Total: 103ms: jpg-to-webp-4v2.webp
- Total: 72ms: jpg-to-webp-5v2.webp
- Total: 253ms: perfmatters.webp
- Total: 79ms: jpg-to-webp-1v2.webp
- Total: 81ms: jpg-to-webp-2v2.webp
- Total: 90ms: jpg-to-webp-3v2.webp
- Total: 96ms: jpg-to-webp-4v2.webp
- Total: 98ms: jpg-to-webp-5v2.webp
Here are the results of how a CDN affects our image assets, not to mention the total download times of the website faster.
|Speed Test Tool (file)||No CDN||KeyCDN||Difference|
|Pingdom (perfmatters.webp)||123 ms||53 ms||56.91%|
|Pingdom (jpg-to-webp-1v2.webp)||123 ms||61 ms||50.41%|
|Pingdom (jpg-to-webp-2v2.webp)||610 ms||87 ms||85.74%|
|Pingdom (jpg-to-webp-3v2.webp)||721 ms||94 ms||86.96%|
|Pingdom (jpg-to-webp-4v2.webp)||605 ms||103 ms||82.98%|
|Pingdom (jpg-to-webp-5v2.webp)||607 ms||72 ms||88.14%|
|WPT (perfmatters.webp)||133 ms||53 ms||60.15%|
|WPT (jpg-to-webp-1v2.webp)||133 ms||61 ms||54.14%|
|WPT (jpg-to-webp-2v2.webp)||318 ms||87 ms||72.64%|
|WPT (jpg-to-webp-3v2.webp)||885 ms||94 ms||89.38%|
|WPT (jpg-to-webp-4v2.webp)||856 ms||103 ms||87.97%|
|WPT (jpg-to-webp-5v2.webp)||849 ms||72 ms||91.52%|
As you can see the total download times on our image assets (without a CDN) and our POPs (with a CDN) on average is decreased by 75.58%! If you look at the WebPageTest data you can see that the “TTFB” and the “Content Download” times were the two greatest factors decreased by implementing a CDN. Typical website owners will most likely see even greater gains since our website was already highly optimized.
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.
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!