|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for sites covering:- |
|
|
The Royal Air Force - Gliding - Disability - Greyhounds - Online quizzes - Web site design... |
|
|
|
|
|
|
|
Working with photos & graphics |
|||||||||
|
GIF. stands for Graphical Interchange Format. This is a picture made up of 256 colours or less. Since photographs usually have many more colours in them than that, the GIF format is not quite so suitable for them. Photographs can be saved and look reasonably good as GIFs but they may have a bit of a 'flat' look because of the 256 colour limitation. However, it is a good file format for computer graphics. Images saved in this format can be animated and/or be given transparent areas. Although GIF graphics have a range of 256 colours in them, it is possible to further reduce that number to just those needed for its proper display. This is relevant to keeping file sizes down and is called optimising a graphic. Why optimise? Optimising graphics means smaller file sizes. Smaller the file sizes means faster loading graphics. A web page containing optimised GIFs will display more quickly than those where the graphics are put in regardless. Quite often, the reason why many web sites take ages to display is because little consideration has been given to the photo and graphic file sizes that go to make up a page. Such pages are said to be 'graphically heavy'. This might be acceptable for those with fast Internet connections but is bad news for those still connecting via a 56k modem. Taking the trouble to optimise graphics means that people don't get impatient with waiting for web pages to open. There have even been one or two compliments regarding this from those who have stumbled across our site, so it appears that fussiness in this respect makes a difference. How's it done? The number of colours in a GIF image can be reduced using a good art program. In Corel Photo-Paint a preview Window shows the original picture quality of an image compared to the effect that reducing the number of colours would have on it. You cannot choose or see which colours are removed. There are just up and down arrows for adjusting the number of colours. The procedure is to gradually reduce the number from 256 until the graphic's quality begins to deteriorate. When this starts to happen the number of colours should be increased by one or two until the graphic looks OK again.
Many GIF images can have the number of colours reduced without any effect on how the graphic looks. A good way to think of it is as though a GIF image has a 'library' of 256 colours. However, it might only need 20 of those for proper display, so there would be no point in keeping the other 236 of them on the shelves. They just increase the file size of the graphic. There are graphics 'L&Ms Pastimes Website' that have as little as 4 colours in them, so there would be no reason to save them with a colour range numbering 256. If they had been, 252 of the colours would have been dead weight and only served to increase file size. The 'Computers' button to the right has 20 colours in it. On the
face of it one would think there are only two there, i.e. The graphic on the right below is an animated gif. It is not one single picture but two. One 'TW' has a star added to it and the other 'TW' doesn't. Both graphics have been combined to form a two frame 'animated gif'. Of course, having two frames doubles the file size. Three would have tripled it ...and so on.
Why the green bits? The flashing TW image above is a transparent animated gif. A transparent gif (animated or not) is a graphic where one colour can be made 'invisible'. This is useful when it is desired that only a particular part of an image is displayed on a web page. For instance, perhaps just a shape of some kind is required to show on the page but not the background it sits on. It is possible, with a GIF graphic, to make a background invisible so that the page shows through it. This is done by filling the image background with a colour totally different from any in the foreground. In the above image, the colour chosen is bright green since nowhere in the TW part of the graphic has this colour. An option is given to make the green transparent when saving the GIF image to disk. These bits are not seen in the final image because they become invisible when they are viewed in a web page. Any picture that moves about on a web page without any visible background other than the page is likely to be a transparent animated gif.
A JPEG file uses a compression method for file size optimisation. However, if it is compressed too much then picture quality will suffer. Therefore a balance between file size and quality must be struck. An exact amount of compression can be specified using a good art/photo editing program. Less expensive photo editing programs will just give the option of saving the photograph at low, medium, or high quality. This is where fixed amounts of compression can be applied to the image. Medium quality is perfectly adequate for web display. High quality would be best only if you want to print a photograph. There's no reason why you can't save two copies of a photograph under slightly different file names, one copy for web display the other for printing. Printing is where another file format comes into play. Although high quality jpegs will give give a good quality print the .TIFF file format is better. It remains the same quality no matter how much it is edited and saved. Jpegs can deteriorate if they are altered in any way and the re-saved. TIFF's have a much larger file size but this is not important for photographs or graphics that are only to be saved on the computer hard disk for printing or viewing. However, if you want to share a picture with a friend by sending it in an e-mail attachment it is normally best to send it in the jpeg file format. This has a greatly reduced the file size compared to a TIFF. Less file size means faster upload and download times. Sometimes, there is nothing worse than downloading a photograph with a large file size that takes about 20 minutes to complete. There is no way the recipient knows what they are downloading until the download is complete. All they are aware of is that something with a very large file size is slowing down their e-mail program. This is why, when it comes to transferring photographs via e-mail attachment, it is perhaps best to open the TIFF photograph and then save it as a jpeg. D.P.I. Another factor relating to picture quality and file size in both GIF and JPEG formats are the 'dots per inch' (d.p.i.) that an image is made up of. The more dots per inch a GIF or JPEG has means better image quality but, unfortunately, the trade off is a larger file size. Dots per inch can be specified within a photo/image editing program. For picture being processed for viewing in a web page or on the computer. The process might typically involve setting the image to a d.p.i figure of 72 or 96 and then reducing the picture size to something like 3x2 inches. When saving the image, an amount of compression can be applied to it (less compression means better quality but larger file size). If only part of the photograph is needed for display, cut (or 'crop') it to the required section first and then carry out the size, d.p.i and compression procedure. If the image is for printing set the size to anything that will fit onto the paper and set the d.p.i to something like 200 or 300. Don't worry the size it appears on the screen. It's what the size figures say that matters. All the same rules apply when scanning a graphic or photo into the computer. A properly processed jpeg photo can look like the one above of the author (but, of course, the subject will probably be better!). This was cropped from part of a larger photo using an art/photo program and then processed to bring it to the required size and picture quality. With a little experience such things as removing the original background and putting in a different one can be achieved. The photograph originally had a window and the odd bit of furniture in the background but, as can be seen, all that has been removed. Graphics work can be an interesting and involved subject. It is also a little difficult to put into words. Experimentation is the only way to get to grips with creating good images. There is much juggling of image quality, d.p.i setting, colour reduction and a whole host of other things to consider when presenting images for computer display or printing. I hope this has been a little help in understanding some of it. If you read all this, you are even more of a hero than I am for
writing it! |
|||||||||
green and white. In
fact, as well as white, it has 19 shades of green around the
perimeter of the button. This gives it a smooth appearance and
blends it into the background. If the shape had been a rectangle
with clean square edges then two colours would have been enough
since there would have been no transitional colours needed between
the button and the background.
|
|
|
|
