WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




Graphics Performance Tuning

Not all users have T1 lines. Here's how to optimize download speed without compromising quality. Let's start this column off with a discussion of some Web basics, focusing on some of the issues Web content developers face when attempting to increase the graphics performance of their Web site. By now, it is fairly obvious to all involved with the WWW that smaller file sizes translate into faster downloads. Although many corporations and academic sites are fed with T1 and faster connections, the general browsing public is primarily connected via modem-based SLIP and PPP connections. Web sites that are optimized for slower connections are being rewarded with higher volumes of traffic. Most people tend to think of total pixel size when attempting to reduce bandwidth. Good design can minimize the size needed to convey a certain impression, and it can't be stated too often that graphic designers should always strive to minimize the pixel density wherever they can. What may not be so obvious is that file size is directly dependent upon the number of colors that are incorporated into a particular graphic. One of our original goals at WRQ was to create a technical-support Web server that gives users the ability to access a graphics-enhanced Web over 9,600-bps SLIP and PPP links. We obtained this by specifying a six-color palette for each graphic, thereby minimizing the number of colors in a given image. Note that each graphic may use a different six-color palette--but be aware that some browsers will take their time displaying graphics when this approach is used, particularly if the image is interlaced. At WRQ, we tend to minimize jagged edges on graphics through anti-aliasing, a process that creates the visual effect of smooth edges between contrasting colors. This is achieved by blending the colors of the border pixels into two or more interim colors. We try to design these graphics with colors that can be used in the main image and still provide anti-alias support to graphic borders. The home-page banner graphic that resides on our main Web server home page takes a different approach to this same subject. Typically, a main graphic starts out as a 1 MB or larger Photoshop file designed within our marketing communications group. We attempt to subtract and dither as many colors as possible from the image without losing visual impact. If it appears that too much content is lost, we will attempt to redesign the graphic to use a more suitable color table. We then index the colors and convert the graphic to an interlaced GIF file, and create an image map if it is to be used as the banner graphic. Indexing is a process handled internally in Photoshop, where you take a graphic with multiple color channels and multiple layers, and convert it to a flat graphic, which requires you to isolate each color component. Our current banner graphic is a one-piece design that was reduced to 63K for a GIF file and 35K for JPEG. Browse http://www.wrq.com/techweb/mosaic/webtips/graphics.htm for an idea of start and finish graphics for this banner, which will hopefully provide a better explanation of the steps taken to do this.


HTML5 Development Center


Recent Articles