Internet Business Applications Group
May 22, 1996
This is the transcript of the online portion of the Internet Business Applications Group held on May 22, 1996 at DGL headquarters in Columbia, Maryland USA. The online portion of the session was conducted on the DALnet IRC network in channel #inetbus.
Judy Herrmann of Herrmann/Starke Photo-Imaging in Columbia, Maryland presented a 1-hour discussion related to effective imaging for web documents. Here is the online transcript of the presentation and discussion.
Note: Statements attributed to "jherrmann" were manually entered during the presentation and do not represent a word-for-word transcript of Ms. Herrmann's comments. This is a transcript of a live IRC chat session.
Judy Herrmann may be reached at 410.290.3917. Herrmann/Starke's email address is thegang@hsstudio.com, and the company's website is http://www.hsstudio.com/
Session Start: Wed May 22 17:57:28 1996
jherrmann: Use graphics only when needed.
jherrmann: Use graphics when they add or aid content to the page.
jherrmann: Don't delay d/l time...set graphics for lowest common
denominator that will view your page.
jherrmann: Add caveat for modem users...warn of long d/l times.
jherrmann: Most of the world uses 256 color palettes, VGA screen
jherrmann: Size design for 640x480 pixel screens.
jherrmann: Don't use mor than 256 colors on each document that's
d/l...
jherrmann: Theh total number of colors used in all graphics on the
same page must not exceed 256.
jherrmann: Each new page gets to use 256 new colors.
*** jherrmann is now known as jherrmann
jherrmann: Some sites may use imagemaps instead of
buttons...this can significantly increase the d/l time.
jherrmann: This can be aggravating.
jherrmann: Don't hestitate to use buttons, rather than imagemaps,
when possible...decrease d/l time.
jherrmann: We have no control over how the viewer sets the
contrast/brightness of their monitor.
jherrmann: To minimize file size...watch illustrations vs. graphics.
jherrmann: NS has a set of colors that can't be dithered, MS
Explorer, and Mac also have sets...these are not the same...There
are 216 common colors, find them at http://www.lynda.com/
jherrmann: Expert book: "Designing Web Graphics" by Lynda
Wymann
jherrmann: Dithering: computer creates colors by taking pixels of
different colors to simulate the desired color.
jherrmann: Color transitions (edges) may be ragged with
dithering.
jherrmann: Posterization: 100 tonal values may be cut to 50
values...bands are created rather than continuous tones...dithering
may create this effect.
jherrmann: Choose colors from Lynda's "safe palette"...the 216
colors.
jherrmann: Also, minimize the number of colors used...less colors
enhances d/l time, especially with .gif files.
jherrmann: .jpg files are 24-bit, with a set number of colors... .gif
files may contain different numbers of colors.
jherrmann: With photos, continuous tone - 24-bit or higher color
palettes, don't reduce to smaller palette size, i.e. 256 colors, unless
necessary for your viewer.
jherrmann: NS and MSIE will automatically alter higher-palette
images to 256 colors if the viewer's PC is set for that.
jherrmann: Recommendation is .jpg for photos to allow higher color
use for viewers with better monitors.
jherrmann: Colorize monochrome pics by converting to RGB, and
they apply color curve to create "warm tones." PhotoShop allows
this (ed. note, so does Paint Shop Pro).
jherrmann: Then index the number of colors to fewer than 256
colors, for colorized monochrome files.
jherrmann: Let's talk about .gif and .jpg formats.
jherrmann: .gif format requires a maximium of 256 colors.
jherrmann: if a .jpg file or higher color image is reduced to fewer
colors, the file size is reduced.
jherrmann: Goal: reduce the number of colors until the minimum
acceptable colorization is achieved.
jherrmann: The best software is Debabelizer (for Macs)...much
better than PhotoShop.
jherrmann: Debabelizer can automatically chose the appropriate
palette.
jherrmann: Also good for batch processing of multiple files.
jherrmann: About $300 per copy.
jherrmann: Debabelizer and Paint Shop
jherrmann: Debabelizer (Mac) and PSP (IBM) both allow batch
processing?
jherrmann: Rule of Thumb: don't allow any individual graphic
>30kb...intersperce text/graphics to allow viewer to have something
to read while graphics are loading.
jherrmann: Give people an idea of what they're waiting for...
jherrmann: our site is http://www.hsstudio.com/
jherrmann: .gif files at 256 colors---30kb for 1" square graphic.
jherrmann: for high color images, such as photos, use .jpg format.
jherrmann: .jpgs allow physically larger graphics with higher color
palettes, but you can't control dithering at the viewer's computer.
jherrmann: Illustrations should be .gif; photos should be .jpg.
jherrmann: If you can't make your high-color .gif any smaller, try
making it a .jpg.
jherrmann: To create the impression of fast loading, use interlaced
.gifs and progressive .jpgs.
jherrmann: Progressive .jpgs, allow the browser to display the
graphic as it scales in.
jherrmann: Interlaced .gifs, the file comes in as a low-res image
while it gets more resolute.
jherrmann: This creates the perception of faster loading.
jherrmann: 2-pass images: code a low, small graphic file to display
while the larger, high-res image is downloading.
jherrmann: img src="hi.gif" lowsrc="lo.gif"
jherrmann: pix1.jpg will load first, while pix2.jpg is downloading,
then pix2.jpg will display over pix1.jpg.
jherrmann: pix1.jpg and pix2.jpg don't have to be the same picture!
jherrmann: Use width and height tags with images.
jherrmann: Ex: img src="pix.gif" width=50 height=100
jherrmann: The image will display in a 50x100 pixel "box"...regardles
s of the orginal image size/ratio.
jherrmann: Comment: use width/height tags with images that are
used within cells of a table.
jherrmann: Ex: table
jherrmann: tr
jherrmann: td
jherrmann: img src="pix.gif" width=175 height=215
jherrmann: /td
jherrmann: td blah blah blah /td
jherrmann: /tr
jherrmann: /table
jherrmann: Tables are currently the best choice for perfectly aligning
text/graphics on a page (using border=0 tag).
jherrmann: Cross platform info: PCs and Macs use different color
video adapters resulting in different fisible palettes, there's no
control for this in HTML.
jherrmann: Macs tend to appear a bit lighter than PCs.
jherrmann: Pay attention to contrast and tonal range...even if we
can't control the exact palette display on the viewer's computer.
jherrmann: If an image appears "mushy" not dark blacks, not
"white" whites...low contrast...increase the contrast.
jherrmann: If an image appears "harsh," decrease the contrast.
jherrmann: To check contrast, convert the image to grey scale...this
will allow transitions to be more easily visible.
jherrmann: If the contrast amongst the colors isn't evident when a
color graphic is converted to greyscale, there might be a contrast
problem when the graphic is viewed on all of the different
monitor/video cards that are used by viewers on the net.
jherrmann: Scan with as many colors as possible, allow graphic
software to reduce the color palette.
jherrmann: New subject:
jherrmann: What if we see a graphic on the web, and we'd like to d/l
it for printing?
jherrmann: 1. get permission for copyright material.
jherrmann: 2. contact owner, ask for original graphic...before
compression and color reduction.
jherrmann: "good luck, if you d/l from web and print directly."
jherrmann: Web graphics may not give high-quality print images.
jherrmann: Web graphics are usually 72 dpi graphics...rather than
high-res image.
jherrmann: Ideal: input res should be double the output res.
jherrmann: Ex: 300 dpi files should be used for 150 dpi printing.
jherrmann: Judy's company: photos of products in studio.
jherrmann: A very targeted niche market...well defined.
jherrmann: Straight Shots - catalog-style photos. Very fast
production, 30 shots/day.
jherrmann: This production system allows for multiple products to
be shot in a day.
jherrmann: Hermann/Starke - style-based photography.
jherrmann: Niche market, about 250 customers in US; top
designers and art directors.
jherrmann: Website helps develop H/S business--very immediate
information to the niche market. Direct mailings invite 250
prospects to visit the new information on the website.
jherrmann: Last four out-of-state projects never required
competitive bids or portfolio display.
jherrmann: Other photographers visit website, including budding
professionals.
jherrmann: Use email to get through commercial art process.
Sending agenda and updated information as process is
underway.
jherrmann: Email attachments of proofs reduced FedEx costs to the
cost of a local phone call.
jherrmann: Only final high-res image is sent via FedEx on a
(Iomega) ZIP disk.
jherrmann: By sending files via email attachment, more work can
be conducted in a day, because art directors don't have to fly to town
to visit the site to view proofs or wait for next day delivery via FedEx.
jherrmann: Mission Impossible site is a must see...
jherrmann: www.mission.apple.com/
jherrmann: next meeting, Tuesday 6/12/96 6:00PM EDT.
Session Close: Wed May 22 19:12:00 1996
Return to DGL homepage