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)
- BMP (Windows Bitmap)
- Netpbm (PPM, PGM, PBM, PNM)
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)
– 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
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/>.
“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/>.
“Image File Formats.” Wikipedia, the Free Encyclopedia. Web. 14 Nov. 2011. <http://en.wikipedia.org/wiki/Image_file_formats>.