eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   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 Formats  
  • The two most common graphic file formats on the web are .GIF (Graphic Interchange Format) and .JPEG (Joint Photographic Experts Group).

  • Why are they used?

  • These file formats are used on the web because they have the best compression. Compression is the technique used to take a large file and turn it into a smaller file by applying a fancy mathematical algorithm to it. Since many users are accessing web pages on 28.8 modems, the smaller the file, the more quickly it can be transferred over the net.

  • Image size is no joke. If your images take to long to load, a user will never even bother to wait to read about what you have to say.

  • A good rule of thumb is that you should use .GIF files for images and .JPEG files for photographs.

  • The .GIF format is also interesting because of the amount of "special effects" it provides. Besides a standard .GIF file, you can easily download freeware programs to create interlaced .GIF files, transparent .GIF files, and animated .GIF files. Let's look at each...

  • An interlaced .GIF file is a file that loads in pieces. It starts out fuzzy and continually focuses until it is in perfect focus. Interlacing does not actually speed up the loading of the image, but it does make a user feel as if it does because they can watch it materialize. Below is an example of an interlaced .GIF (you may have to reload the page to see it load though).

  • Transparent .GIF's allow you to specify a single color that will become transparent, thus allowing the background to show through. This is useful when you want to create the illusion of irregularly shaped artwork such as when you add text art to your page. Instead of getting an ugly square box around your text, a transparent .GIF will make the type appear to blend right into the page. The following example shows the same image, one with no transparency and one with a transparent background.

  • Animated .GIF files allow you to merge several images into one in order to create a cell animation. Note that for each cell, the image is that much larger, so you must take care to make your animation in as few cells as possible.

  • Here is an example of an animated .GIF

Image Format Resources

Previous Page | Next Page