Astro Lesson #15 :a.bit.about.bits.and.such

This HTML stuff is all very well, but there comes a time in every young man's life when he wants to get on with the more exciting things in life - Hey, whoa there fella! We're talking about that there funky graphic stuff. Sure, go for it - but there are a few things we should tell you first. Take a seat.

viva.la.resolution!
Back in the old days when we used to read things on paper (Ha!) we looked for the finest quality, the clearest of pictures in the glossy magazines cluttering our coffee tables. Throw that idea right outta the window when it comes to the web.

You see, if we were producing a magazine, we would control the entire process and our literary jewel's (we ain't talking Reader's Digest here ...) final look. When it comes to the web, we are at the mercy of the general public and the cruddy machines they may have, the weeny 14 inch monitors with their pathetic 256 colors - never mind that we view the world via our glorious 16 million technocolor 17 inch wonderfully wide screen. (Sorry dudes!)

Ergo, forget about the 300 plus DPI resolution (dots per inch) required for print and go for 72 dpi - the usual display capacity of a computer monitor. Creating images at higher resolutions is a waste of bandwidth and time, BUT ...

Keep the original high quality settings of your photos and artwork as separate files, saved in a non-compressed format (we'll get into THAT shortly) like .cpt, .psd, .tiff etc. Why? Elementary my dear Watson. You need to keep the 'template' in order to experiment with different compression, palette, and bit depth methods. If you spend ages getting a nice scan of Uncle Herbert, play around with it for an hour and a half, and don't like how it turned out, you don't want to have to scan it in again. You want to be a sensible chappy and merely open the original format scan (or other graphic) for you to play around with for another 2 hours.

comprende.compression.compadre?
We've talked about GIFS and JPEGS before, but now that you are all a little more advanced (well, those that paid attention are!) let's expand upon this fascinating topic

We can't take a picture and insert it straight into a web page - those purty things are just too darned big - no-one will stick around waiting for a photo of you in your pyjamas if it's 2meg in size - no matter how gorgeous you look! However, we can fool everyone into thinking it's a regular photo by using compression - kinda squeezing all that mathematical information into a smaller box. Think of it as you would a sponge - If you saw 2 sponges in the kitchen sink, one full of water and one squeezed out - it would not be so obvious which was which. The soggy one holds a lot of stuff that you can't see.

Preparing an IMAGE for the web causes a change - some elements get 'lost' along the way - that's okay for the web, we don't mind at all. We would rather that and have faster downloads. This is why we use GIFS and JPEGS as file formats for the internet. They can do this stuff.

bibbity.bobbity.bits
Let's take a teabreak at this point and catch up on the subject of bits. Don't get confused, but when we talk web graphics, we talk bit depth. What in the heck is it?

BIT DEPTH means two things -

• The number of colors in a graphic
• The number of colors a computer screen can display (256 is the old standard)

This is how it works - 1 bit is 2 colors, then simply multiply by two as you go ...

• 2 bit = 4 colors
• 3 bit = 8 colors
• 4 bit = 16 colors
• 5 bit = 32 colors
• 6 bit = 64 colors
• 7 bit = 128 colors
• 8 bit = 256 colors (Voila! The magical 256 colors is reached!)
• 24 bit = 16 million and a bit more colors

Teabreak over ...

the.image-police.are.calling.for.you ...
Now you will see why we waffled on about color numbers - GIFS are bound by the Image-Police rules and must duly swear never to exceed the limit of 256 colors - or they get busted and sent to GIF jail without collecting $200 or passing GO. We're talkin' 8 bits are enough - or even less if so inclined.

JPEGS must have bribed the Mayor 'cos they get away with the full 16 million color spectrum (24 bit). They don't have it ALL their way, however, as they must promise never to be ANIMATED or TRANSPARENT - only GIFS may do that.

Looking back at the origins of these 2 rivals helps us to see when they should be used. GIFS were created especially for the web, for graphics made mostly with blocks of solid color, line drawings, plain text - that sorta stuff. JPEGS were created to compress photographs - and as such they happen to be superior at compressing (making smaller) graphics that use lots of colors, shadows, shading and gradual or subtle changes from one color to another.

That's where experimentation comes into play - you see, the Image-Police don't mind a bit of transcompression mutation - sometimes photos can be GIFS and sometimes graphics can be JPEGS - it's all a matter of quality and file size

the.perfect.palette
In real life, we want to work with the most colors possible to give the truest outcome. On the web we want to use those colors which will turn up equally well on as many screens as possible - this is why we talk about the BROWSER-SAFE palette. This is a restricted or INDEXED color scheme of 216 colors. We talk about this in relation to GIFS, which need to be indexed (remember the Image-Police?) We reduce to 216 because to further complicate matters, the 3 main screen color palettes (windows, windows 95 and MAC) all use a slight variation of the 256 colors - producing a common array of 216 colors. So what? So - this all relates to the problem of dithering (see below)

You can find a browser safe palette at Lynda Weinman's place - particular graphic programs allow you to load extra palettes. Although GIFS are considered a 'lossless' form of compression (they don't lose information due to the compression process) there is a loss of quality because the number of colors is lessened. We can be clever and reduce the BIT DEPTH or number of colors - IF THE IMAGE CAN TAKE IT. Save your GIFS as 8-Bit, and then reduce the colors - compare with the original (which you kept pristine - didn't you???) and see what you can get away with.

A good graphics program will allow the choice of palettes when saving a gif - it's beneficial to use an ADAPTIVE PALETTE. This means that the GIF comprises itself from only the colors in the original image and therefore produces less dithering. 'What's DITHERING?' you say ...

If the picture you start out with is comprised of 16 million colors, and the palette is reduced to 8,6, or 4 bit - much calculating goes on by the computer to put something where those 'stripped' out colors used to be - something near enough to what was there, but made only with what it has to hand (A bit like the Boy Scouts in the wilderness, trying to make a canoe from twigs and a bowie knife) What does it do? It dithers, that's what - it makes a guess as to what it should put there. Now with a very small palette, a whole mess of dithering is going to happen - and all this calculating can actually increase file size, defeating the ultimate purpose.

(We can also talk about screen dither in terms of finer points - different browsers, screen settings (gamma etc) operating systems all contribute to the problem of uniformity.)

It's up to you to be smart and decide when you need dithering (subtle colors, multiple colors) and when you don't (solid blocks of color). And to make allowances when it comes to JPEGS - they are not going to look quite so good on 256 monitors, but check that they certainly do look great on 16-million capable ones. We get back once more to the fact that taking out colors will result in some degradation of quality - so how many colors can you remove before the piccy looks yukky and how much dithering is needed?

jumpin.jpegs
A last word about JPEGS (promise!)

Because JPEGS are glorious in their 24 bit 16 million color scheme - you don't need to worry about all that stuff - apart from the fact that 8 bit monitors (256 colors) can only see just that. However, you can control the rate at which they compress image data - when saving as JPEG you will see a slider which can be set to high or low quality (compression) and again it is a matter of experimenting. Usually you will find a reasonable effect is gained if you stay in the mid range. This is a way of controlling the 'LOSS' - how much information gets tossed out when compression takes place.

Because of this rate of loss - it's important not to save a JPEG as a JPEG, and definately not as a JPEG again and again. Remember - each time a little more data will be lost until you have a gluggy image - blah!

One last thing - don't forget to create your graphics in pixel dimensions - 'cos that's what the browsers display in.

Ah, so much to learn. So little time

Go away now and absorb these attestations - and look forward to next time when we hope to have some pictorial examples of all this stuff ....