Intro to Web Image File Formats

by Margaret Penney | February 26, 2017

When you’re starting out as a designer one of the first things to figure out is when to use what image file type on the web. Each works best for a different application and if you want your design work to display well it’s important to get this information correct.

Outlined here are some basics of that most designers need to know about image file formats.

JPG

JPG is by far the most common image file format in use on the web. The file actually is called both JPG and JPEG and it stands for “Joint Photographic Experts Group.” Knowing this somewhat technical and esoteric name is not that important, though. What’s important to remember is that you use JPGS for photographs. More specifically, you use JPGs for images with a lot of colors and a lot of different colors next to each other, so you use JPGs for photos and also really complex textures or illustrations with a lot of gradients and subtle color transitions.

You use JPGs as the file format of choice because it allows for the best compression to quality ratio. If you want to have your images look good and be a fairly small file size, one that won’t take hours to download, you use a JPG.

JPGs are the standard file format of most digital cameras. If you have a professional camera you also will have RAW files to do editing with, but JPGs are the smaller, adaptable, more compressed files, If you are saving a photo for the web your best choice is to use a JPG file at a “High” compression setting (82%), not “Very High.” With this setting, you get some compression to the image but not enough to effect quality too much.

GIF

The GIF file format is best for images with a lot of the same color, a lot of flat colors. Examples of the type of image would be a 1-3 color logo or a cartoon style illustration with clear lines and filled color areas. Artwork that you save for the web from Illustrator would often be best saved as GIF files.

GIF files offer a lot of image compression and you can specify how many colors the final file should have down to just 2-4 colors. In this way you can make images that are byte sized.

PNG

The PNG file format is an update to both the GIF and the JPG created in the mid-1990s. The PNG format provides added benefits to both JPG and GIF. PNG still is not in as much use as either of the other formats though.

PNG is best used for logos and artwork with a lot of detail and that also require a transparent background. PNG files allow for transparent backgrounds, which neither GIF nor JPG do. PNGs support over a million colors so their quality is also excellent. The PNG file format is not compressed though so where you need to have a smaller file don’t use PNG.

PNG files come in PNG-8 and PNG-24. You can use PNG-8 as an alternative to GIFs and PNG-24 as an alterative to JPG.

Margaret Penney is the Managing Editor of Notes on Design. Margaret is a teacher, designer, writer and new media artist and founder of Hello Creative Co.

If you are interested in developing your graphic design skills, Sessions College offers a range of graphic design courses for students at all levels. Contact Admissions for more information.

This blog is powered by Sessions College, the leading online school of visual arts.