Webmastering: Week 6
6-1 Webmastering Secrets: CGI/JAVA
This 8-week class covers state-of-the-art authoring
secrets to make an AWESOME Web page on the Internet!
Tonight is the second class in a series of eight:
Apr 18: SSI: Add modification date & templates
Apr 25: CGI: Create/process a form & image map
May 2: Perl: Create a guestbook and/or BBS
May 9: Java: Getting it and using it
May 16: Java: Animating your page
-> May 23: Images: Perfecting images on your site <-
May 30: Java/Javascript: banners and games!
June 6: Perl: Add a search engine & other stuff
Any overview questions before we dive in?
6-2 Webmastering: TONIGHT'S PLAN
Most of you should already be familiar with basic
HTML authoring. This class will push your page to
the edge of technology and make it fun for visitors:
1) Create dynamic pages using templates & dates.
2) Let guests add content via forms to your page.
3) Use Java animations to spice up your page.
4) Master the basics of the Java language.
Tonight, we will work on perfecting your images:
1) GIF vs JPG: Which to use?
2) GIF features: transparency & interlacing
3) How to make your images load faster
4) Best ways to quantize and reduce
5) Using a common palette on your images
6) Choosing text/link colors to match background
7) Creating animated GIFs
8) What tools are the best and good online help
Any questions about what we will cover tonight?
6-3 Webmastering: GRAPHICS GOALS
No one will argue that well-done graphics can add
significant excitement and professional polish to
a Web page. However, we have all also seen pages
that use huge bitmaps that take forever to download
and distract from the content of the page.
This class will address how to make professional
looking graphics quickly that will still be quick
to load and look good on the majority of systems.
So, our goals will be to:
1) Add some color and excitement using images.
2) Limit the image size so as to save storage
space and download time for our viewers.
3) Keep our images as viewable as possible on
a variety of browsers available.
4) Limit the palette entries so as not to
overwhelm our 256-color viewers.
5) Add some movement and uniqueness to our page
using animated GIFs.
6) Avoid overwhelming the text with images that
distract and hide our text and links.
7) Create a professionaly polished look.
Any other goals you think we should address?
6-4 Webmastering: WHEN TO USE GIF
GIF is an oldie-but-a-goodie standard from 1989
Supported by almost all graphics packages and
platforms, it uses 'lossless' compression.
Lossless means that when uncompressed, the viewer
will get the exact same image, pixel per pixel
when they view it. This means you should use GIF
for logos, line art, and other 'crisp' images.
Also, GIF provides some features that JPEG does not:
1) Transparency - allows one color to be 'clear'.
2) Interlacing - allows images to 'blur' into view
progressively so user does not have to wait.
3) Animation - can have multiple images in one file
4) Palette - can specify exact RGB values in image.
So, use GIFs whenever you:
1) Need background to show through image
2) Want to make sure almost all browsers can view
3) Have a logo/artwork or other 16-32-color image
4) Want to do animation
5) Must use specific color values in the image
Any questions on when to use GIFs?
6-5 Webmastering: WHEN TO USE JPEG
JPEG is a newer standard that is gaining popularity
due to its incredible compression abilities. It is
NOT a lossless compression method. However, this
allows it to compress much better and also allows
you to ADJUST the level of compression vs. quality.
JPEG compression works extremely well for photos
and other scanned in images. You can adjust the
ratio down to almost 50:1 with only minor effects.
I have gotten 1MB GIF photos down to 10k! Note
that JPEG does not use palettes and only recently
has started to support progressive display.
So, use JPEGs whenever you:
1) Have an 'artsy' background using patterns
2) Are working with photos or scanned images
3) Want thumbnails of images for quick display
4) Want the fastest loading page around!
Any questions on when to use JPEGs?
6-6 Webmastering: TRANSP & INTERLACING
GIF supports the concept of a transparent or clear
color. This allows you to designate any color (I
recommend white so it prints better) as the ONE
transparent color. When the image is displayed,
the background will show through the portions of
the image that are painted in the given color.
This will make your icons look much better on a
fancy background and can even add some 3-d look
to your icons and images. It should become a
habit to always select a transparent color before
you save a GIF. Use the eyedropper to select one.
GIF interlacing allows the image to be partially
drawn while being transferred. This will allow
your image to start out blurry and sharpen into
focus. Visitors can select the image or get an
idea of it's contents before it finishes being
transferred. ALWAYS use this format. It will
also APPEAR that your images load faster.
Any questions on GIF features?
6-7 Webmastering: MAKE THEM LOAD FASTER
1) Quantize the colors down to reduce size and
wasting some user's 256-color palette. Almost
all images look fine with 32 custom colors.
We will address this more tonight.
2) Use JPEG whenever possible (even backgrounds!)
For photos, try reducing JPEG quality factor.
I am amazed how small some photos can get!
3) Limit the # of images. Go for quality first.
4) Limit the size of images. Reduced images look
really good if done right and are much smaller.
I will also address this more tonight.
5) Repeat 'standard' images on different pages to
take advantage of visitor's caching.
6) Use GIF interlacing and JPEG progressive to
give the visitor the illusion of speed.
7) ALWAYS use the IMG WIDTH & HEIGHT parameters.
This way your text will come up BEFORE the
images are loaded since the browser knows size.
I have a Perl script to automate this.
Example: 
Any questions on making your images load faster?
6-8 Webmastering: QUANTIZING
Quantizing is one of the most important skills
I think for creating an effective page using
images. Quantizing is also known as color
reduction or reducing color depth and only applies
to GIF images since JPEG does not use a palette.
If you save all your GIFs in 24-bit color, it will
take 3 bytes per pixel to store your bitmap, since
the Red, Green, and Blue values each take a byte.
If you save your GIFs in 256 color, it will take
one byte per pixel to store your bitmap since it
takes one byte to specify the palette color index.
This means a 100x100 image would take 30k in true
color and 10k in 256-color.
If, however, you reduce it down further to 16 or
32 colors (which most icons will), the file would
now be 5-6k. Some icons you can even reduce down
to 2 or 4 color, which would be 2-3k. You can
use all the custom colors you want, the total #
PER IMAGE is all that counts towards the size.
To quantize, I recommend downloading all your
images into a directory and immediately qunatizing
them to 64 colors. Almost all GIFs (not photos)
will reduce to 64 colors with no loss. Then try
32 and 16 colors and if you dont like the result,
undo the operation. Then save the smaller file.
Quantizing also has an added bonus in that it
will allow multiple images on the same page to
display better on low-color systems. Most users
have 256-color systems and colorful backgrounds
are already 'hogging' their system palette. Your
images may only get allocated a few color entries,
and the fewer colors you use the better.
Any questions on quantizing?
6-9 Webmastering: REDUCING
Ever wondered how some people seem to be able to
reduce color photos down and still have a really
nice looking image? You can too!
The trick is to increase the color depth and use
a more sophisticated image editor like Photoshop
or PaintShop Pro that does color averaging. When
you load in your image, convert it to true color.
Next, do the resize. Now, quantize it back to
32 colors or whatever.
Standard resizing simply removes every other
pixel to produce the new desired size. Color
averaging, averages two neighboring pixels and
produces a replacement pixel of a new color.
This will make a phenomenal difference when you
resize photos and scanned artwork.
Another useful technique is to crop instead of
resize. Cropping just chops a portion off and
keeps the same size. If you must reduce more
than 50%, you might want to crop first to avoid
serious image quality loss.
Finally, you may find picking some standard sizes
for your icons will make it easier to remember
so you can insert WIDTH & HEIGHT tags easily.
I use 50x50 and 100x50 for most icons.
Any questions on resizing?
6-10 Webmastering: SHARING PALETTES
One of the more advanced options is to use a
shared palette on all your images. This way
all of your images will look nice when placed
together on a user's 256-color system. This is
only necessary if you are using many colorful
GIF icons on the same page.
First, try using JPEG (which is true color) or
reducing the colors on the images first. Make
sure you test it on your system (Quickres is a
handy Windows 95 utility to help with this).
If that fails and you still need to use several
photo-quality images on the same page, a common
palette is probably the way to go.
There are some tools out there that will help
with this. Most are for creating animations,
like the AVIEDIT that comes w/Windows SDK.
Any questions on sharing palettes?
6-11 Webmastering: BACKGROUNDS AND COLORS
Choosing a good background is critical for a good
page. Finding one that is interesting and unique,
without being distracting is critical. I have
seen numerous pages that use a logo as the backgnd
and these pages are so busy as to be hard to read.
I recommend one of the textures you can get from
the numerous Netscape background archives.
Then you must select a color for the text and
links. I prefer to keep the standard black and
blue in most cases, but they won't always work with
all backgrounds. Get your backgrounds from one of
the sites that offers a test screen with text shown
on the background so you make sure text is legible
on top of the background. A good page is:
http://www.contrib.andrew.cmu.edu/~ender/backidx.html
This page has sample colors with RGB & hex values:
http://www.sci.kun.nl/thalia/guide/color/medium.html
This page has interactive color designer:
http://www.sci.kun.nl/cgi-bin-thalia/color/compose
Any questions on backgrounds and colors?
6-12 Webmastering: IMAGE MAPS
As a browser, I am really starting to hate these
things. But, it is so simple to do them right.
First of all, you will also find image maps a pain
to maintain since you must often edit the picture
and the CGI map everytime you want to reposition
the map. One possible alternative is to arrange
separate images into an invisible (or visible)
table. This can create a toolbar like effect that
allows you to easily re-order and change the icons
and links right in your HTML, rather than use CGI.
If you NEED an image map, make sure the image is
small enough by quantizing colors way down and
make sure you use interlacing so those already
familiar with your site dont have to wait. Also,
make sure to use the size tags and provide textual
links so folks dont have to wait.
I really dont mind image maps, it is just that so
many sites are putting these huge maps up which
the webmasters dont notice on their T1 or cached
connections to their own site.
Any questions on image maps?
6-13 Webmastering: ANIMATED GIFS
Like the Java animator, GIF animations use frames
to give the illusion of movement. Frame animations
rely on several images placed in sequence to create
a flip-card effect of motion. If the cards are
'flipped' through fast enough it appears to move.
Therefore, it will be necessary for you to create
a sequence of GIF images that will provide the
necessary motion effect when drawn in sequence.
The nice thing about doing animations with GIFs is
that almost all newer browsers support animation,
and even if they dont the user will simply see the
first or last frame of the animation on the browser.
GIF animations also start much faster and can be
cached just as any other GIF image can.
To create an animated GIF, you must create the
sequence of images using a common color palette
using any GIF editor you prefer. Once you have
the sequence of images, you may use the GIF
Construction Set or other tool to assemble them
together into a animated GIF. You will probably
want to add a CONTROL statement to set the delay
between each frame. You may loop the images,
but repetitive loops are often annoying...
Any questions on animating GIFs?
6-14 Webmastering: WHAT TOOLS ARE BEST
So, now that you know what you want to do, what
tools should you get to do what? Unfortunately,
I have not found one program that does it all.
You will probably find you want several tools for
different types of image editing. Some of paint
tools and filters that others do not...
The following are my favorites, where to get them,
and what they are especially well-suited to.
PaintShop Pro - does almost everything but anim:
http://www.jasc.com/pspdl.html
Lview Pro - QUICK & EASY resize, convert, quant:
http://world.std.com/~mmedia/lviewp.html
GIF Construction Set - for GIF animations only
http://www.mindworkshop.com/alchemy/gifcon.html
Fractal Painter and Kai's Power Tools:
Commercial - nice 3d effects and lettering
Adobe Photoshop - the industry standard
Commercial - nice reductions, color seps
There are many others, including the Windows
Pbrush editor that comes with Win95 that are
decent, but the above are the nicest.
Any questions on image editing tools?
6-15 Webmastering: GOOD ONLINE SOURCES
Besides the software and background links I have
already given you, there are also other generic
online sources that will help with image editing.
Some of the better ones I have found are:
Nice list of Web-related clip-art sites:
www.gnnhost.com/publish/clip-art/otherart.htm
Thalia is great for the advanced author. If it
is worth doing, they have a link to help you:
www.sci.kun.nl/thalia/guide/#page-designers
Other links off my authoring page:
dqsoft.com/wwwauth.shtml
Any questions on sources?
6-16 Webmastering: CONCLUSION
This concludes tonight's class.
Next week's class will start promptly at the same time.
You can mail me here at box 952 or via chrisw@dqsoft.com
for questions or help with your pages. You will find
my page w/links and samples at http://dqsoft.com/
Next week, we will look in-depth at some fun stuff
using Java and Javascript: banners and games!
1) Java vs. Javascript
2) Creating a scrolling banner with Javascript
3) Some cool games you can put on your page
4) Other fun Java stuff
HOMEWORK: Implement a simple GIF animation (or at least
copy one of the standard ones) to your page.
Now we have an open question and answer session where
you can get me to debug your pages for you...