Hackernoon logoHow to Integrate an Image CDN in Your React Application by@jonarnes

How to Integrate an Image CDN in Your React Application

Author profile picture

@jonarnesJon Arne Sæterås

VP at ScientiaMobile

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:
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 demo app to demonstrate how effortless the integration is at the app level. It takes only 2 easy steps to get rolling - let’s get to it.

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
folder:
|-- public
  |-- images
    |-- pic_1.jpg
    |-- pic_2.jpg
    |-- pic_3.jpg
Since images are referenced directly (e.g. 
<img src=”images/pic_1.jpg” />
), the origin has to be set to the app’s live preview domain: https://l9dlm.csb.app/

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
), or come up with your own name. I did the latter, calling mine
codesandbox.io
- and got the
codesandbox.io.imgeng.in
hostname as a result. In any case, make sure the origin for the ImageEngine hostname is set correctly!
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
turned into
webp
, and sizes are not only optimized, but also correspond to the dimensions of the requesting device.
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.

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!