MPM17A – Exercise #7: Image File Format for the Web

By Kelly Truong and Jeffrey Leung

What image file formats should be used for web pages, why (how does compression affect loading)?

Image file formats:

–       composed either of pixels, vector data or both

–       most common image file formats:

Most common raster formats (stores as bitmaps – pixel):

  • JPEG / JFIF (Joint Photographic Experts Group)
    • Best for Full-color smooth-toned images like photographs
  • PNG (Portable Network Graphics)
  • GIF (Graphics Interchange Format)
    • GIF & PNG Flat-color images like logos or buttons work best
    • GIF maximum of 256 colors – good for images that don’t need a great amount of color or pixels

Other common useable raster image file formats:

  • JPEG 2000 (adds enable both lossless and lossy storage)
  • EXIF (Exchangeable image file format)
  • TIFF (Tagged Image File Format)
  • RAW
  • BMP (Windows Bitmap)
  • Netpbm (PPM, PGM, PBM, PNM)
  • WedP

Other common useable vector based image file formats

–       Vector (consist of geometric description that can be rendered smoothly at any desired display size):

  • CGM (Computer Graphics Metfile)
  • Gerber Format (RS-274X)
  • SVG (Scalable Vector Graphics)

Compression:

–       sacrifices the quality of the image to reduce the size of the image; the higher the compression, the lesser image quality; the smaller the image, the faster it loads on a webpage

  • lossless image format – no image quality is lost when image is compressed
  • lossy image format – some image data is lost when image is compressed, and quality is reduced

Works Cited

Gan, Ian. “Choosing the Right Format For Your Web Images.” Irt.org Home Page – Internet Related Technologies (IRT). 13 Nov. 2011. Web. 14 Nov. 2011. <http://www.irt.org/articles/js206/&gt;.

“Graphics: Choose the Right Image Format – Jpeg Gif Png Web Image File Formats.” Web Site Optimization: Speed Up Your Site Website Optimization Web Speed Optimize Web Site Performance Company. 13 Apr. 2010. Web. 14 Nov. 2011. <http://www.websiteoptimization.com/speed/tweak/format/&gt;.

“Image File Formats.” Wikipedia, the Free Encyclopedia. Web. 14 Nov. 2011. <http://en.wikipedia.org/wiki/Image_file_formats&gt;.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: