Preparing images for use on web pages

Spoilt for choice

There are a lot of editors for pictures and so we are going to use a free one called GIMP. GIMP stands for Gnu Image Manipulation Program. It is Open Source and there are versions for Windows, Linux and Apple computers and so it is Cross Platform. If you learn GIMP you are unlikely to need any other program for editing and processing images and there are many GIMP tutorials on You Tube and other places on the internet. What we show you here is a tiny part of what GIMP can do and it is more the basic idea of what to do and why that is important. Understand that and you can use any image software to prepare your images.

Preparing your image for use on the web

Firstly what are we aiming to achieve? We want to provide an image that will look good on the web but has the smallest possible file size so it will load quickly.

1. Make sure your image is in a folder on your computer that you can find easily. (In this case we are using another Wikipedia image)

2. Open your image file in your image editing software

This is the GIMP toolbox next to the image loaded into the software. Notice the highlighted tool in the third row down 3 from the end. It looks a little bit like a scalpel. This is the cropping tool and most image software will have one. With this tool you can select a section of the image and "crop" to that selection. This is like cutting that section of the image out of the main picture.

3. Select the area of interest with the cropping tool

Start with the pointer at the top left of the area you want to select and drag it diagonally down to the right bottom corner of the area you want to select. Different software will mark the area with different box styles but all will select in this basic way.

4. Press enter to cut out your area of interest

This will leave you with the part of the image you want to use.

5. Now scale the image to the size you want it to be.

We set the scale to width 499 pixels because Drupal limits the width of images to a maximum of 500 for uploads. What is a pixel? Click here to find out. The links next to the width and height box mean that if you change one the other will automatically change to make the picture stay the same shape. This is called the aspect ratio. It is how tall the picture is compared to how long it is. If you click on the chain you can change the sizes independently of each other.

The quality of the image can be adjusted in some very clever ways but this is beyond what we have time to do here. You can brighten, darken and sharpen images, remove blemishes ad so on.

Here are four versions of the image saved at different file sizes. The first image is from an 80k file the second a 40k file the third is a 20k and fourth 10k.

Finally, the last image is the same 10k image but presented at a smaller picture size. Same file size smaller picture. Smaller pictures improve the appearance of the image for a small file size. It is possible to make a very small picture called a thumbnail linked to a larger image. if we have 1000 images for a page we can make small thumbnails which give a good idea of what the image is like but clicking on that image then links to the full sized image. This means when the page loads it downloads just the small thumbnails, not 1000 full size image files. If the thumbnail file is 10k and the full sized images 100k the page will open ten times faste with the thumbnails. More of this later.

You should now realise that it is best to use the smallest image with the smallest file size that is appropriate for what you need. For example, if you have hundreds of images on a page in a photo album, using unnecessary big files will make the page load very much more slowly particularly on a slow connection.

Some basics about images

There are two ways of storing the data for images on computers. One is to store the picture as the data needed to produce tiny coloured dots called pixels. The smaller the dots and the closer they are together the clearer and sharper the image will look but the more data is needed. A typical computer screen has about 1000 dots horizontally and 1000 vertically but it varies quite a lot so let's keep round numbers that are about the right size. How many dots are there altogether on a computer screen that is 1000 dots vertically and 1000 dots horizontally? Lets try a simple example.

000

000

000

Three rows of three dots gives 9 dots, what would 4 rows of 4 give? What would 5 rows of 5 give?

So 1000 rows of 1000 is 1000 x 1000. This is 1000000 or 10^6. Remember the first lesson? We are into big numbers again!

That is 1 million pieces of information to store that one screen. That would also mean each dot was exactly the same and we want colour so we use 24 bits of colour information for each of those dots. That is 24 million bits of information. When you see a file with 100k next to it it means 100,000 bytes (actually it is a little bit more but we are talking round numbers - see if you can find out why it is a bit more). Each byte is 8 bits of information. This means our 24 million bits is actually 3 million bytes or 3 Megabytes. 3MB. So 24 Mb = 3 MB. small b for bits large B for bytes.

So the one thing we can be sure of is that big high quality images result in large files. Large files cause pages to slow down when they load and take up more storage space. Scanners and cameras can now produce images with a lot more dots than on a computer screen so files from scanners and to an extent cameras can be enormous. There is no real advantage if the image is only ever going to be viewed on a computer.

In practice we can make files smaller by compressing them. Imagine a picture with a big area of red in it. Let's represent that area by the letter R. Here is my red area with lot's of "R" pixels. RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR. Now let's say there are 100 Rs all the same in a line in my picture. I could simply store 100R in the file instead of all those Rs. In this example I need 4 characters instead of 100 to store that part of my image. The real system is more complicated but you can see from this that I can get back to my original picture from my compressed version, I just expand 100R to make 100 Rs in the same pattern. I save 96 characters without losing any valuable information. This is called lossless compression and this is how .png files work. PNG files can also have what is called transparency so that some parts of the picture can be see-through and we can put effects like fades on them. Even more compression can be achieved with lossy compression. This is compression that actually throws away some of the information. This is how .jpg files work. When a .jpg file is produced some information is lost and there is a trade off between image quality and size of file. Usually .jpgs can be made smaller than pngs but you can't do transparency and you lose some information once the file is compresses. .jpgs are the best way of presenting photographic images in web pages. pngs can be better for transparency and in lin art and diagrams.