10 Stellar Web Resources for HTML5 and CSS3
How to Control Text Blocks in HTML5
How to Open Links in New Windows or Tabs with HTML5

How to Create Web-Friendly Images

You can create and save graphics in many ways, but only a few formats are actually appropriate for images you intend to use on the web. As you create web-friendly images, you must pay attention to file formats and sizes.

Often, graphics file formats are specific to operating systems or software applications. Because you can’t predict what a visitor’s computer and software will be (other than he or she will use some sort of web browser), you need images that anyone can view with any browser. This means you need to use cross-platform file formats that users can view with any version of Microsoft Windows, the Mac OS, or Linux.

These three compressed graphics formats are best for general use on the web:

  • Graphics Interchange Format (GIF): Images saved as GIFs often are smaller than those saved in other file formats. GIF supports up to 256 colors only, so if you try to save an image created with millions of colors as a GIF, you lose image quality. GIF is the best format for less-complex, non-photographic images, such as line art, clip art, or icons.

  • Joint Photographic Experts Group (JPEG): The JPEG file format supports 24-bit color (millions of colors) and complex images, such as photographs. JPEG is cross-platform and application-independent. A good image editing tool can help you tweak the compression so you can strike an optimum balance between the image’s quality and its file size.

  • Portable Network Graphics (PNG): PNG is the latest cross-platform and application-independent image file format. It was created to combine the best aspects of GIF and JPEG. PNG has the same compression as GIF but supports 24-bit color (and even 32-bit color) like JPEG does.

Any good graphics editing tool lets you save images in any of these formats. Experiment with them to see how converting a graphic from one format to another changes its appearance and file size. Then choose whichever format produces the best results.

The table shows guidelines for choosing a file format for images by type.

Choosing the Right File Format for an Image
File Format Best Used For Watch Out
GIF Line art, icons, and images with few colors and less detail Don’t use this format if you have a complex image or photo.
JPEG Photos or images with millions of colors and lots of detail Don’t use with line art. Compromises quality when you compress the file.
PNG Photos or images with millions of colors and lots of detail Don’t use with line art. Offers best balance between quality and file size.

Each of the following sites offers a complete overview of graphics formats:

As you build graphics for your web page, maintain a healthy balance between file quality and file size. If you poke around with your favorite search engine, you can find good tutorials on trimming image file sizes and optimizing entire sites for fast download. For tips and tricks to help you build pages that download quickly, review these handy resources:

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create Bulleted Lists in HTML5
How to Create Paragraphs in HTML5
How to Design User-Friendly Forms in HTML5
How to Create Submit and Reset Buttons in HTML5
Character Codes and (Special) Tag Characters in HTML5
Advertisement

Inside Dummies.com