Mobile optimization 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.
What is an Image CDN?
An image CDN decreases image payload, delivers images tailored exactly to each requesting device, and instantly sends images from the edge of the network. The result is faster page loading, higher SEO ranking, and better UX.
Detect Mobile Devices
An image CDN will leverage the device’s parameters to automatically resize, compress and convert large original images into optimized images with next-generation file formats, like WebP and AVIF. Frequently, an image CDN like ImageEngine will reduce the image payload by up to 80%.
Deliver by CDN
Image CDNs like ImageEngine have edge servers strategically positioned around the globe. By pushing optimized images closer to requesting customers with logic to deliver immediately from cache, often providing a 50% faster web page download time than traditional CDNs.
How to Start Using ImageEngine
About Image CDNs
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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.