It’s a kind of ImageMagick®

Frontend development involves managing a variety of assets, be they stylesheets, javascript files, images, video, sound, and whatever else a particular project may have. This post will deal with one of these: images. Specifically, how developers can do their part in dealing with required changes to these assets without burdening designers with trivial tasks.

I believe I am not alone when I say that my frontend development skills do not extend to mastery of tools such as Photoshop, GIMP, or any similar image manipulation programs. Many of you may take this as a given, after all, these are tools more commonly associated with UI/UX designers, and the typical software/app development team knows that those who envision, who design (meaning to conceive of or plan) a product, and those who are tasked with bringing the idea to life are rarely one and the same. The designer and the developer. The architect and the engineer. The knowledge and effort required to fully do just one of these tasks — and do it well, of course — is understood to need people who have specialised in one of these fields. There are scant few DaVinci’s in this world.

None of what I have said so far will come as a surprise to anyone working in web development, but I feel it is important to establish some context before properly diving into the actual subject of this post (at least for those who have managed to stop rolling their eyes at the pun in the title).

Asset Changes and You

In the typical workflow for a web project, the designer sketches all the necessary screens, plans out user interactions, etc. then shares it with the developer that is tasked with bringing their vision to life providing all necessary assets. If this accurately describes all your projects, you can probably skip this post.

In my experience, design work does not necessarily end once code starts being written, it is an iterative process where client and organisational constraints often dictate the work rate. Developers often have to start work with unfinished design specs be they wireframes, rough drafts, or simply “subject to change” (synonymous with “100% certain to change”).

If design itself is not final, and there can be several reasons for it to change — the client may request it, or when developing there was a particular use case that was not taken into account and adjustments are required, among others — it stands to reason that the assets themselves are also under the same threat of change. So what does a developer do when he needs some changes to an image asset? Let’s say, for example, we need a transparent background, what can they do? If the design team is available, you can ask them, they do the work for you, and provide the new asset… However, this is not always an option.

Ask not what designers can do for you

The asset changes a developer may request are not always guaranteed to be the final iteration of what they need. As development continues, especially early on, it may turn out that the slightly smaller size we requested was actually a bit too small, the background colour changed, minor asset change requests like these could bog down the design team in the prototyping and early development stages.

The developer, wishing to save on the overhead of constantly waiting for the new assets (and not wanting to wear the designer’s patience thin), decides to google “resize image online”, or something to that effect, and use a variety of image editing tools available in-browser. But these are often cumbersome to use, or require constant uploading and downloading assets.

By your command

To this end, I would like to share with you a tool that I often use to do these sort of tasks: ImageMagick. It is an incredibly powerful tool that allows you to perform a wide array of image manipulation actions.

Use ImageMagick® to create, edit, compose, or convert bitmap images. It can read and write images in a variety of formats (over 200) including PNG, JPEG, GIF, HEIC, TIFF, DPX, EXR, WebP, Postscript, PDF, and SVG. Use ImageMagick to resize, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

Best of all, and something that fellow developers will appreciate, it is easy to use right from the command line.

A Gambit of tricks

Setting up ImageMagick is as simple as installing it, I reccommend Homebrew to do it:

brew install imagemagick

After which you should be ready to use it.

I won’t go into too much depth on everything that you can achieve with ImageMagick (nor would I be able to, as it would be akin to writing a post on everything you can do with Photoshop) but there are a few basic common tasks that I would like to demonstrate here, to illustrate how simple it is to use and how it can improve your workflow.

Format conversion

Changing a file type is as simple as:

convert my-image.jpg my-image.png

This will take your my-image.jpg file and convert it to PNG format.

Resizing

Let’s say we want to reduce size (image dimensions, not file size) by 50%:

convert my-image.jpg -resize 50% my-image-resized.jpg

Or maybe we have a specific size in mind

convert my-image.jpg -size 320x320 my-image-resized.jpg

Transparency

Sometimes we have a JPEG with white background, but we need the same image with a transparent background, that can be pretty tough to find a good online tool to do for those of us unfamiliar with more complex image editing tools. Not so with ImageMagick:

convert image.jpeg -transparent white image.png

But wait, there’s some slight artefacting around the objects in the image now, or the background isn’t always perfectly white. ImageMagick has you covered:

convert image.jpeg -fuzz 5% -transparent white image.png

The fuzz flag tells it have some variance in what is considered “white”.

All this and so much more

ImageMagick allows you to do all these and so, so much more. If you want to learn more practical examples, I recommend looking into the site and community and check out all the powerful tools that are at your disposal with ImageMagick. They have excellent tutorials on the API usage, or more dedicated to specific toolsets, like the convert one (the examples above are only a tiny subset of what one among numerous tools packed in ImageMagick can achieve).

But that’s not all, for web developers it can be helpful to familiarise yourself with the available API, even if you don’t plan on using the command line tools. There are common tools used for server-side image processing that rely on ImageMagick (or a subset of it) to do things like image conversion, generating multiple image sizes, and much more. Tools like Paperclip, or the more recent Rails’ own ActiveStorage rely on it for image processing, so if you ever need to use any of these you will likely need to learn how to write ImageMagick commands.

To be clear, this is in no way intended to make the developer replace the valuable work a designer does in providing, adjusting and designing image assets for a project. The opposite in fact, it is intended to empower developers to prototype small changes easily and free up designers to focus on their more intricate tasks.

I’ll end this as succinctly as I can. ImageMagick has simplified a lot of the hassle in early development when it comes to dealing with asset changes, and made me more aware of the inner workings of image processing. So the next time you need some asset changes, consider trying it out before asking your designer to change the same image for the umpteenth time this week.

Have you ever used ImageMagick or a similar tool? How do you handle image asset changes in development? Let me know in the comments.

I have found my place to work in an environment that gives me both the support to perform at my best, and allows me the flexibility to pursue my own improvement, at Runtime Revolution.