Cloudinary Blog

How to analyze your website's images, improve loading speed and reduce bandwidth costs

Using image analytics to improve UX and save bandwidth
Website owners and application developers know that analytics and usage monitoring tools play a major role in growing their products and making them effective, and highly tuned to their customers needs.
 
We all use Google Analytics (or similar tools) to check how our visitors use our site, the path they follow while using our app and the conversion flows that help monetize our business. You might also be monitoring your hosting provider's storage space, CPU utilization and traffic statistics across your production systems.
 
But how do you analyze the usage of your media files? 
 
Most modern websites and mobile applications are designed to showcase a considerable amount of images. These images are responsible for more than 60% of your bandwidth utilization and significantly affect your website's performance and your service costs.
 
As an online image management solution, our customers frequently ask us for insight about their images. What images and image transformations contribute the most to their high bandwidth? What exactly caused the recent bandwidth spike they experienced? And generally, how can they save bandwidth and get their website to load faster?
 
Until now, we maintained our own internal analytics tools to help answer such questions. Seeing the amazing impact our answers had on our customers websites and mobile applications, we knew that we should make these tools publicly available.
 
So today, we wanted to introduce you to Cloudinary's new Reports & Insights console
 
This new section of Cloudinary's management console provides detailed usage statistics focused on the images delivered to your users, and offers crucial insight into how you can optimize your bandwidth utilization and improve your website’s loading speed.
 

Top Images & Transformations

You may find it interesting to visually view the most popular images of your application or website, especially if your service allows users to upload their own images. 
 
Insights - Top images by bandwidth
 
Cloudinary's new reports page lists the images that contribute the most to your monthly bandwidth. You can also view the images that are downloaded the most, which might be a different set of images depending on their size.
 
The top images view can also help you identify images responsible for an unusually large portion of your bandwidth. Tweaking such images may have a big impact on your bandwidth consumption.
 
By default, our charts reflect Yesterday's usage. You can also choose to view the aggregated statistics of the last 7 or 30 days and even select specific dates to explore bandwidth usage spikes.
 
Insights - Top transformations by bandwidth
 
 
In addition to viewing your top images, a powerful set of new charts allow you to find the transformations and derived images that contribute the most to your monthly bandwidth and download requests.
 
Using these charts, you can look for hi-res / hi-quality transformations that greatly increase your bandwidth usage and slow down your page loads. You can easily recognize such cases by checking out the "Top Image Formats", "Top Transformations" and "Top Derived Images" charts. 
 
Having located the bandwidth hogs, you can use Cloudinary's dynamic transformation URLs to easily optimize your images. Simply change the image format from PNG to JPG, increase the image compression or create a lower resolution alternative. You will save money, your application will perform better and your users will benefit from an improved viewing experience.
 

Top Referrals and Sources

A common request we get is to help our customers better understand the origins of their image delivery traffic. This helps in analyzing the distribution between various sub-sites, checking the impact of a mobile application, finding out how much bandwidth search engine crawlers are responsible for, and more.
 
Insights - Top domains by bandwidth
 
The reports page also depicts the top web pages in terms of image delivery traffic, and download requests. 
  
To help you better optimize your images, Cloudinary also shows you your users' browser type distribution For example, in the screenshot above, you can see the top browsers viewing your images, with Chrome leading with 51.3%. 
 
Insights - Top browsers by bandwidth
 
In this example, you may conclude that you should tell Cloudinary to use the more efficient WebP image format when applicable. The WebP format, is supported mainly by Chrome, and will significantly reduce your bandwidth usage while improving your site's load times.
 

Insights

Another cool feature we've added to our reports is automatic insights. Cloudinary can now automatically analyze your usage patterns and provide important insights and tips. These insights can quickly focus your bandwidth optimization tasks.
 
Bandwidth optimization insight
 
For example, as you can see in the screenshot above, Cloudinary detected that a specific image transformation (920x600, face-detection base crop) is responsible for a large portion (44%) of your bandwidth usage. In this case, you should probably check if such type of images are indeed expected to be so popular. In addition, it might be beneficial to change the transformation to generate lower resolution or lower quality images to optimize your image delivery further.
 
This is of-course just a single example. There are plenty of image delivery best practices that you can apply using Cloudinary. Some are listed in this blog post: Top 10 mistakes in handling website images and how to solve them
 
Cloudinary's automatic insights already cover the major image delivery pitfalls, and we'll keep improving and expanding our insights even further.
 

Summary

From our experience, having the image data we expose with the new charts and insights available, can be extremely beneficial to any website and mobile application. 
 
We already used this data internally to assist our customers in reducing their bandwidth utilization by up to 80%, saving them considerable costs, making their sites perform significantly faster, and greatly improving their visitors' browsing experience.
 
The Reports & Insights section is currently in beta. During this time, it is freely available to all of our free and paid plans! If you already have a Cloudinary account, visit the new Reports & Insights page of our Management Console. If you don't have a Cloudinary account yet, create a free account now, for a hassle-free, cloud-based image management solution.
 
We would appreciate any feedback or suggestions you have regarding our new reports & insights. Is there any additional image-related data you'll want us to depict?

Recent Blog Posts

10 Website Videos Mistakes and How to Solve Them

It should come as no surprise that video use on the internet is exploding. You can see the dramatic growth of video on the average site in this SpeedCurve blog post.

With the growth in video comes greater bandwidth use, which is not only costly for your IT budget, but for your visitors as well. Beyond the expense, there is the user experience to consider. The heavier the page, the longer it will take to load, and the greater likelihood visitors will abandon your site. Page load speed is also an important factor in SEO ranking, so clearly video is something we need to take seriously and get right. Video is challenging, presenting terms still unfamiliar to developers - like codecs, bitrate and adaptive bitrate streaming. As a result, mistakes are being made in video implementation.

Read more
Android Data Saver: Optimizing Mobile Data Usage with Cloudinary

Over the life of a mobile device, the cost of a cellular data plan often exceeds that of the device itself. To optimize data usage and purge useless data on their mobile devices, users can enable Data Saver from Android 7.0 (API level 24). To do so, users toggle Data Saver in quick settings under the Notification shade or under Settings > Data usage. With Data Saver enabled, apps that aren't whitelisted cannot use cellular data in the background. They are also directed to consume less data while active.

Read more
Introducing the Cloudinary Upload Widget v2

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals. Cloudinary is an end-to-end solution for all your image and video needs, including upload, storage, administration, manipulation, optimization and dynamic delivery.

Read more
Convert an Image to a 3D Canvas With Cloudinary

Note
This post was cowritten with Daniel Mendoza.
Note
This post was cowritten with Daniel Mendoza.
Note

Famed American poet Henry David Thoreau once said, “This world is but a canvas to our imagination.” And, like your imagination, the transformations you can apply to images with Cloudinary are practically endless. You can even render any flat image to appear three-dimensional and framed on a canvas.

Read more
Mobile Optimization: Optimize Your Mobile-Web User Experience

TL;DR

We live in a visual world, often while on the go, and consumers expect media-rich web content. Accordingly, the loading speed of images and videos is a big factor in user experience. To optimize customer satisfaction with your mobile content, you must focus on the quality, format, and size of your digital assets. With Cloudinary, optimization is simple, not only enhancing your mobile web and app performance, but also upping your SEO game and boosting customer experience.

Read more