Images are the new norm in online content, and maximizing the speed of images served to customers or webviewers is a recent business challenge that many e-commerce sites and advertising platforms attempt to solve a number of different ways. However, unless images are being served on a Content Delivery Network (CDN), the images served on a website will most likely load too slowly. This happens for many reasons. In this blog we will explain the critical role an image CDN provides to websites, how it’s different than an image management platform or regular CDN, and much more.
What are the critical elements of an image CDN?
When CDN’s were originally created they were built with the desktop in mind, and like many monolithic technologies this still holds true today. An image CDN intelligently knows the best possible version of an image that should be served. This means that it knows the screen size and resolution of the device, the DPI, as well as supported image formats. Taking it a step further, an image CDN should be able to dynamically render a master image to fit those specifications of the device.
How do different image CDNs use device detection?
Image management platforms or asset management tools are a great way for designers and developers to manage their images and get them ready for the web. Such tools can enable web designers and developers to do things like dynamic cropping based on facial recognition and ensure the creative looks visually appealing. What these platforms lack is the awareness of 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 creative. This is a time consuming process and is completely unnecessary today with solutions like an image CDN.
How is an image CDN different from asset management platform or a regular CDN?
Web designers and developers can use an image management platform behind an image CDN and get the best of both worlds. With this option they can make the creative tweaks necessary through their asset management platform and allow the image CDN to intelligently resize, compress, and encode their image based on the numerous devices viewing the content.
What should be expected from image compression? What is considered state-of-the-art?
Much can be said about image compression and how to implement it. There is lossy and lossless compression, and each image format excel in certain use cases. For an image CDN, though, the use case is well defined: Great visual quality with the lowest possible byte size for any browser or device. When this is achieved, the user gets a crisp, sharp, vivid, and fast loading image regardless if the pictures is a sunset, chart, drawing or a portrait.
With this specific use case (surfing the web) the state-of-the-art image CDN must be able to dynamically optimize the images. Image compression and optimization has many moving parts, but a simple example is file format conversion. WebP is a very efficient file format for most types of imagery, and will serve a much lower byte size than the visually equivalent jpeg or png. In a world where mobile access has tipped the 50% point, this kind of optimization is the very least to expect from an image CDN. Moreover, to accommodate mobile better, automatic resizing based on screen resolution should be a standard feature.
The techniques for great image compression has been around for a long time and are well documented. The key, however, to perfectly compress an image using these known algorithms, is the input to the algorithms. A state-of-the-art image CDN is able to detect and apply the optimal input to ensure a perfectly compressed and optimized image for any web capable device or browser.
What makes for a great CDN delivery?
As the web becomes more complex due to the explosion of devices, web designers and developers need a CDN that will make the process of serving images as seamless as possible. If they’re forced to manually create multiple versions of each image or if they have to write conditional code to account for the many different possible variations then web designers and developers are not making the best use of their time.