The internet is a visual medium and when you look at an image online it can be in one of several formats. Each format has pros and cons, key differences, and specific use scenarios. We are going to look at the top four image file types used on the internet and when you should use each. We chose these top image formats as these are the image file types that most internet users will run across on a daily basis. For many web developers and designers, they will run across countless more but for the masses, these formats will do.
There are two true types of file formats when it comes to images. You have the bitmap and you have vector formats. A bitmap means that an image is composed of little dots (think a photo). A photo has 300 dots per inch (DPI). Magazines are often around 1200 dpi or higher. Most color printers will print 300, 600, or 1200 dpi depending on the model. The more dots per inch the higher the quality. The downside to a bitmap is you can hot make an image larger without losing quality. Vector images can be scaled to any size without losing quality by using math. Vector files are great for logos, charts, flags, maps, and non-picture type formats.
If you have used the internet for any period of time you know of GIF (Graphics Interchange Format). GIF came out on June 15, 1987, and has been plagued with how to pronounce it. GIF came out in the days of CompuServe and the proper way to say it is like the American peanut butter JIF. When it first came out CompuServe employees would often say "Choosy developers choose GIF", spoofing the JIG brand of peanut butter's television commercials. GIF files are still used today but have been replaced with PNG format when an animation isn't truly needed.
GIF files can have a transparent background which allows certain areas of an image to have no background allowing for the color behind it to show through. This is ideal for items like logos and icons.
There are two ways to say JPG. They are JPEG or JPG. Both ways are perfectly acceptable and both use the same acronym of Joint Photographic Experts Group. JPG files are capable of displaying millions of colors which make them ideal for photos. Unlike many file formats, you can actually save a JPG file with varying degrees of quality. You can set no compression (no loss of quality) to 100% and can go all the way to 0% where you will have a high degree of compression resulting in a high-level of quality lost.
There are three main formats of PNG. There are PNG-8, PNG-24, and APNG (Animated PNG). PNG or Portable Network Graphics is like a cross between a GIF and a JPG.
PNG-8 is very similar to GIF. You have a maximum of 256 colors but there is no animation option available. PNG-24 gives you the capabilities of JPG where you can have millions of colors but you also have the ability to have transparency. Being that PNG is lossless compared to JPG is a lossy image format PNG files are typically larger in size. The final format is APNG which is a newer version of PNG that adds animation to its toolbelt.
SVG or Scalable Vector Graphics is not designed for pictures. An interesting part of an SVG file is you can link items like JPG with your vector file giving you the best of both worlds. SVG files can also be manipulated using CSS (cascading style sheets) which are what you use on your website to set colors. This allows for SVG's to inherit theme qualities of your website and look great without increasing the number of images you have on your site.