Skip to content. | Skip to navigation

Navigation

Eye-catching Design.
Powerful Websites.
Effective Exposure.

Web Graphics

by Ed 09/16/14

Computer graphics come in hundreds of different file formats, fortunately graphics on the web are a little simpler and typically come in three varieties: GIF, JPG, and PNG. The choice of format should be determined by the type of image you're using.
Here are some basics considerations when adding graphics files to a web page.

GIF (Graphics Interchange Format)

GIF is a patented compression format owned by CompuServe and Unisys. It uses a "lossless" form of compression, which means that when you save the image, you don't lose any of the data. Line art graphics are ideal for .GIF files.

Photo saved as GIF looks patchy
The GIF file adopts special compact codes for large areas of a single colour. An important concept in a GIF is the colour palette (a list of all the colours in an image). A GIF is limited to 256 colours. If you save an image as a GIF with more than that number, some will be lost. It is possible to 'dither' an image, which is a way of determining which colours to keep for highest visual quality. Dithering works well for images that have gradual changes in colours. The drawback of dithering is that it makes the file bigger, because blocks of colours must be saved in the palette. The fewer colours in your image, the smaller the palette; therefore the smaller the file size.

JPEG (Joint Photographic Experts Group)

JPEG (or JPG) is named after the standards committee that developed it. Unlike GIF, its compression scheme isn't lossless, but lossy, so it does throw away some of the data. However, the same image saved as a JPEG usually looks equally clear.

Photo Saved as JPG
JPEG compression is based on the idea that tiny differences in images cannot be perceived by the human eye. It takes advantage of our perceptive abilities by smoothing over portions of the image, creating blocks of solid colour - this makes for a smaller file. When you create a JPEG, you can usually select the level of quality you want. Higher quality will lead to a larger file size. A larger file size means longer download times for your users.

PNG (Portable Network Graphics)

PNG is an open lossless compression format, designed to replace the older GIF format and includes the best features of GIF and JPEG, but you need to know which version of PNG to use for which situation.

PNG8 is essentially a replacement for GIF. It offers 256 colours and basic one-colour transparency. However, PNG8 usually compresses images to a slightly smaller file size than GIF meaning images download slightly faster than the same image saved as a GIF. In other words, use PNG8 over GIFs.

PNG24 and PNG32 (PNG24 with alpha transparency) offer the expanded colour palette of JPEG images, without any loss of quality. This means that photos saved as PNG24 or PNG32 are often higher quality than JPEGs. Careful though, don't disregard JPEG! JPEG images offer very good quality and a much smaller file size than either PNG24 or PNG32. In general, JPEG is a better choice for photos and other images that include lots of colours.

PNG32 offers something no other format does: 256 levels of transparency (also called alpha transparency), which means that you can see the background of a web page through a drop shadow on a graphic, or even make a graphic that has 50 percent opacity (meaning you can see through it) to create a ghostly translucent effect.

SVG (scaled vector graphics)

SVG is an XML-based vector image format. Unlike bitmap formats like JPG and PNG, they do not consist of a fixed set of dots. An SVG is instead made of shapes and their attributes, so it can be saved as the smallest size possible. No matter how large the graphic gets, the XML that describes it remains the same - this means there is no loss of resolution when scaled up. Because the web is accessed from so many different devices (each varying in screen size and resolution), scalability and responsive techniques have become important in web design.
There are other benefits too: scripting control can be used for custom interactions and animation, text labels and descriptions can be read by search engines and SVG files can be kept small thanks to their architecture.
SVG files are used on the web more than ever due to increased support from the major browsers but please be aware that some older browsers still in use (at the time of writing) do not support SVG.

Which one to use?

It all depends on the kind of image you have. GIFs work best for drawings and graphics that use just a handful of colours, such as "line art." JPEGs are typically used for photographs that need a large number of colours. GIFs can also be used for animated and transparent images. PNG does have transparency, but GIF is the only format for animated images. It compresses simple graphics or hand-drawn images very well. PNG is very similar to GIF, but with improved compression. It doesn't support animation, but it's not limited to 256 colours. SVG is very useful for responsive web pages and can help keep down file size, just bear in mind that you will need to provide a fall-back for older browsers (at least for now).