MIS 208 Fundamentals of Web Publishing Week 6 Performance Editing Graphics Imagemaps

06/002 Performance Guideline 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/003 Application of Guidelines Microsoft Had Over 200,000 Pages in 9/1997 Limited pages to 60k Size Removed Java Apps Saving Bandwidth

06/004 Editing Graphics File Conversion Resolution Color Depth Resizing an Image Cropping an Image Transparency Converting the Background

06/005 File Conversion Use a Photo Editor or Graphics Tool Converts to JPG or GIF Save 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/006 GIF Supports 256 Colors Transparency Animation Interlacing Lossless Compression Hidden Comments

06/007 JPEG 16.7 Million Colors Interlacing Does Not Support Transparency Animation Lossless Compression Hidden Comments

06/008 Thumbnails Often a Reduced View of a Graphic Can Also Be a Reduce View of a Subset of a Graphic

06/009 Resolution Graphical Quality JPG-- Data Can Be Lost Performance vs. Graphical Quality

06/0010 Color Depth JPG Supports B/W JPG Through 16.7 Million Colors Reducing the Color Depth Reduces File Sizes Improves Performance During Web Page Loading GIF is 256 Colors

06/0011 Resizing an Image Height and Width Parameter in HTML Does Not Change File Size Optimizing Sizes GIF Wizard --Tool Input the URL or Filename of GIF Performs Calculations, Reduces the Size, Shows the Results Reduces the Loss of Visual Quality

06/0012 Cropping an Image Use a Cropping Tool to Select the Area to be Preserved The Area Not Selected is Removed Lowering Your File Size

06/0013 Transparency Selecting a Single Background Color Making it Transparent Providing a Nice Cut-Out Look to an Image

06/0014 Converting the Background When 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/0015 Making a Background Using Photoshop Create a New Image at 96x96 Pixels using 72 dpi Fill with a Neutral Color Select the Noise (Filter > Noise) = 40, Monochrome

06/0016 Background, cont. Apply the Blur Filter (Filter > Blur) and Repeat Twice to Increase the Blur for Effect Convert the Image to Index Colors (Image > Mode > Index Color) Palette = Adaptive Color Depth = 5-bits/pixel Colors = 32 Dither = None

06/0017 Imagemaps Server Side -- Resides on the Server Map File Calling CGI Script Supported by Most Browser Software Requires ISP Coordination and Not All ISPs Support Them Client Side -- Resides on PC Easier to Use, Contained within the HTML

06/0018 Concerns with Imagemaps Not Obvious it is an Interaction Device Areas of the Graphic Might Not Be an Interaction Device Sizing -- Should Fit on the Screen and Not Require Scrolling

06/0019 Basic Principles Make an Image Mark the Coordinates (X,Y) Region Types -- Shapes for Mapping Mapping the Coordinates Map Tag Area Tag Defines Map Areas to be Linked Support for Overlapping Images

06/0020 Summary Reducing File Size Convert Graphics File Formats Change Resolutions Resize and Crop Make Backgrounds Transparent Imagemaps Powerful Not Always Well Understood