[vc_row height=”auto” css=”.vc_custom_1526320318204{margin-top: -15px !important;padding-top: 0px !important;}”][vc_column][vc_column_text]

Digital Graphic Image Formats for Web Design

In this article, we will discuss the development of image formats throughout the years and explain the functionality of the most common digital image file formats in widespread use today — GIF Format (pronounced “jiff”), JPEG Format, and TIFF — and we will discuss some of their history as well as their strengths and weaknesses. In addition, we will review the major digital image compression techniques as well as the novel advantages of the PNG file format.

Despite the rapid evolution of the Internet or World Wide Web, the digital image file formats have remained relatively unchanged. The ubiquitous portable networks graphics (PNG) format is versatile and offers several advantages over other digital image file formats that make it an attractive option for web design. The PNG format allows designers to implement transparencies with lossless compression as well as gamma and chromicity correction.[/vc_column_text][/vc_column][/vc_row][vc_row height=”auto” css=”.vc_custom_1526320318204{margin-top: -15px !important;padding-top: 0px !important;}”][vc_column][vc_column_text]

Understanding Digital Image Format Types

[/vc_column_text][vc_column_text]

Raster (Bit-Mapped) Formats

Raster or Bit-Mapped Images are made up of a set grid of small squares also called pixels and each pixel is assigned a specific color. Unlike a vector image, raster images have fixed dimensions. The advantage of the bit-mapped image format is that it displays graphics accurately however the resolution is fixed so when you transform a raster image, you stretch the pixels themselves, which can result in a “pixelated” or blurry image. When you enlarge an image, your software is essentially guessing at what image data is missing based on the surrounding pixels. Bit-mapped images with higher resolution contain more pixels and more detail but are consequently much large files.

[/vc_column_text][vc_column_text]Vector Image Formats

Vector graphics are made up of paths, rather than individual pixels. These paths can be used to represent lines and shapes within the image. Most vector image formats can also include colors, gradients, and image effects. Since vector graphics store image data as paths, they can be enlarged without losing quality, which makes them a good choice for logos and other types of drawings.[/vc_column_text][/vc_column][/vc_row][vc_row height=”auto”][vc_column][vc_column_text]

Image Formats Explained

[/vc_column_text][/vc_column][/vc_row][vc_row height=”auto”][vc_column width=”1/2″][vc_column_text]Tag Image File Format / TIFF (1986, Aldus -> Adobe Systems) – The Tag Image File Format is a common format for exchanging raster graphics (bitmap) images between application programs, including those used for scanner images. A TIFF file can be identified as a file with a “.tiff” or “.tif” file name suffix. The TIFF format was developed in 1986 by an industry committee chaired by the Aldus Corporation (now part of Adobe Software). Microsoft and Hewlett-Packard were among the contributors to the format. One of the most common graphic image formats, TIFF files are commonly used in desktop publishing, faxing, 3-D applications, and medical imaging applications.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_column_text]Bitmap Image File Format / BMP (1986, Microsoft Corporation) – The Bitmap Image File Format is one of the oldest digital image formats for computers. The simplicity of the BMP file format, and its widespread familiarity in Windows and elsewhere, as well as the fact that this format is relatively well documented and free of patents, makes it a very common format that image processing programs across platforms can read and write. The BMP file format is also limited to RGB-images only while CMYK data are often preferred in prepress print production.[/vc_column_text][/vc_column][/vc_row][vc_row height=”auto”][vc_column width=”1/2″][vc_column_text]Graphics Interchange Format / GIF (1987, CompuServe) – The Graphics Interchange Format is ideal for use on the internet. Lossless compression means image quality is not sacrificed, and like PNGs they also offer the ability to maintain transparency (but can’t support partial transparency) and also allow for animation. However, the limitation of GIF files are that they can only contain a maximum of 256 colours, and therefore are not the best choice for photos, but rather images with a limited colour palette.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_column_text]Portable Document Format / PDF (1991, Adobe Systems) – The Portable Document Format was developed in the early 1990s by Adobe Systems as a way to share documents, including text formatting and inline images, among computer users of disparate platforms who may not have access to mutually-compatible application software. In the early years before the rise of the World Wide Web and HTML documents, PDF was popular mainly in desktop publishing workflows. The PDF File format was under control of an International Organization for Standardization Committee of volunteer industry experts until it was released as an open standard in 2008 by Adobe Systems.[/vc_column_text][/vc_column][/vc_row][vc_row height=”auto”][vc_column width=”1/2″][vc_column_text]Joint Photographic Experts Group Format / JPG (1992, Joint Photographic Experts Group) – The JPG file format, unquestionably the best known of digital image formats, is a type of image compression that works best with photographs and complex images. JPGs use a compression method that removes non-human-visible colors from images to decrease file sizes. The JPG file format also allows progressive JPGs, which is mostly used for web design. You may have experienced this before when visiting a website and watching as an image load quickly and become clearer as it downloads.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_column_text]Portable Network Graphic Format / PNG (1996, PNG Development Group) – The indelible PNG Format is a bitmap image format that employs lossless data compression. The PNG format was created to both improve upon and replace the GIF format with an image file format that does not require a patent license to use. It uses the DEFLATE compression algorithm, that uses a combination of the LZ77 algorithm and Huffman coding. This format supports palette based (with a palette defined in terms of the 24 bit RGB colors), greyscale and RGB images. PNG was designed for distribution of images on the web as opposed to professional graphic vector formats and as such other color spaces.[/vc_column_text][/vc_column][/vc_row][vc_row height=”auto”][vc_column][vc_column_text]

Which Graphic Image Format Should I Use?

Identifying the correct graphic image format for a designer is like a construction worker identifying the right tool on a job site. It requires fundamental knowledge about the different graphic image file formats and competent image editing experience. Although graphic design is often considered magical, there is no magic formula to determining which format is best. Here are a few guidelines and principles that may help you make an informed decision.

First, if the image uses a wide range of colors go with PNGs or JPGs because of their wider color spectrum. JPGs are best suited for photographs or images containing photographic-level detail. PNGs are better suited for images involving transparencies, text, charts, screenshots and detailed illustrations.

When determining which file type to use, for an image that does not contain photographic elements, it’s a good idea to keep in mind transparency and complexity. For an image that has a lot of colors or requires advanced variable transparency, PNG is the preferred file type. If the image has few colors and does not require any advanced alpha transparency effect, GIF is the way to go. Keep in mind that any use of transparency or variable transparency, should be tested in multiple browsers for compatibility.

It’s important for web designers to familiarize themselves with JPG, GIF, and PNG, the three primary digital image formats used on the web. Knowing when to use each specific digital image format will lead to better improved performance and image display. High quality websites heavily consider performance and quality graphics because it has become a growing factor in search engine optimization.[/vc_column_text][/vc_column][/vc_row]