JPEG vs PNG vs SVG

Computers have different ways of handling graphic images. Each of these techniques have their own advantages and disadvantages. This page summarizes some of the important characteristics of common computer graphic formats.

Tiff is the simplest image protocol in that it is just an array of the pixel values, where each pixel value represents the range of colors for image. This can be a single bit per pixel for black and white images or 24-bits to show the full range of red, blue and green components of the color. Images using this format are called raster images because the image is comprised of a number of rows each comprised of the same number of pixels, similar to how a television image was produced on old television monitors.

gif is an image format with some compression to reduce the size of image files. It was invented by CompuServe which controlled its use and limited its popularity. Gif files may include several versions of an image to produce animations.

jpeg or jpg uses a better compression algorithm than gif. Its use became more popular. jpeg was produced by a joint committee for picture and graphics, hence its obscure name.

png was the open source response to jpeg. PNG encodes using chunks. The chunks allow only part of the image to the encoded rather than the full range of pixels. Undescribed pixels are transparent, giving png the advantage of overlaying one image over another. Its compression of raster images is comparable to those of jpg. Png gits its name from ping, a recursive acronyn meaning ping is not gif. This was shorted to png for PCs that used a three character identifier for a file extension or file type.

svg records the graphic as vectors. In this case a vector has two components: a direction and a distance. This allows the graphic to change it size while retaining all of its resolution. Raster images may pixellate, when the individual pixels appear as squares, when expanded beyond the original size of the image. svg is a text based format as it uses XML, the X markup language, to describe the components of an image. XML is also the basis of HTML used to describe web pages. SVG, like HTML, can include CSS style sheets to control the colors applied to an image, and a script section using JavaScript to provide animation control.