How to Integrate an Image CDN in Your React Application

One of the most crucial maxims that I internalized during my career in web engineering is that every technical decision embodies tradeoffs. No matter the benefits, you’ll always face certain costs and restrictions: be it creating an abstraction in your code, scaling a distributed data store or choosing between web and mobile app format for the initial product launch.

Responsive images are hardly an exception. On a quest to deliver the best possible experience to your users, you’ll have to:

• Account for combinations of various screen dimensions and pixel densities;
• Experiment with quality and compression;
• Supply several image file formats;
• Implement lazy-loading;
• And, ideally, pay attention to users’ network environment and respect their data saving preferences.

Finding the proper balance between picture’s sharpness and weight for every occasion on your own could feel daunting. Markup complexity ramps up fairly fast. Yet, image optimization yields immense performance gains which immediately reflect in all important metrics, such as page load time and conversion rate.

This begs the question:

“How to tackle that complexity without sacrificing too much time and money?”

We all could use a helping hand from time to time

A specialized third-party service called an Image CDN can help you drastically speed up your image delivery. It’s geared to deliver efficient images to visitors of your website all around the world by leveraging a global network of servers.

The promise of such a system is to tailor each image to a user’s specific requirements on the fly, ensuring a seamless experience and effortless scaling.

When using an Image CDN, you typically include only a single, high-resolution version of every image on your website. Every other aspect is handled for you, automatically:

• Switching resolution, scaling, and cropping;
• Adjusting compression while maintaining quality;
• Selecting the most efficient image file format;
• Serving subsequent requests faster (98% cache hit rate);

Quite a few companies are offering automated image optimization. I’d like to focus on ImageEngine in this article as it uses a unique device detection algorithm that makes it truly stand out from the pack.

Integrating ImageEngine Into Your Website

If you’d like to follow along, sign up for a free trial account before moving on. After signing up for a trial account, you’ll get access to a control panel where you can configure ImageEngine for your app.

I’ve built a

Step 1. Point ImageEngine To The Images

With ImageEngine, you don’t have to re-upload your images - everything stays in place. You only have to point the service to where they are located (a website’s live domain, an S3 bucket, etc.) so it knows where to get the images from. This is done by setting an origin.

If you take a look at a demo project's structure, you’ll see that all the pictures sit inside

public/images

|-- public
  |-- images
    |-- pic_1.jpg
    |-- pic_2.jpg
    |-- pic_3.jpg

Since images are referenced directly (e.g. 

<img src=”images/pic_1.jpg” />

Step 2. Proxy Image Requests

Believe it or not, we are almost done! The last thing remaining is to prepend existing image paths with a custom `imgeng.in`hostname generated for you in the dashboard. You can either use the one assigned to you automatically after completing the signup (looks similar to

zyx123.cdn.imgeng.in

codesandbox.io

codesandbox.io.imgeng.in

export default function Image({ src, alt, ...other }) {
  return (
    <img
      src={`//codesandbox.io.imgeng.in/${src}`}
      alt={alt}
      {...other}
    />
  )
}

Lo and behold - now your image delivery is supercharged!

jpg

webp

Galaxy S5 simulation, no throttling

Laptop with HiDPI screen

Step 3 (optional). Best Practices And Customization

To get the most out of ImageEngine, consider going through their list of best practices. For example, enabling Client Hints allows to take into account user’s data saving preferences in Blink-based browsers. In case you need to tweak your images (resizing, cropping, etc.), ImageEngine lets you apply customizations via special directives.

Conclusion

An Image CDN is one of those “never look back” tools. Paying a fee for a well-managed service which deals  with a quite hairy problem (responsive images) on your behalf makes quite a lot of sense to me as a developer. Integration is hassle-free and you can sleep well at night knowing that no end user will ever be left high and dry.

Disclaimer: ImageEngine us used as an example in the above. I work with the company providing the ImageEngine Image CDN.