Graphics
Jeff Williamson
Northern Virginia Community College
www.nvcc.edu/home/nvwillj/html-graphics/
nvwillj@nvcc.edu
Graphics basics
1. All computer files are either binary or text files. Graphic
files are binary; html files are text.
Text files like e-mail, HTML files, and system settings files
can be read directly by the hardware of most computers. They are
made mostly of stuff you see on your keyboard - of an agreed-upon
set of letters of the roman alphabet, numbers, and symbols. Text
files are small, so they load quickly and transfer rapidly over
a network.
Binary files like graphics, MS-Office documents, and software
programs require software to interpret them. They are made of
1's and 0's. This makes them a little larger (it takes more 1's
and 0's to say something), and this size limits their ability
to transfer quickly over a network and load quickly into a user's
machine.
Note: In word processing, graphics and text are combined into
one file - a page with five pictures is one file.
On the web, graphics and text (HTML coding,
really) are always separate - a page with five pictures
is six files.
2. Many factors can make graphics files
extremely large. Web graphics file formats give up some
or a lot of quality just to reduce file sizes.
Graphics files are binary, so they are naturally larger than
text files. Several factors in them may also increase their file
size. These include
- overall file size - postage stamp vs. whole-page
- image quality or resolution, in pixels or dots per inch
- number of colors, if any, used
- file format information for printers or monitors - print quality,
animation, progressive display..
Given the current standards in computer and network hardware,
graphics can easily exceed the limits of a machine and/or the
patience of its user. People who use scanners know this; it is
easy to accidentally scan something like a snapshot at, say, a
file size equal to 20 or 30 floppy disks.
So file size is always a concern with computer graphics, and
many of the file formats have been developed specifically to reduce
file size.
3. Web graphics are raster
graphics, which cannot be resized easily.
Many word processing images are vector graphics, which can
be resized easily.
Raster (or bitmapped) graphics are described with pixel
positions, sort of like the grains in a print photograph. And
like big enlargement from a small camera, small raster graphics
get grainy (or pixellated) when they get blown up too much. The
two supported web formats - GIF and JPG - are both raster formats.
.BMP, the system graphics format for Windows, is also raster based.
Vector graphics are described using mathematical equations,
so they scale up and down without quality loss. Cool - but they
are not supported on the web. Most of the cartoony-clip art in
Word and WordPerfect is vector-based.
Note 1: Your web authoring program may seem to give you the option
to resize your graphics. This option actually resizes the HTML
code, but not the graphic itself. For small adjustments, it's
o.k., but for more drastic changes you need to change the image
itself.
Note 2: FrontPage users actually can resize certain graphics
easily, particularly the MS Office clipart. This is due to some
heavy automatic processing that FP does for users. Like a lot
of things in FP, it works great in certain conditions, and really
badly in others, and it gives you no guide to tell which is which.
4. Image resolution affects file size and transfer time. Screen
resolution usually is a fairly invariable low and speedy 72 dots
per inch. Print resolution varies from 200 to 600 or
more - it is high and slow, however.
So screen images usually won't print all that well, and print
images usually won't transfer all that well.
5. 580 pixels wide by 240 pixels
tall is about the maximum somewhat-guaranteed workspace you can
be certain everyone will see.
Monitor resolutions can be changed from 640 pixels wide by 480
pixels high to 800 by 600 or more. The higher the resolution,
the more stuff gets displayed, although in smaller sizes.
Then there's how Netscape and Internet Explorer display pages
(a bit differently), framed vs. non-framed pages (more options),
how much "chrome" you have turned on for your browser
(and again which brand of browser you use), and whether or not
you have turned off your Viagrafix training doohickey on the
side of your display. Oh, and platform/version differences.
And taskbar options in Windows.
In short, there's a whole lot that can affect how people see
your graphics, but you have to have some rule of thumb - so make
it 580 x 240. Make no graphics wider than 580 pixels, and assume
that a graphic 120 pixels high will take up half of the page.
|
