Image Formats and Web Design: JPG GIF PNG and SVG


The JPEG image format was developed by the Joint Photographic Experts Group in the early 90s. JPEG images most often end with the file extension .jpg; although .jpeg, .JPEG, .JPG, .jpg, .jpe, .jfif, and .jfi are also used. JPEG is a lossy bitmap compression algorithm meant primarily for digital photos. Lossy means that when JPEG images are saved they are compressed to less than their original size, but this comes with a loss in quality. Generally when saving a JPEG, compression is defined in percentages, with 100% being the highest quality but biggest file size. As a rough guide, 95% to 85% is good for logos and images used in formatting. Images of people or landscapes can go down to as low as 65% without obviously noticeable artifacts on the image.

For web designers JPEGs save space and load time, and offer a good general image format for digital photos and some logos. When using JPEGs you must be careful to avoid image degradation. If a JPEG is edited and then saved again as a JPEG, your image will have deteriorated in quality because it has been compressed twice. Sometimes in only two or three generations this can render the image unusable. It is always best to save your images in a etsy SVG lossless format, such as .png, .tiff, .raw, or .xcf, and then, when needed, save the file as a JPEG. JPEGs are widely compatible on all modern browsers and are the most used image format on the web.


The GIF format, or Graphics Interchange Format, was introduced in 1987 by CompuServe and recognizable by the .gif file extension. It is a lossless bitmap compression format for color images and animation allowing the use of 256 colors out of a palette of 16 million. Lossless means that all of the information in the original image is saved in the saved GIF, although, because GIF only supports 256 colors it isn’t truly a perfect reproduction to the viewer.

Today, GIF is used to display things like buttons and low/med-quality animation on websites. GIF is not recommended for use with photographs due to the 256 color limitation, although there are workarounds. GIF animated buttons and the like were once popular, now they are fading from use, particularly due to Flash and better taste. Notably, GIF supports transparency, allowing the use of on or off “see-through” effects with images. Currently, PNG and MNG are in the process of superseding the GIF image format.


PNG is a bitmap image format with lossless image compression and uses the .png or .PNG file extension. PNG was developed as a license-free replacement to GIF, albeit without animation support. MNG, PNG’s cousin, was developed to succeed GIF animation feature. PNG has more advanced transparency options than GIF, allowing a full range of transparency as shown in the picture below. However, Internet Explorer 6 does not support native alpha-channel transparency, however, in Windows Internet Explorer 7 this is remedied. As of now PNG is less well supported than GIF by modern browsers.

For web designers PNG is useful for images with varied transparency and screenshots. However, PNG’s often large file sizes preclude it from use as a digital photography format on the web. They may not show up correctly in some browsers.


SVG, or Scalable Vector Graphics, is one of the most interesting, and potentially useful image formats today. Unlike the other formats here, SVG is a XML mark-up language for vector graphics. Vector graphics, according to Wikipedia, is the use of geometrical primitives such as points, lines, curves, and polygons to represent images in computer graphics. Instead of having all of the information for each pixel in an image, as all of the prior image formats do, SVG defines things in these geometrical primitives. This means, when you increase the size of an SVG image, it always stays sharp, and never becomes pixilated. This can be quite useful for logos and other simple graphics, allowing for many different sizes of the same image to be used with no loss in quality. Also, SVG images typically have very small file sizes. As seen in the picture, SVG graphics are not photo-realistic. They also require different skills and, generally, different programs to create them.

As for web design, SVG files are the dream for quality of images; unfortunately, Internet Explorer 6 and Safari both require plug-ins to view SVG files. Still, SVG images can be used as a lossless image used as the archive version, then converted into JPEG or PNG files for use on the web.

Leave a Reply

Your email address will not be published. Required fields are marked *