Accelerate your images by 9x with Image CDN
At the end of May 2017, the average U.S. mobile retail site would take 10.64 seconds to load on a mobile phone. And it’s a long time since we’re living in a world where 40% of consumers tend to abandon a page, which takes longer than 3 seconds to load, and then never go back in 88 cases out of 100.
Generally, a faster site increases conversions, decreases your bounce rate, improves your UX, and helps search engines rank you higher.
Wait 🤔 what exactly is loading there for almost 11 seconds? The best answer is “stuff.” There are things specific to each case, but we know that up to two-thirds of that stuff are represented by images. Since our example was about mobile retail, graphic elements would include favicons, backgrounds, logos, product images, etc.
Basically, optimizing image content gets you about 70% of site load speed issues resolved. This article will help you master images with Uploadcare CDN and get up to 9x decrease in image load time.
Measuring tools
Before we begin, let’s discuss a couple of instruments to measure image load times.
For measuring site load speed locally, we’d recommend using Chrome DevTools. Things like Pingdom are a great fit for in-depth load speed analyses. Talking of which pages your traffic goes to, we use Google Analytics. It’s also helpful when figuring out your bounce rates.
Using Uploadcare CDN
CDN or Content Delivery Network is a large group of servers deployed in many locations across the world. It’s built in a way that each file can be delivered via any data center on the network. Based on your client locations, CDN picks servers and uses them to deliver content. Simply put, the closer is a server — the better.
Uploadcare now partners with Akamai for superior coverage. With its 200k servers, images are delivered at optimal speeds, anywhere. Basically, Image CDN is a concept where an image processing center is paired with a delivery network. All the examples we give in this article work via our CDN.
Alright, let’s get to practice. For example, we have a 🍍 pineapple pic. Sized at 3.4 MB, this 5330x3553px JPEG image loads in 1.74 seconds on a LTE-enabled connection.
The pic is already delivered via CDN. If you take a look at its URL, you’ll notice there’s a UUID (Universally Unique Identifier): f3acdb9f-ecdd-4fc2-b98e-7ba74db93bd7. We use those to address unique files on our CDN:
https://ucarecdn.com/f3acdb9f-ecdd-4fc2-b98e-7ba74db93bd7/Control image size
Taking control over output image dimensions also means managing image sizes. Uploadcare provides a variety of image processing operations where you can find all kinds of stuff from changing image geometry to pixel manipulations.
The operations are applied to images by simply modifying their URLs. Say, we’re up to putting the image in a predesigned layout where its width should not exceed 960 px. Here’s how:
https://ucarecdn.com/f3acdb9f-ecdd-4fc2-b98e-7ba74db93bd7/-/resize/960x/pineapple.jpgWe’ve adjusted the width of our pineapple image thus making its file size drop to 88.5 KB. It now takes about 318 ms to load the image when measuring locally. And, that’s almost a 5.5x load time improvement.
Manage image formats
Alright, let’s say you’ve got the adaptive image size. How can you further optimize it? Consider using the format and quality CDN API operations. You can also select proper output formats automatically, WebP included.
This works by modifying image URL. Here’s a pineapple example:
https://ucarecdn.com/f3acdb9f-ecdd-4fc2-b98e-7ba74db93bd7/-/format/auto/-/resize/960x/After format manipulations, image size has decreased to 67.7 KB and loading time dropped to 211 ms now showing a 8.3x improvement. Let’s double check everything. Yep, Chrome console reports Resource interpreted as Document but transferred with MIME type image/webp: we’re all set.
The next step would be affecting image quality:
https://ucarecdn.com/f3acdb9f-ecdd-4fc2-b98e-7ba74db93bd7/-/format/auto/-/quality/lightest/-/resize/960x/Nice, it went down to 36.8 KB @ 196 ms. That’s about 8.9x faster than loading the original pineapple. It’s good to know when using WebP visual quality is degrading at a lower extent than image size. Quality hacks can be applied when you aren’t just adjusting to viewing environments but also accounting for network performance.
Get responsive
Great, we’ve just got our 8.9x improvement. Time to pack a suitcase and head home. Well ✋ not that fast. The problem is we’re mostly designing for a whole set of resolutions, screens, and devices, not just laptops. You’d want your layout to adjust to user viewing conditions. And clearly, you aren’t the only one. Say, guys at RICG are helping developer communities do the same.
We’ve already discussed a step by step process to building better responsive images in our post.
Long story short, that’s what you want to get:
You can find the complete interactive example on CodePen. The code ensures every client gets proper images based on their screen size and orientation. Also, for srcset you might want to use images resized via CDN: this way you can upload just a single large image and downscale and even crop it when appropriate.
DNS prefetch
There’s another useful hack, even though it’s not about direct image manipulations. Thing is, before starting to download resources of a website, your browser needs to translate its domain name to an IP address. And only then, your browser will be able to download any content. Of course, this takes time.
You can explicitly tell your browser an address to get all the resources from, this helps resolve a domain name as quickly as possible.
Add this to the <head> section of your page:
<link rel="dns-prefetch" href="//ucarecdn.com">Then, when your browser requests a file from our CDN, it will no longer have to wait for the DNS lookup. See dns-prefetch browser support for more details.
The conclusion
We’ve just achieved the impressive ~9x load time improvement by using CDN API for images alone. While exact numbers will vary depending on your location, this would still be a massive improvement.
Next, you can always check out our CDN API docs to learn more about optimization options, and experiment with your existing images. If you don’t have an account yet, there’s a free one, where you can upload some images directly via your dashboard, widget or API, and run some tests. This will give you a good understanding of an extent to which your image content can be optimized.
If you’re just curious about processing this or that image, visit this quick start for simple testing.
Once your images are hacked to the max, you get about two thirds of your load time problems solved.
If you liked the post, hit the share button to 🚀 spread the word!
For more stuff on getting simple controls over complex techs:
⚡ follow @Uploadcare on Twitter
