MIS 208 Fundamentals of Web Publishing Week 6

PerformanceEditing Graphics

Imagemaps

06/00 2

PerformanceGuideline

Keep Total Size of Graphics Below 35k per Page Loads in 15 seconds on a 28.8 Modem

Exceed the Guideline When Content Dictates It

06/00 3

Application of GuidelinesMicrosoft Had Over 200,000 Pages in 9/1997

Limited pages to 60k SizeRemoved Java AppsSaving Bandwidth

06/00 4

Editing GraphicsFile ConversionResolutionColor DepthResizing an ImageCropping an ImageTransparencyConverting the Background

06/00 5

File ConversionUse a Photo Editor or Graphics Tool

Converts to JPG or GIFSave As… File Type

GIF Works Best with Fewer, Yet Distinctive Colors

Does Not Work Well with Images that have Blurred Edges

Use JPG for Photographs

06/00 6

GIF Supports 256 ColorsTransparencyAnimationInterlacingLossless CompressionHidden Comments

06/00 7

JPEG16.7 Million ColorsInterlacingDoes Not Support

TransparencyAnimationLossless CompressionHidden Comments

06/00 8

ThumbnailsOften a Reduced View of a GraphicCan Also Be a Reduce View of a Subset of a Graphic

06/00 9

ResolutionGraphical QualityJPG-- Data Can Be LostPerformance vs. Graphical Quality

06/00 10

Color DepthJPG Supports B/WJPG Through 16.7 Million ColorsReducing the Color Depth

Reduces File SizesImproves Performance During Web Page Loading

GIF is 256 Colors

06/00 11

Resizing an ImageHeight and Width Parameter in HTML

Does Not Change File Size

Optimizing SizesGIF Wizard --Tool

Input the URL or Filename of GIF Performs Calculations, Reduces the Size, Shows the

Results Reduces the Loss of Visual Quality

06/00 12

Cropping an ImageUse a Cropping Tool to Select the Area to be Preserved

The Area Not Selected is RemovedLowering Your File Size

06/00 13

TransparencySelecting a Single Background ColorMaking it TransparentProviding a Nice Cut-Out Look to an Image

06/00 14

Converting the BackgroundWhen a Background Consists of Diverse Colors

Use Tools to Transform it to a Single Color Eraser Tool Selection Tool Paintbrush

Make the Single Color Transparent

06/00 15

Making a BackgroundUsing PhotoshopCreate a New Image at 96x96 Pixels using 72 dpiFill with a Neutral ColorSelect the Noise (Filter > Noise) = 40, Monochrome

06/00 16

Background, cont.Apply the Blur Filter (Filter > Blur) and Repeat Twice to Increase the Blur for EffectConvert the Image to Index Colors (Image > Mode > Index Color)

Palette = AdaptiveColor Depth = 5-bits/pixelColors = 32Dither = None

06/00 17

ImagemapsServer Side -- Resides on the Server

Map FileCalling CGI ScriptSupported by Most Browser SoftwareRequires ISP Coordination and Not All ISPs Support Them

Client Side -- Resides on PCEasier to Use, Contained within the HTML

06/00 18

Concerns with ImagemapsNot Obvious it is an Interaction Device

Areas of the Graphic Might Not Be an Interaction DeviceSizing -- Should Fit on the Screen and Not Require Scrolling

06/00 19

Basic PrinciplesMake an ImageMark the Coordinates (X,Y)Region Types -- Shapes for MappingMapping the CoordinatesMap Tag <map name=“Colorado”>

Area Tag Defines Map Areas to be Linked

Support for Overlapping Images

06/00 20

SummaryReducing File Size

Convert Graphics File FormatsChange ResolutionsResize and CropMake Backgrounds Transparent

ImagemapsPowerfulNot Always Well Understood