Lesson info

Understanding your image file options — and when and how to use each — can be key to building great websites. That's why this video focuses on explaining the bitmap, GIF, PNG, JPEG, and SVG image types, and the best use cases for each.

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

Images and other graphics can often make or break a design. And we’ll start here with file types. And we’re going to focus on bitmap, GIF, PNG, JPEG, and SVG.

Bitmap: Don’t use this on the web.

GIF (or “JIF” depending on what part of the internet you’re from): It’s used for a lot of simple animations. It only supports 256 colors, and if that’s all you need, it might be an option for you. GIFs also allow for transparency, but they don’t support alpha transparency. This means anything other than absolutely opaque or absolutely transparent won’t show up that way.

Up next, we’ve got PNG—or “P.N.G.”: This is a great file format if you need transparency—specifically, if you need alpha transparency.

Of course, we have JPEG—extremely common format. Supports compression, which is awesome, because remember Bitmaps? Yeah, nothing’s changed—we still don’t use those on the web.

But the great thing about JPEG? This JPEG file is just over 300 kilobytes. But this bitmap at the same resolution—same dimensions, is over 50 megabytes. The bitmap…is over 150 times the size. Why?

Well, bitmaps contain precise data about each and every pixel. That’s a ton of information. So when you save a bitmap, think of this patch of gray pixels as being stored as, “gray pixel, gray pixel, gray pixel” and so on. And when creating a JPEG, this area can be pretty compressed, without losing the essence of the image. That means we probably don’t need all this precise, repetitive data for each and every one of these pixels. So JPEG is a pretty great, flexible format.

Finally, we have SVG—scalable vector graphics. The wonderful thing about vector graphics is that instead of having fixed pixels like you would in any of the other formats, SVGs aren’t resolution-dependent.

You can scale them infinitely with really great results. And in most cases, SVGs are used for shapes, text, sketches, logos—but for photographs, which are made up of actual pixels, you’re much better off choosing one of the other formats.

So…that’s our contingent of common file formats. We’re going to make bitmap tiny and red and strikethrough and move it almost entirely off the screen so it’s clear we really don’t like using that format on the web. But that’s our list of common file types. You can mix and match these depending on what works best for each image in your project.

Related tutorial

Image file types

2:22