There are many digital image formats available for use, and it a designer’s job to decide on the format that is best suited for the project at hand.
Only certain formats are suitable for the web – those that sufficiently compress and optimize the image so that they aren’t too big in terms of file size. Resolution, meta-data, colour richness and are all optimized as there is no point in having image quality that exceeds the display limitations of computer monitors.
In the past few years, with the introduction of widespread broadband use for most users, it has become less important to consider download speeds when deciding on suitable image file sizes. However, this concern has been replaced with the need to consider downloads speeds when designing with mobile users in mind.
JPEG’s (Joint Photographic Expert Group) use a ‘lossy’ form of compression. They discard data that is less important to human perception – most people are unable to see any difference between an original and a compressed image. After compression, a 13MB image will be reduced to about 1.5MB, and is therefore much more suitable for use on the web. Most digital cameras save images as JPEGs, and users can determine the balance between level of compression and maintenance of accuracy. Overcompression can cause ‘artifacts’ (visible square shadows). JPEG’s suffer from generation degredaion when repeatedly JPEG’s are not suitable for images that contain text (for example, banner images with text) – GIF or PNG should be used instead in these cases.
GIF (Graphics Interchange Format) were developed for Compuserve pre-web. They are made up of 256 colours and can have transparent colour defined – whichever colour is set as the background becomes the transparent colour.
GIF’s are often used to create animations. A series of images can be stored in the same file, with information embedded into the file to determine the interval between images. Animated images of this nature can be considered old fashioned though.
GIFs work best with images with relatively small number of colors and large areas of the same colour. They are often not the best choice for photographic images as these often have more than 256 colours in them.
There was a great controvesy a number of years ago when the owners of the algorithm tried to impose a licence fee on commercial software using GIF’s, which ultimately led the creation and widespread use of PNG’s
PNG’s (Portable Network Graphics) were created by open source advocates looking to avoid infringement of the controversial patent on GIF’s. They combine the best of JPEGs and GIFs in that they feature lossless compression, and dynamic colour palette (not limited to 256). They benefit from a more sophisticated form of transparency than GIF, where each pixel can be stored as an alpha (transparency level) value, from completely transparent to completely opaque. However, IE7 does not support PNG’s transparency, though there are hacks available that will fix this (http://www.twinhelix.com/css/iepngfix). Also, there is a popular argument that as designers we really shouldn’t be wasting our time on the dying breed of users with older versions of IE.
TIFFs (Tagged Image FIle) were originally created as an atempt to get desktop scanner vendors of the mid eighties to agree on a common scanned image file format. Compression is optional, and layers, alpha transparency and other special photoshop features can be preserved. This format is rarely used in web design projects as it is not widely supported by web browsers, and the file sizes are very big. TIFFs are best used for print design and desktop publishing. In fact, printers will often specifically request TIFF files.
<< TIFF files cannot be uploaded to WordPress, hence no image of a TIFF is shown here. >>
PICTs were developed by Apple in 1984 and are now rarely used.
<< Photoshop cannot save an image as PICT format. >>
BMP’s are Microsoft’s standard image format. They are usually very big files with little compression. They are usually too large to use on the web and are best avoided for web design projects.
<< BMP files cannot be uploaded to WordPress, hence no image of a BMP is shown here. >>
EPS files (Encapsulated PostScript) are used for vector-based images in Adobe Illustrator.