Getting images ready for Your Website

Article Written by Scott McPherson from Tempus4 Design

There's no "dark art" to getting a picture ready for your website. in fact it's quite simple. Just follow the next few sections and you'll be churning out pictures for your site like a Pro.

How big is a Pixel?

Before you start making web ready pics you need to know the size of the area you're working with. This is important since most pics scanned or taken on digital cameras are way too big and will take up to 3 or 4 times the size of your computer screen. not much fun for your website visitors as they'll also wait 10 minutes for this huge picture to appear.

Now, you've probably been given some dimensions of the area you have to work with which is measured in pixels. The size of your screen and your pictures is measured in a size called pixels.

Does it really matter how big a pixel is? Well, yes and no.

A pixel is for your computer screen what a centimetre is for say fabric on a roll. You don't need to understand the specifics of what a pixel is, but what its relative size is to your screen. Most computer screens measure about 800 to 1000 pixels wide.

This should give you a good idea of the size of the area you need to make pictures for. This is particularly important as if you make a picture that's too big for the area you might find your webpage doing some strange things. not to mention it being too wide or high for the screen.

Here's my picture, now what?

OK, now we'll assume here that you've been able to get your pic from your camera or scanner to your computer.

The first thing you need to do is to find a program on your computer that will be able to open your pic, then resize it and save.

Option 1: Most of you will be on a Microsoft Windows computer so we'll use an application that comes with it called Paint. The general concept for using most image editing applications is the same so hopefully if you don't have this then you may have another application that can do the same thing.

1. Firstly start Paint and then open the pic (file-> open->your pic) that you want to prepare for your site.
2. Now find out the size of your pic in pixels so we can work out how much smaller we need to make it. To find this (image-> attributes) and then note the percentage you'll need to reduce your image. i.e. If your final image is meant to be 250 pixels wide and the original dimension is 1000 then you'll need to reduce your pic to 25% of its original size.
3. Next step is to resize your pic (image-> stretch/skew) and following this example you would put 25% stretch in both the horizontal and vertical to get an image that's 250 pixels wide.
4. Now we save your pic using a format that will work on the internet. Paint has two option for this; JPEG or GIF format. Most of the time you'll choose JPEG because it's much better for photos but if your picture is something like a cartoon with large sections of block colours then a GIF may work better.

Congratulations! Now you're ready to use your image on the internet.

Option 2: If you don't want to mess with all this image editing stuff then let us do it for you. We're Pro's at this kind of thing and we have applications that not only resize your image but make it faster to download so your web pages open quicker. Just email us the pictures and let us know the size you need them to be in pixels. We have a minimum fee of $35 for this work and we find we rarely exceed this minimum for an average batch of pictures.

Option 3: Still want to do it yourself? If you don't have Paint or you want some more functionality then there are plenty of cheap image editing applications available. One that is mainly aimed at image resizing and optimizing (making it load faster) is ReaCompressor from http://www.reasoft.com/products/reacompressor/ which is fairly basic but covers what you need whilst making very good quality optimized images and being quite cheap. The basic process for creating a JPEG is as follows;

1. Firstly start ReaCompressor and then open the pic (file-> open->your pic) you want to prepare for your site.
2. Next step is to resize your pic (original image-> change size) and you should get something like this;

If you keep the "Keep aspect ratio" ticked then all you need to do is add your height or width and the application will resize it proportionally.

3. The default setting for optimizing is JPEG but if this isn't loaded on your screen then choose (view-> JPG image). From here you can adjust the quality and smooth factor to get the optimal choice in fast loading image compared to high quality. After you adjust the settings then press the "Create JPG Image" to see the results of what you will see in the final version. Note that the bottom of the window shows the image size so you can use this as a gauge of how successful your adjustments are.
4. Now once you are happy simply save your pic by clicking the "Save the result to file." button.

Congratulations! Now you're ready to use your image on the internet.