Dave Taylor

Resizing Images, Sort Of

What are shell script programmers to do when they finds themselves constantly scaling image dimensions for their blogs? Write a script to automate the process, of course!

This might be a peculiarity of how I work with the Web, taking screenshots and then wanting to scale them to fit my page (especially when they're full-screen images), but I find that I spend a lot of time calculating how to reduce and scale images down evenly.

For example, I might take a full-size screen capture of the window within which I'm writing this particular column just to find that it's 722 x 719 pixels across and down, respectively. But if I were to include it on my Weblog, I would want to reduce it down to no more than 600 pixels so that it doesn't break my site layout.

I actually could reduce the image within the screen capture application or use a secondary graphical app, but it turns out that Web browsers can scale images up or down based on explicit

Instead, what I'd really like is a utility that can figure out the current height and width of an image and then automatically scale it to the new value I desire based on a scaling factor.

"height" and "width" attributes. For example, let's say that the doc window is called edit.png. Then, I could include the image on a Web page with:

<img src="edit.png" alt="editing a file" />

and it would work fine. To scale, it's easy, simply add those height and width parameters. To make it match the image itself, I'd use:

<img src="edit.png" alt="editing" height="719" width="722" />

However, as I said, it turns out that you actually can calculate different values, and the browser will scale it to match. To reduce the image 50%, for example, I would tweak it to read:

<img src="edit.png" alt="editing" height="359" width="361" />

So that's what I do on my site, and frankly, it's a pain.

Instead, what I'd really like is a utility that can figure out the current height and width of an image and then automatically scale it to the new value I desire based on a scaling factor. That's what we'll dig into for this column.

Calculating Image Size

There are some terrific image manipulation packages available in Linux, most notably ImageMagick, but we don't need anything that fancy because the pedestrian, old, undersung file command can do the job for us. I'm going to be looking at only PNG (progressive network graphic) files, as those are very much the best for most Web uses, but it's worth noting that many Linux file commands have a harder time calculating image dimensions for JPEG images. Here's an example:

$ file edit.png edit.png: PNG image data, 722 x 719, 8-bit/color RGB, non-interlaced

That's quite a bit of information actually, including the key elements—the dimensions of the image file itself. In this case, it's width x height, so 722 is the width, in pixels, and 719 is the height. These can be extracted from the output in a variety of ways, but the easiest is to use cut:

width="$(file $filename | cut -f5 -d\ )" height="$(file $filename | cut -f7 -d\ )"

If you try this, however, you'll find that the height is wrong. It has a trailing comma because cut is using spaces as the delimiter (which is what the weird-looking -d\ is specifying. The backslash escapes the shell interpreting the space as an arg delimiter. When you type this in, you'll want a space after the backslash and before the closing parenthesis for just that reason. It's fixable though, by using sed:

Now that we have numeric values, how do we scale them automatically? I like using the bc binary calculator, even though its interface is so crufty. Multiplying 722 by 0.50 (which is, of course, 50%), is done like this:

Was this article helpful?

0 0
Photoshop CS Mastery

Photoshop CS Mastery

Artists, photographers, graphic artists and designers. In fact anyone needing a top-notch solution for picture management and editing. Set Your Photographic Creativity Free. Master Adobe Photoshop Once and For All - Create Flawless, Dramatic Images Using The Tools The Professionals Choose. Get My Video Tutorials and Retain More Information About Adobe Photoshop.

Get My Free Videos


Post a comment