Supercharge your static assets with Uploadcare and Webpack in no time

or webpack loader with all the glory of Uploadcare CDN API

How many of your ideas were tossed away by limitations of your graphic content? Or how much time did you spend cropping/resizing/exporting images for retina-ready backgrounds, slideshows by hand, not to mention the time spent optimizing images and converting them? What was the last time ImageMagick and it’s wrappers worked from the first attempt?

How awesome would it be to need only one hi-res background for retina desktops in your git and then just let downscaling and cropping images for smaller display be handled for you, seamlessly, with no configuration?

Or perform image manipulations such as getting blurred/grayscale/mirrored/you-name-it versions of the static image in blink of an eye just by applying some string concatination without need to install ImageMagick on every developers machine, Travis, Heroku, keeping endless files in git or waiting for image processing on every deploy?..

Well, now you can

but first — disclaimer

Uploadcare CDN API is awesome. It allows you dynamically apply operations to uploaded files to do… well, almost anything. You could change file formats, resize images with one or two dimensions, crop, fill colour, change quality of the image, add overlay and watermark, blur, sharp and more! And all of this is done by chaining operations in the file URL.

You can take file like this:

https://ucarecdn.com/3284c6dc-e6df-46cb-bebc-79366daf2b54/

original png file uploaded and served as is

Scale-crop it, mirror, add watermark, sharpen, grayscale, convert image to best quality progressive jpg and serve it like this:

https://ucarecdn.com/3284c6dc-e6df-46cb-bebc-79366daf2b54/-/overlay/1f171e6e-d9ab-469d-9b6c-c13ba1431f5e/30%25x30%25/center/60%25/-/scale_crop/640x960/center/-/mirror/-/sharp/5/-/grayscale/-/format/jpg/-/quality/best/-/progressive/yes/

edited with simple declarative API and get progressive jpg with applied effects

Until now I have had no idea how to apply all this awesomeness to my static images, fonts, pdf’s and other assets that every web developer (with react-native — some mobile developers) has to serve to the user.

Now, thanks to Webpack, I do.

Webpack is awesome. It’s allows you to write loaders in very, very simple way: it is just a function that takes Buffer or a String, makes some calculation or mutation and returns Buffer or a String.

So we did just that.

How we did it (short version)

So, meet uploadcare-loader. It utilises Webpack loader API to take your static image (or any other file for that matter) and return a module which exports string containing… ugh. Even I get bored.

Once again.

So, meet uploadcare-loader. It allows you to

and

Note: thanks to url() syntax in .css and .styl/.less/.scss, you couldn’t use concatenation like in .js file, so in order to add CDN operations to url() you’ll have to use webpack query string — ?operations=/-/resize/600x/-/…/. It’s may be a little mess, but it’s work as you would expect.

Awesome, right?

How to start using this holy grail of image handling? Well, obviously you should get an Uploadcare account to acquire API keys, but for demo purposes you could use demopublickey/demoprivatekey which exists exactly for, well, demo purposes.

Next you should install uploadcare-loader:

npm install --save uploadcare-loader

And in your webpack config file you probably have something like:

Replace it with

And have your fun. You could read more on query config here.

Yes, but why?

Our CTO at Whitescape is a slightly opposed to the whole idea of using an external service to handle static assets which already are in our git. If you are a little bit like him, here some use cases for you to consider:

1. It’s on CDN, not your local server! It’s all done seamlessly and without breaking any productions/staging/development environment. This alone may be good enough to try.
2. Dead simple responsive images from one hi-res source. Forget Photoshop and Sketch export, forget device proportions, forget endless screen sizes you want to optimise images for — you always could do it later in your css file.
3. Forget manually cropping and resizing images to fit into slideshow (worse — responsive slideshow!) your designer yet again was too lazy to do himself.
4. Some of your assets are png and some of them are jpg (and not necessarily progressive), but all you want is to serve optimised progressive jpg’s? Forget manually converting them, optimising them and writing gulp tasks. Just add /-/format/jpg/-/quality/best/-/progressive/yes/ after the requre() call and you’re good to go.
5. Do you want the browser to show this particular pdf file in new tab?If so, just add /inline/yes/ . Want it to be downloaded as file? Add /inline/no/. Did you even know you have this level of control over browser behaviour?
6. There is a whole array of amazing ideas/components and widgets you were imagining, but could not justify with all that ImageMagick setup:

• Lazy loading images with blured small preview, loading hi-res as user scrolls to it (yes, I mean Medium — https://jmperezperez.com/medium-image-progressive-loading-placeholder/)? Just give it 15 minutes.
• Responsive Picture element with all this crazy syntax? Yeah, 10 minutes and it’s done. You now have no excuse for not having gorgeous retina images on your website!
• Dynamic watermarks with any local image as overlay? Responsive watermarks? These are not a problem anymore!
• Any other idea you had toss away because of the limitations of your graphic content.

We already using it in production for two of our projects and it’s never been easier and more fun.

Have any new ideas about how to use it? Give us a tip, we will add it to our use-cases/components collection.