When working with images, each file type comes with pros and cons. Most of the time, it's a matter of quality versus file size. File types that are typically used for print specialize in maintaining very high image quality, which also means really big file sizes.
Graphics displayed on a computer screen, rather than printed on paper, require substantially fewer pixels to appear crisp. This makes it best to opt for file types that are effective at keeping file sizes small while still looking good on a webpage. This narrows the choices down to three widely used formats for web graphics. Click through the slides below to learn about the strengths and weaknesses of these file types.
JPEG: Joint Photographic Experts Group
Pronounced “jay-pegs,” these files can have the file extension .jpeg or .jpg (most people opt for the latter). This format is ideal for complex images and photographs—anything with a high variation in colors used. JPEGs keep their file size low by compressing their quality, especially by narrowing down color variety. If the quality is compressed too much, a picture will look muddy and blurry.
JPEGs do not support transparency, so they will always appear as a rectangular or squared shape.
GIF: Graphics Interchange Format
There is heated debate whether this file type is pronounced “gif” (hard g sound) or “jif.” The file type's creator has stated it should be “jif,” but others argue it makes sense to say it “gif” since the first word is “graphics,” which begins with a hard g sound.
Regardless of how it's said, the GIF has a long history of use on the web.
GIFs display images with 256 colors or fewer and support transparency and short animations (like those found in memes). Any art that has very few colors and simple transparency, such as a logo or icon, will keep file size low and quality high.
PNG: Portable Network Graphics
PNGs, simply pronounced “P.N.G.,” have similar uses to GIFs, but they support far more colors and produce better quality in handling transparency, especially visuals like a color fading to invisible. They also tend to load faster than GIFs. PNGs have all but replaced GIFs, now that they have almost universal support across web browsers. So, PNGs have become the best option for images with large portions of flat colors or that are at least not photo realistic. If the PNG format is used for a photograph, the file size will skyrocket.
PNGs should also be used for images where text is prominently featured. Since PNGs do not compress image quality, this format will keep text crisp and easy to read.
See how well you understand what formats to use for different kinds of images. Match each image below with its most appropriate file type option.
Which one?
Photographs or photo-realistic color palettes should be set as JPEGs.
Photographs or photo-realistic color palettes should be set as JPEGs.
Photographs or photo-realistic color palettes should be set as JPEGs.
PNGs are best used when an image needs detailed transparency and a variety of colors in an illustration.
PNGs are best used when an image needs detailed transparency and a variety of colors in an illustration.
PNGs are best used when an image needs detailed transparency and a variety of colors in an illustration.
GIFs are most appropriate for images that use very few colors and require only basic transparency, or short animated images.
GIFs are most appropriate for images that use very few colors and require only basic transparency, or short animated images.
GIFs are most appropriate for images that use very few colors and require only basic transparency, or short animated images.
GIFs are most appropriate for images that use very few colors and require only basic transparency, or short animated images.
GIFs are most appropriate for images that use very few colors and require only basic transparency, or short animated images.
GIFs are most appropriate for images that use very few colors and require only basic transparency, or short animated images.
Photographs or photo-realistic color palettes should be set as JPEGs.
Photographs or photo-realistic color palettes should be set as JPEGs.
Photographs or photo-realistic color palettes should be set as JPEGs.
PNGs are best used when an image needs detailed transparency and a variety of colors in an illustration.
PNGs are best used when an image needs detailed transparency and a variety of colors in an illustration.
PNGs are best used when an image needs detailed transparency and a variety of colors in an illustration.
You got # out of # correct. Click the Retry button for another attempt.
You got a perfect score. Great job!
