Home Resources diy image editing

do-it-yourself image editing

One way to save money on your web site design is to edit your own graphics, and it can be a lot easier than it probably sounds. I'm not suggesting that you become a DIY graphic artist; the last thing you need is an amateur-designed web site. I'm only talking about equipping yourself with the skills and the tools to prepare your own images for the web.

The first thing you need to know is that images on a professionally-designed web site have a few fairly common-sense constraints imposed upon them:

  1. they have to look good
  2. they have to be the right width and height for the job, i.e. the image size, measured in pixels, has to be right for the page
  3. not everyone has a fast broadband connection so we also want to have our image file size, measured in bytes, low enough to download at a reasonable speed via a really slowwww connection

When all of these conditions are met, we can describe the images as being web-ready. You can either pay your designer to do the job for you or you can read on.

Let's start out with an image that came straight from your digital camera. Let's say it is 4500 pixels wide and 3000 pixels in height (should make a nice print). It's not going to look so great on an old computer with a screen resolution of 800x600, i.e. 800 pixels wide by 600 pixels in height. We need to resize it and get it down to something presentable on-screen, let's say, e.g., 400x300 pixels. (I'll get to how we can easily do this).

We also need to think about the image file size. It started out at a few megabytes and, as a by-product of having reduced its width and height, the image file size is maybe down to a few hundred kilobytes - still far to large a file size for a slow connection. We need to optimize it, i.e. reduce its file size without any visible loss of image quality. We can now call it web-ready.

We can look at the how-to while introducing another really useful process: batch-processing.

batch processing of images

If you have an ecommerce web site, you may have to resize and optimize hundreds, possibly thousands of images. It would be an extremely time-consuming business if there was no such thing as batch-processing. First of all, let's not lose sight of the fact that, at this point, all we want to do is maybe crop, resize and optimize. Go to www.faststone.org and download a copy of FastStone Photo Resizer. (At time of writing, the licence for commercial use costs about £10). You can now batch-process any amount of images, reducing their size by a percentage or to a set height or width (while maintaining the original proportions). After installing the programme, you'll find the resize options under the Batch Convert tab (tick the box beside Use Advanced Options, then click on the button that appears).


Full-feature image manipulation

If you want to create new images or get really creative with your image processing, you'll need a full-feature image-manipulating programme. Most high-quality image editors will probably seem fairly expensive, especially if you don't count them among the tools of your trade. If you think on the skill, the ingenuity and the time involved in creating a sophisticated programme for image editing, you can understand the price. As with most of the top software currently available, there is, however, an open-source alternative to shelling out a few hundred pounds for a commercial product. Following years of development and refinement, the GIMP is available to all at absolutely no cost whatsoever.

Go to www.gimp.org and follow the download link to get the Windows Installer (not a great idea if you have a Mac, but I've yet to meet a Mac owner who could take any kind of advice, except from another Mac owner - lol - so I'm probably safe enough). N.B. make sure you download the Help programme, too. Once you've installed the programme and the Help programme, take plenty of time to get familiar with it and discover something of its potential.