All About Images and the Web

I’ve written several ‘tutorials’ in my years as a WordPress geek but, until recently, it never occurred to me that it would be beneficial to everybody else (and easier on me) to just throw them out here instead of writing up a customized email for the client over and over again!

I’ve had the pleasure of coding up a design for forget.me.knot.weddings (beautiful site – AV endorsed!) and, as a result, want to share some tips and tricks for editing images. (A part two – using them in WordPress – will be coming soon!)

This is actually the second tutorial I’ve done up in recent months (no clue what happened to all my originals) but I promise the first will be posted as soon as I get it edited!

One of the absolute first things to do when putting your images online is to make sure they are even ready to go online. Whether it’s something you’re designing yourself, a bunch of pictures for your family, or any of a number of other things, there are some basic standards that will save you a lot of headaches in the long run!

Formatting.

There are two file formats that are pretty much standard on the web these days: JPG and PNG.

JPGs are most well known as the result of digital cameras. If you have full-color, large images, JPG is the way to go.

PNGs are best used if an image has transparency and isn’t large. If you don’t know what transparency is, chances are pretty good you’re safe in sticking with JPG.

If you’re given an option for compression (or quality) and you’re posting for the web, 70 is standard. If it’s a simpler image (like a line drawing or logo), the quality can be lowered without affecting the image itself. I’ve personally gone as low as 40 with no troubles.

And while 300dpi is good for print, 72 is about the best you’ll get on the computer. Anything over that is unnecessary and a waste of space (and bandwidth/load time).

Image editors.

A good image editor is most likely to give you the options you’ll need. Personally, I have (in no particular order): Corel PaintShop (a much older version but they’re still reasonably priced), Adobe Photoshop (just…blech), IfranView (pretty good and free with neat batch convert/rename functions – a must-have), and last but certainly not least, GIMP. I even use Windows Photo Gallery (or whatever it’s called on Vista – the default picture viewer).

PaintShop, Photoshop, and GIMP are editors of the type that you’ll need if you’re designing a graphic or plan to do a lot of editing to a photo (editing colors, adding text, erasing things, etc). They also provide a lot of capabilities that the other programs I’ve mentioned have but it’s actually easier to do some tasks in these other programs. There are some benefits though. PaintShop has a neat ‘one step’ photo fixer that does a pretty good job, Photoshop – as much as I hate it – has its own merits and is the industry standard for that exact reason – and GIMP is all that because it’s ALMOST as good as Photoshop but it’s FREE.

If you’re just resizing or cropping and rotating…simple stuff…IfranView and the versions of image viewers that have been released with Vista and XP are really all you need. Given actual graphic design is a little beyond the scope of this tutorial, I’m going to cover the basic stuff.

Processing.

I’m a photographer so, when I’m first starting with a batch of pictures, I use Photo Gallery. I’ll open up the first picture in the folder and flip through every image, deleting ones I don’t want and cropping the rest where needed. Simply pressing the left and right arrows will navigate through the pictures. Ctrl+ rotate the images when needed. The crop tool can be found under ‘Fix.’ And any changes I make to that particular image are saved as soon as I push the right arrow to go to the next image. A few more passes will allow me to further narrow the number of images (I end up with hundreds sometimes) and step one is complete.

Next up – and really the first step if you’ve got ready images – I make a copy (VERY IMPORTANT!!!) of the image folder and place it somewhere else so my originals are left in tact should I screw something up (that happens a lot – heh).

Once I’m sure I’m working with copies, I open up IfranView Thumbnails (look for the cute little panda) and get down to the real business:

On the left, there’s a navigational tree that you can use to open the folder your pictures are in. Once there, you can select all the pictures (say, 1 through 10) using Ctrl+A, select pictures 2 through 5 by clicking on 2, holding down shift, and clicking on five OR you can hold down Ctrl and click to choose 1, 3, and 9. Pressing B will bring up the batch conversion dialog box. Now in most situations, I want to convert and rename, but you can either convert or rename as well.

Since I’ve chosen to convert/rename both options below are available to me.

Batch conversion settings:

Make sure JPG is selected and click ‘options.’ Here, you’ll find the quality level I mentioned earlier. Set to 70 and click OK.

Check the box for Use advanced settings and click that button.

Resize (NOT CROP) will resize the images. How large you will want your images will depend, largely, on where they’ll be being used. Using the case of FMK, the largest their site will display is 655px. Anything over 655px wide won’t display (will be sized to fit) but because it’s such a large file, all that extra data gets ‘called’ when someone visits the site. That can eat away at bandwidth, especially for someone who posts lots of pictures. (And if I’ve designed your theme for you, I will have told you how big your pictures can be. If I forgot – ask me! LOL) But I digress!

Just setting ONE option (height or width) is best, lest you end up with funny looking pictures. In this case, I’d put 655 under width and move on.

Further down under the resize, there’s a box that says ‘preserve aspect ratio.’ Make sure it’s checked and look over to the bottom right under miscellaneous. If you’re doing JUST a conversion, you can overwrite existing files. If you’re doing a conversion/rename, you can delete the files after conversion. For posterity’s sake (and some benefit in copyright protection) I save the new images with the original date/time. OK will get us back to the main screen for further tweaking.

Batch rename settings:

My format is usually [date]-[venue]-[band] but you can pick whatever naming convention works for you. (And having one will really help you keep track of everything!) Clicking Options will allow you to see what’s available and allow you to set the name. (02182009-avenuea-crackmonkeys##)

Once you’re satisfied, click OK and look right below the rename section. MAKE SURE you click the Use current ‘look in’ directory button!

If you’ve made it this far, congratulations! You’re ready to ‘Start Batch’ and, with any luck, the output is as you expected it to be! (And if it’s not, you’re not allowed to blame me!)