Web Appropriate Image Formats
Your computer monitor is made up of rows of thousands of tiny, differently colored, points called pixels. Pixels are so small that when you look at them from a distance it’s hard to notice the individual points. Get really, really close to your monitor, and you can start to make them out (or go cross-eyed). While a digital screen only understands this pixel-based format, not all images are, at their root, made of pixels. Those images that are made of pixels are known as raster graphics. All other formats must be rasterized, or converted to pixels, in order to be displayed on your monitor. This process is automatically handled by your computer, so don’t dwell on it too much. Just be aware that all graphics, no matter the source, are ultimately displayed as rows of pixels.
Some common raster graphic formats for the web are jpg, gif, and png; pronounced jay-peg, gif (or jif depending on who you ask), and ping respectively. In most cases jpg will be your go-to format. It is good for photographs or images with a wide range of colors because it compresses color information to save disk space. This is known as lossy compression because the quality of your picture will degrade as information is essentially thrown out. This is nearly indiscernible in a high quality jpg, but the lower you go on the compression scale, the more artifacts you will notice in the picture.
If your image only has a few colors or you need a transparent background, then gif and png are the file formats for you. gif has a rather limited color palette. It can only contain a maximum of 256 different colors. Sounds like a lot, right? Try converting a photograph to a gif and you’ll see just how few colors that really is.
Don’t think of this as a limitation, though. It’s a feature! The colors represented in a gif image are precise because the format uses lossless compression. You won’t see the same sort of compression artifacts in a gif image that you get in a jpg image.
Png is another lossless format similar to gif, but it has varying color depth options. It can be as limited as a gif or as free as a jpg. Plus it can incorporate varying levels of opacity. While a gif image may have pixels that are either completely transparent or completely opaque, a png image can have pixels that are translucent.
Now that modern browsers have embraced the png format, there’s honestly not much need for gifs. Unless, of course, you need an animated image. This is what truly sets the gif format apart from the png format (for better or worse). Animated gifs can be useful for user interface elements such as loading bars, spinners, and the like. The early days of the internet were peppered with obnoxious and inappropriate use of animated gifs, giving the format something of a bad wrap. It has recently seen a resurgence in web design as a means of showing off video clips.
Often the types of images that are appropriate for the png and gif format are created from vector graphics. Vector graphic use mathematical expressions to build images out of points, lines, curves, and shapes instead of exact pixels. Vectors are the paths that make up the shapes in the graphic. The curve and position of these paths can be changed by adjusting control points. Because vector graphics are just a set of mathematical instructions, their file size is much smaller than raster graphics, and they can be scaled to any dimensions without any loss in quality. If you were to enlarge a raster graphic, you would begin to see the individual pixels that make up the image. That doesn’t happen with vector graphics.
Vector graphics are perfect for images that do not require photo-realistic detail such as maps, line illustrations, icons, and cartoons. The most common vector image format is the Scalable Vector Graphic, or svg. The svg format was created by the W3C—the organization in charge of developing the world wide web standards. Creating and editing svg files is super easy with a free and open source, cross-platform application called Inkscape. Modern browsers support inclusion of svg images in the img tag, which is totally rad, and in many instances renders the png and gif formats obsolete.