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?”
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:
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.
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.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/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
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.
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.