I have a weekly schedule that I’ve carefully designed so how I’m spending my time actually reflects my priorities in my business. Wednesdays are set aside as a day for learning new things. One of the things I’ve been working on recently has been automating image processing.
Why image processing matters
Proper image processing is (or should be) a consideration for all websites. Copyright watermarks, proper image sizing and basic photo editing go a long way in making a website look great and function well.
Combating Image Theft
Recently I’ve had a few clients that have come to me with issues with people stealing their images or other content from their sites. This can be an extremely frustrating game of ‘whack-a-mole’ and ultimately content that is made public online can’t be protected 100%. But there are many things that can be done to discourage content theft.
When it comes to images preventing unauthorized usage starts with how the image is handled even before loading it to the site. A simple watermark on the image can go a long way. So can re-sizing the image to be at the lowest resolution actually needed for the intended use. (There are other things that can be done to discourage content theft too, but that’s outside the scope of this post.)
Image sizing
Proper image sizing is also really important. Images on websites should be sized so that they are no larger than they need to be to look great. Any extra resolution means that they just take up extra storage space on the server and (worse) are slow to load.
Basic editing
A little basic editing like cropping an image to appropriate dimensions, or selecting the part of the image that is really wanted is also very useful.
Why automation matters
I work on a lot of websites and that means I’m dealing with photos from a lot of people. There are many processing steps that I could just not bother with and most people would not notice most of the time – a client won’t notice the lack of a copyright watermark until or unless their photo is stolen. I could shrug that off and say it’s unavoidable. Or I could give them the option of adding copyright watermarks and proactively discuss how to prevent issues. (I’m going with the second option here.)
Having automated photo processing steps mean that I can use best-practices every time and save myself time doing it. This also means I can now setup other people who run their own websites with processes to do this too.
The Process
When I started my first blog, I made a process in Photoshop that would do some batch processing to add a watermark and resize images, but it required opening Photoshop to run it and it never did a few of the things I wanted like renaming the images. I’ve also been running Linux a lot more lately and I’m not that interested in paying for Photoshop these days. I was working with an old version that’s just not something I want to stick with. Plus my process was ok for running one website but it wasn’t really what I needed for running several.
(ImageMagick which I’m using now runs on Mac, Linux & Windows which I find to be a huge plus for it.)
My latest goal was to write a script to run on my Linux computer that would do everything I needed start to finish. I wanted it to:
- Unzip a zipped folder of images (while extracting only the images and not the videos)
- Crop them to all be the same aspect ratio
- Resize them to a reasonable size for web images
- Add a watermark with copyright info
- Rename everything to be something like ‘name-1’, ‘name-2’, ‘name’3’, etc. based on a topic name for the folder
The naming scheme is a compromise. Specifically naming each image with it’s own descriptive name can be nice. But it’s also very time consuming. I’m happy to give a whole folder of images the same name with a number. For example a folder of images for my personal blog might get a base name like ‘white-sands-national-park’ if it’s about a trip to White Sands. This is much more efficient and at least I’m not uploading things with file names like 2394839.jpg. Things that don’t get renamed keep those obnoxious file names forever.
ImageMagick + Shell Script
ImageMagick proved to be an ideal tool to make all of this happen. My uses for it barely scratched the surface of what it does. I was able to use it for all of the processing I needed – including creating the .png to use for the copyright watermark. It did come with a little bit of a learning curve (most new technology does), but I’m incredibly pleased with it.
The challenges
Probably my biggest challenge getting everything to work was weird (to me) behavior with images that had orientation data stored with them. Some of the vertical images were not acting as I would expect. For example, I’d test if the height was greater than the width to try to see if it was a vertical image to determine how I wanted to crop the image, but I’d still end up with weird results. When applying the watermark to these images, it ended up on the side of the image as well.
I struggled with these issues for a while before finally finding the magic command to fix the issue:
mogrify -auto-orient file-nameOtherwise, I found the documentation and examples for ImageMagick to be very thorough and mostly easy to navigate. I am extremely happy with it and will continue using it and expanding on my collection of automated processes that use it.
Want help automating image processing for your own site? Contact me.