eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak


Introducton to Web Design
Image Size  
  • As we said before, the size of images in web design is one of the most important things for you to keep in mind.

  • Simply put, users will not wait for large images to load. If your page has too many large images, no one will ever see your content.

  • What does "large" mean?

  • Lynda Weinman suggests the following rule of thumb: "If you assume that the average viewer of your page will be using a 14.4 modem, you can expect it to take 1 second per kilobyte for an image to transfer. This means that a 60k file would take minute to download and your 10mb files could take almost 3 hours". Most people have enough patience for about 10 seconds.

  • So how do you reduce the size of images?

    • Make smaller images.
    • Compress your images using .GIF or .JPEG.
    • Use fewer colors or lower resolution.

Making Smaller Images
  • Obviously, the first thing you want to do is prepare smaller images. Consider using only icons or similar type graphics on your page. If you must incorporate larger images, use clickable thumbnails to link to the larger versions.

Compressing your Images
  • We have already talked about compression with .GIF and .JPEG files so we won't repeat ourselves here. However, it is worth mentioning that the .GIF compression algorithm called LZW follows a particular logic that affects file size.

  • Specifically, the .GIF compression algorithm looks for changes along the horizontal axis. When it finds a change, it adds to the file size. Thus, the more vertical changes in your image, the larger it will be.

  • Lynda Weinmann offers the following rules for using GIF compression:

    • Artwork with horizontal changes compresses better than artwork that does not.
    • Anything with noise will more than quadruple image size.
    • Large areas of flat color compress well and complicated line work or dithering does not.

Reducing Color
  • The fewer colors that you include in your images, the less information the image needs to keep track of. Anti-aliasing, that uses intermediate colors to blend edges in an image for example, can increase images size by 30% or more.

A Sigh of Relief

  • One fortunate thing about the newer web browsers is that they intelligently cache images. Thus, once the user has downloaded an image, they do not need to again. This is yet another reason to settle upon standard images for your site. If you have a single image on all your pages, it will only have to be downloaded once and will immediately be displayed on all pages after the first.

Previous Page | Next Page