What is an Image CDN?

A traditional CDN focuses on pushing content as close as possible to the requesting user. Typically, they do this by having edge servers at many Points of Presence (POPs) all over the world. The idea is by caching content and reducing the geographic distance, a traditional CDN will improve speed and reduce the burden on a company’s origin server.

There are several problems with the traditional CDN model when it comes to images. A traditional CDN does not know the capabilities of the requesting device. Whether it is an Apple laptop, a Samsung Galaxy S9 smartphone, an Apple iPad Air 2, or a Motorola G3 smartphone, a traditional CDN will send the same large original image. And since the business model of traditional CDNs are based on a price per gigabyte delivered basis, they have no interest in optimizing the payload. Given their huge infrastructure investment, traditional CDNs need to keep data payloads large to pay for their legacy network costs.

An image CDN takes a radically different approach by changing the original static image into dynamic content by optimizing the image in different ways based on context where the image is consumed. This requires intelligent, device-aware edge servers. Because an image CDN reduces image payload and response time so dramatically, it is no longer necessary to build out a CDN with thousands of POPs. Virtual cloud-based edge servers effectively serve the entire globe from only a few dozen locations. This enables an image CDN to deliver quickly to a range of devices at a lower cost.

A CDN cache is a temporary storage location that holds content for fast delivery to the end user. In the case of an image CDN, images are held on the network’s edge server’s cache at multiple locations around the globe. The images stored in cache are created the first time a request comes from a particular device type. The image CDN optimizes the image, stores it on the edge network, and indexes it relative to the device model. That way, the next time a similar device requests the image, it is delivered quickly from cache. Depending on settings within the account, the network will periodically check for updates to the original master image. When the cache is primed (i.e. populated with images after many requests), the image CDN will typically deliver from the cache greater than 95% of the time.

An image asset management platform frequently provides tools to generate static optimized images and store them in cloud-based storage. From the cloud-based storage, subscribers can opt to connect a traditional CDN. Using various javascript or responsive image techniques, customers can select images that are theoretically appropriate for the device. This means that web designers or developers will still have to create multiple versions of a single creative for various breakpoints and write media queries to serve different content. This is a time consuming process and is completely unnecessary today with solutions like an image CDN. Asset management platforms typically charge based on the number of image transformation, the amount of storage, and amount of image payload delivered.

An image CDN also provides many directive-based tools that can transform an image to the specifications that a graphic or front-end designer requires. Most users find that the device-awareness and the automatic optimization of an image CDN is sufficient for 95% of their needs without the need for directives. Furthermore, the simplicity of having a CDN seamlessly integrated with device-awareness and image optimization makes for a simpler integration and faster image delivery. Unlike an asset management platform that charges per transformation and storage, an image CDN charges only for the final optimized image payload. Since the image CDN generates significantly smaller payload than an asset management platform, the price is even lower.

An image CDN will go out of its way to produce an image that delivers high visual quality with the lowest possible byte size. However, there are trade-offs between file size and visual quality. Lower file size means lower visual quality simply because bytes are removed from image data. The question is how much image data can be removed without significantly reducing the visual quality of the image?

Once again, device-awareness is the key tool used to balance image quality with file size. This complex image processing uses detailed input about the user’s device and browser. An image CDN has automatic settings that are calibrated to focus on metrics like the Structural Similarity Index Method (SSIM). SSIM gives a score based on how well the “pixel structure” of two images (i.e. two pictures but with different compression) match each other. The larger the difference in pixel structure between the two images, the greater the visual quality difference is.

Image and video file formats are constantly evolving. However, people should not have to manually transform images and generate new code to deliver image variants to the devices and browsers that support them. An image CDN automatically manages all of the complexity of selecting the optimal image format for a device or browser. For example, an image CDN can use Google’s WebP file format to deliver optimized images to the Chrome browser. Likewise, it can deliver JPEG 2000 to Apple’s Safari browser. For animated GIFs, an image CDN can convert them into MP4s or animated WebPs. All of these next-gen image formats are typically 30% more effective than a standard JPEG - and that is before further device-driven compression or resizing. At the end of the optimization cycle, image CDNs can reduce image payload up to 80%.

Yes, image CDNs can work side-by-side or in conjunction with existing CDNs. Traditional CDNs might provide features people prefer to keep. Therefore, the only thing necessary is to enable the image CDN to handle the image traffic.

Usually it is recommended that the image CDN serve traffic directly to end users. However, there are certain cases where an image CDN can integrate with existing CDNs like Akamai, Cloudfront and Cloudflare.

There are many ways to measure the success of an image CDN. A balanced scorecard would suggest both operational and business metrics.

Operational Metrics

Image Payload Reduction: Images make up over 60% of an average website’s payload. Typically, an image CDN can reduce image payload anywhere from 40% to 80%. An image payload analysis tool can quickly analyze one’s current website and provide an estimate of savings.
First Contentful Paint (FCP): Marks the time at which the first text or image is displayed.
Time to interactive: The amount of time it takes for the page to become fully interactive.

Business Metrics

Search Engine Optimization (SEO)/ Search Engine Results Pages (SERP): Image optimization has a significant impact on how search engine ranks a website. If an image CDN succeeds in cutting seconds off the the load time, then rankings should improve.
Bounce Rate: The percentage of people who land on a website and do nothing on the page they entered.
Conversion rate: Every website measures a conversion differently. For example, some ecommerce sites measure the frequency of a user placing an item in a cart and purchasing. The superior user experience from an Image CDN providing faster page loading drives improved conversion rates.
Sales: Revenue is the most important indicator of success. Many image CDN users see an increase in revenue from both desktop and mobile user purchases. Image CDNs typically have a very strong Return on Investment (ROI) based on the revenue increase, simplified workflows, and overall CDN cost savings.

With the appropriate access to control panels on your website, eCommerce platform, or CMS, a developer can integrate an image CDN in approximately 10 minutes. Most image CDNs have step by step integration guides. The key steps include:

Set up an account on the image CDN.
Designate the image origin, usually a domain name or hostname, where the original images are located.
Use the image CDN’s hostname or create a custom domains (using a CNAME) for serving the images. (links to documentation)
Update image tags to include the image CDN hostname.

1. Your website is slow.

53% of people abandon a mobile page after 3 seconds. Consequently 3 seconds is the minimum, but aim for under 1 second. Test your site on a third party speed test tool to see if it meets this requirement. Some sites are webpagetest, Lighthouse by Google, and ImageEngine’s demo.

2. If a large percentage of your payload is images.

The average webpage is almost 2mb, and 50% of that payload is images. Frequently these images are much larger than they need to be, especially for mobile devices. (You could manually resize and serve different sized images, but it’s simply impractical to manually optimize an image for every single device that might access your site.

3. A large site with hundreds or thousands of images.

If you’ve only got a handful of images to optimize, then the task is relatively easy. But with thousands of images, optimization and management challenges can quickly multiply the scale of your workload.

4. Your website is dynamic, or if you regularly find yourself adding new images.

Many commerce sites, for example, regularly add new products, and the accompanying images. And social media sites regularly handle huge quantities of user-generated images.

5. Your customer base is international.

CDNs maintain edge servers around the globe with cached images, close to the end user. If you have users spread out from New York to Singapore, from Milan to Cape Town, an Image CDN will ensure that your data has a shorter, and therefore speedier, journey to the user.

6. Your customers depend on mobile networks, especially mobile networks that are slow.

Many markets now find that over 50% of their visitors access sites using a mobile network. Unfortunately, many people are still not on 4G, let alone 5G networks. An image CDN tailors the file to supply the largest image needed, and nothing larger. The result is a faster, better mobile UX.