Whether you are full time designer or a first time user publishing your first website, the burden of deciphering what file format you want to save your image as will surely come up. Now that there are multiple applications for editing your images, mainly within the Adobe Creative Suite, there exist proprietary formats which are software dependent and simply confusing for the average user. Luckily the web browsers have advanced since the early ages of only handling jpg files, and this will benefit you directly as it will allow for higher resolution images to be used, and lessen the load time for your page.
The six major image file formats consistently being used in graphic and web design are: JPG, GIF, PNG, TIFF, BMP & WBMP. With each one brings its own set up advantages for use within certain applications, so understanding which format is right for your work is important!
JPG/JPEG
JPEG stands for Joint Photographic Experts Group, which simply is derived from the name of the committee that created the format back in 1986. JPG is a default standard compression method for most graphic design, as it has been around the longest and is compatible with all applications. The format allows for adjustments in the degree of compression, giving the user the selectable tradeoff between image quality and file size. JPG remains the most common format for storing images as well as transmitting them on the World Wide Web. Pictured below is an example of the Amortech Design Labs logo saved in JPG format with a decreasing level of compression, showing the quality of image as well as the total file size.
GIF
Graphic Interchange Format was designed in 1987, and was a competitor with JPG as the most widely used format for sharing images online. GIF images retain the ability to show low-resolution animations in a freeze frame method. The color pallet supported by GIF files is limited however, with a total frame in the file only holding a maximum of 256 entries and a single pixel supporting only 8 bits. So in comparison to a JPG which can handle an input of 24 bits per pixel, there is a significant decrease in quality. GIFs were very popular in the early stages of web browsing, however due to the lack of quality as well as licensing restrictions which we won’t be getting into here, it is safe to assume GIFs will be of minimal importance as browser technology advances.
PNG
Portable Network Graphics is a bitmapped image format which derives the same lossless data compression method of the GIF format. PNG was designed to improve and replace the GIF format, since it is newer, supports a wider range of colors, and is free of patent restrictions. PNG was designed for transmitting images over the internet as it supports pallets of 24-bit RGB colors, grayscale and RGB images. The format is preferred when working with geometric or line drawings, lettering, cartoons and other images with flat color and sharp defined borders.
The downfall to PNG fails to compete with GIF files as it does not support animation, but with its ability to support highly sophisticated transparency and color pallets, it is superior still. The downfall to using PNG files for all your web design needs is that it is less supported by older browsers such as IE6, but as users adopt newer browsers this becomes less of an issue.
TIFF
TIFF (Tagged Information File Format) is a popular format for storing high color depth images. Developed by Adobe and Microsoft, this format is supported by many image-manipulation programs such as Adobe InDesign, PhotoShop, Pagemaker, etc. TIFF files contain extremely high quality image data, and are preferred when providing publishing and print companies with copies of your work. The advantage to this file type is the ability to modify and resave the image any amount of times without lowering the quality or losing any data within the image. It is a very flexible and adaptable format as it requires no software post-processing during or after its download of the image from the camera.
BMP
BMP which is often referred to as a bitmap, is an image file format used most significantly on the Microsoft Windows platform. It is mostly popular due to its main use in Windows, and therefore we see all image processing programs able to read and write to this format. The downfall to this format is the relatively large file size which is caused by the lack of compression in the file. BMP images can be compressed with lossless data compression algorithms (such as ZIP) since the file contains redundant data, however this does not help when using the image online.
WBMP
Wireless Bitmap is a format optimized for mobile devices. This format is identified using a TypeField value (which contains information such as pixel and palette organization, compression and animation), and determines the image characteristics by referencing the WAP documentation. Currently WBMP only supports one Image Type Identifier which is defined as 0. This type is defined with the characteristics of not being compressed, having one bit color (white/black), and being one bit deep (monochrome). Although WBMP is restricted at the moment, there is room for a mobile specific image format, which WBMP is perfectly fitted for.
Amortech Conclusion
It is important as a designer to know the strengths and weaknesses of all the file formats available. With each format brings new methods of transferring your images online, with the main focus being to provide the viewer with the closest to original version of the image it can, while keeping the file size low and the load time on your sites minimal. Here at Amortech Design Labs we strive to stay on top of these topics for our web design projects, and adopt the leading edge technologies of online browsing. As our portfolio shows, we implement a wide range of formats in our work, as we see each project unique with its own requirements. For any more information regarding this article or any other information depicted here, contact us here.
Recent Comments