Introduction
Images on the web are heavy. They make up the largest number of requests on a web page. Images that are not optimized by an image CDN on average yield a file size 40-80% larger than those using an image CDN.
An image CDN is a content delivery network designed specifically to store images and media files. Decreasing image payload, improving SEO ranking, and decreasing page load times are just a few reasons why you should consider using an image CDN to host images for your website or application.
In this article, we’re going to cover the basic features of a content delivery network and further explain how the Cosmic image API and CDN solves the problem of delivering optimized images to users across the globe.
What is a content delivery network?
A content delivery network is a group of globally distributed servers that work together to serve internet content to users. They are spread out geographically so that wherever a user is in the world, they will receive the requested content from the server closest to them. This speeds up webpage loading times so that users have an overall better experience within a data-driven website or application.
Consider you own a stock image platform for content creators. These content creators will visit the platform to look for images to use in their next video or article. Inevitably, content creators from all around the world will be browsing your platform to gather high-resolution images for their next piece. You want your servers to deliver the images to them as quickly as possible while they browse whether the user is based in San Francisco or Prague. A CDN provides the solution to deliver the images to both users quickly and efficiently, serving the images from the server which is geographically the closest to them.
The concept of delivery times revolves around the fact that this content is literally traveling through a wire. Your device is sending an electronic signal through the wire, requesting said content from one of the servers in the CDN, and the CDN is responding with the content. The shorter the distance between the router or modem from which your device is connected, the faster that server will respond, which leads to happier long-time users on your platform.
What is an image CDN?
An image CDN is a content delivery network with a set of software features that optimize image files from upload to end-user delivery. An image CDN can cache images, detect the screen size of the device requesting an image, and reduce overall image file size to increase user experience and decrease page load times.
Furthermore, using a powerful image CDN service like imgix allows you to make edits, crops, and adjustments to your images, turning static images into dynamic, responsive images that help sites and apps load faster. Picking the right image CDN can free up engineering resources and deliver an overall better user experience.
Why use an image CDN?
Aside from image optimization and user experience, using an image CDN increases website performance and reduces page load times. Faster page load times can lead to lower bounce rates, higher customer retention rates, and overall increased sales. Statistics show that a decrease of only one-tenth of a second increased conversion rates by 8.4% for retail sites and 10.1% for travel sites.
When it comes to mobile users, which account for more than half of overall web traffic, unoptimized images lead to even lower conversion rates. According to industry benchmarks, the bounce rate of a 1-second to 3-second page load increases by 32%, 1-second to 5-second increases by 90%, 1-second to 6-second increases by 106%, and 1-second to 10-second increases by 123%.
Considering that images tend to be the heaviest resource on a web page, using an image CDN will help deliver optimized and responsive images to users on every device, further speeding up page loads. Your page load time will be a make-or-break factor when it comes to increasing conversion rates and lowering bounce rates. Speed is revenue.
How does an image CDN work?
1. Upload
With a turn-key image CDN service, simply uploading a single image file is enough. The service is capable of handling and transforming the static image.
2. Store
Once uploaded, the file is cached to a globally distributed CDN. When a user first requests a file, an optimized image is created by the image CDN on the fly, and then caches the optimized version, providing faster content delivery to all users.
3. Transform
A modern image CDN comes with features to process and transform stored images. These features include, though are not limited to resizing, compression, formatting, text overlay, cropping, and blur.
An important consideration when you are serving images to users on different devices (mobile, tablet, etc) connected with variable network strength is image resizing.
To accomplish resizing simply add your query parameters to the end of the URL. Features like these can be appended to the URL of an image if using the imgix CDN (included with Cosmic).
Original size:
Resized:
Using the same method as above to process the images using the imgix query parameters we can see remarkable performance improvements using even the same large image size using compression and automatic image formating.
Original URL: https://imgix.cosmicjs.com/14f4f800-48c1-11ed-a07b-05c6717a9348-sebastian-unrau-sp-p7uuT0tw-unsplash-1.jpg
When using the modified URL above to add compression to and format the image, we see a 93.3% reduction in file size.
The first image is the original with a file size of 3.3MB. The second image has been compressed and formatted, resulting in a file size of 1.2MB.
4. Serve
An image CDN caches your image in many servers all around the globe. There are often many servers within several regions like Europe, North America, Asia, South America, and Australia. When a request is made for an image, whichever of these servers is closest to the user who made the request will then deliver the image, ensuring fast and optimized delivery and a better user experience.
Using Cosmic as a free image CDN
Cosmic API and media management dashboard
With the Cosmic media management dashboard, you can easily manage and deliver images from the Cosmic image API and CDN. The media management dashboard comes integrated with Cosmic’s headless CMS by default, so once you upload images, they are ready to be connected to your Cosmic content.
Here’s a quick guide on using the media management dashboard in Cosmic:
Your browser does not support HTML5 video.
imgix image optimization
Within the Cosmic dashboard, you can easily add some basic imgix parameters to your images like compression, formatting, and width and height adjustments. Once you adjust the settings, just click ‘save’ and your image will be optimized and ready to be delivered.
In conclusion
Images hold a lot of weight on the web, and an image CDN is a pivotal factor when it comes to improving a website’s performance. High-performing websites can lead to higher conversion rates, lower bounce rates, and an overall better user experience. Along with these factors, it’s important to consider what kind of features fit the requirements of your website or application and choose accordingly.
If you’ve learned a thing or two from this article and would like to test out an image CDN for yourself, you can create a Cosmic account and begin using the media management dashboard for free.
