What is an Image CDN?
Posted February 20, 2020
A content delivery network (CDN) is a global network of servers that can optimize web performance by utilizing the closest available node to the user, for faster transference of assets. Image CDNs differ from the standard content delivery network in a number of ways. While most CDNs deliver images via points of presence (POPs) to edge servers, image CDNs do more than just send images at the edge. Image CDNs decrease image payload and deliver the correct image tailored to each device, all while sending images to the edge of a network.
Photo by Christina @ wocintechchat.com on Unsplash
An image CDN consists of three parts:
1. Device Detection
Device detection is an image CDN’s first and most critical step. It detects the requesting device model and all capabilities that impact image size and quality. This includes operating system version, screen pixel density, screen resolution, and support for next-generation image and video file formats.
2. Image Optimization
An image CDN will leverage the device detection parameters to automatically resize, compress and convert large original images into optimized images with next-generation file formats. These optimized images are tailored specifically to a requesting device. Frequently, an image CDN will reduce the image payload by up to 80%.
3. Global Content Delivery Network (CDN)
An image CDN has edge servers strategically positioned around the globe. These edge servers detect devices and cache optimized images. When a similar device requests an image again, the image CDN responds immediately with the already-cached optimized image. By pushing optimized images closer to requesting customers with logic to deliver immediately from cache, an image CDN can often provide a 50% faster web page download time.
How is an Image CDN Different from a Traditional CDN?
Photo by NASA on Unsplash
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 Mortorola 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.
What is a CDN Cache?
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.
How is an Image CDN Different from an Asset Management Platform?
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.
Does an Image CDN Impact Image Quality?
Photo by pine watt on Unsplash
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 process 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.
Does an Image CDN use Next Generation File Formats?
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 file 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 file 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%.
Can an Image CDN work with my Existing CDN?
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.
How will an Image CDN Improve my Performance Metrics?
There are many ways to measure the success of an image CDN. A balanced scorecard would suggest both operational and business 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.
Photo by Austin Distel on Unsplash
- 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.
How Easy is Image CDN Integration?
Photo by Ryoji Iwata on Unsplash
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.
When Should an image CDN be Considered?
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.