Image Formats
GIF
Graphics Interchange Format, also known as GIF, was once the most widely used image format. It was developed by CompuServe to fill the need for a cross-platform image format.
The GIF format is okay for logos, icons, line art, and other simple images. It doesn’t work as well for highly detailed images because each image can only use a maximum of 256 colors. Photographs in GIF format tend to look grainy and blotchy because the color palette limits smooth color transitions. The GIF format supports transparency, which makes it easy to incorporate an image into a larger design, but not alpha transparency. Alpha transparency, which is supported by PNG, actually blends an image with what’s behind it and works much better than GIF’s simple transparency (which simply disables some pixels).
One feature that is unique to the GIF format among web image formats is support for simple animations. Animated GIFs don’t support sound or playback control, but they can be embedded on a page without a browser plug-in, so they are assured of working on mobile devices.
JPEG
JPEG, which stands for Joint Photographic Experts Group (the group that developed it), is the most popular format for images on the Web. JPEG (pronounced jay-peg) is actually a method of compressing images that other file formats can use. The file format for which it’s known is also commonly called JPG.
JPEG was designed for the storage of photographic images. Unlike GIF images, JPEG images can include any number of colors. The style of compression that JPEG uses (the compression algorithm) works especially well for photographs, so photographs compressed using the JPEG algorithm are considerably smaller than those compressed using GIF or PNG. JPEG uses a lossy compression algorithm, which means that some of the data used in the image is discarded to make the file smaller. Lossy compression works extremely well for photographic data, but it makes JPEG unsuitable for images that contain elements with sharp edges, such as logos, line art, and type. If you’re working with photos to display on the Web, you should save them in the JPEG format.
PNG
PNG, pronounced ping, was originally designed as a replacement for GIFs. It stands for Portable Network Graphics. All current browsers support PNG, and it has some important advantages over GIF and JPEG. Like GIF, no data is lost when images are converted to PNG.
If you’re creating new images that aren’t photographs, PNG is the format to use. JPEG still makes more sense for photographs because of its superior compression. If you are creating new images, GIFs only really make sense if you are using GIF animation.
SVG
Scalable Vector Graphics (SVG) is a graphics format that was developed for the Web. It became a standard at the W3C in 2001, and all current web browsers support basic SVG features.
One advantage of using SVG is that they are scalable vectors. This means that they can be resized up or down without any loss of quality. This makes them well suited to responsive web design and web applications.
SVG images are written in XML and can be written directly in HTML5 documents. This makes SVG images faster to load and easy to manipulate with scripts or programs. They can also be used to create moving images and complex animations. If you look at an SVG image that has been included in HTML, it will look a lot like other HTML code. SVG uses XML to create the images, so it uses tags and attributes just like you’ve learned to use in HTML documents. But you don’t need to go out and learn the SVG markup. Instead, a lot of tools are available to create the images for you. Most vector graphics programs like Adobe Illustrator (http://www.adobe.com/products/ illustrator.html) and Inkscape (https://inkscape.org/en/) will save the images as SVG. You can then open the SVG files in a text editor and see that they are just complex XML files. SVG is a good choice for images that need to be available at many different sizes, such as on responsive websites. It is also good for scripted images like graphs. But while all current browsers support SVG, if your site must support Internet Explorer 8 (or lower), you will need to have fallback options for SVG images.
