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 , or for the initial product launch. creating an abstraction in your code scaling a distributed data store choosing between web and mobile app format 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. . Yet, image optimization yields immense performance gains which immediately reflect in all important metrics, such as page load time and conversion rate. Markup complexity ramps up fairly fast 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 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. Image CDN 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 in this article as it uses a unique device detection algorithm that makes it truly stand out from the pack. ImageEngine 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 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. demo app 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 folder: public/images |-- public
  |-- images
    |-- pic_1.jpg
    |-- pic_2.jpg
    |-- pic_3.jpg Since images are referenced directly (e.g. ), the origin has to be set to the app’s live preview domain: <img src=”images/pic_1.jpg” /> 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 generated for you in the dashboard. You can either use the one assigned to you automatically after completing the signup (looks similar to ), or come up with your own name. I did the latter, calling mine - and got the hostname as a result. In any case, make sure the for the ImageEngine hostname is set correctly! custom `imgeng.in`hostname zyx123.cdn.imgeng.in codesandbox.io codesandbox.io.imgeng.in origin { ( 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! turned into , and sizes are not only optimized, but also correspond to the dimensions of the requesting device. 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 . For example, enabling 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 . list of best practices Client Hints directives Conclusion An 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. Image CDN Disclaimer: ImageEngine us used as an example in the above. I work with the company providing the ImageEngine Image CDN.

Blink

How to Keep Your e-Store Core Web Vitals Healthy with an Image CDN

Speed up Woocommerce with an Image CDN

My other place

Nominated for 2022 - HackerNoon Contributor of the Year - Django

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

How to Integrate an Image CDN in Your React Application

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Feature/Permission Policies Overview

5 Tips for Website Image Optimization

Automatic Image Optimization Using the Nuxt Image Component with imgix

Core Web Vitals: How To Improve To Rank Higher On Google And Succeed In Your Business

Feature/Permission Policies Overview

Feature/Permission Policies Overview

5 Tips for Website Image Optimization

Automatic Image Optimization Using the Nuxt Image Component with imgix

Core Web Vitals: How To Improve To Rank Higher On Google And Succeed In Your Business

Feature/Permission Policies Overview

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps