Image File Types (GIF, PNG, SVG, JPEG)

 

Web Structure

Web Structure

New

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

HTML Structure

HTML Structure

New

1:55

The Box Model

The Box Model

New

1:54

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

CSS Layout

CSS Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Width & Height Units

Width & Height Units

New

3:59

Positioning Overview

Positioning Overview

New

1:48

Intro to 3D

Intro to 3D

New

2:25

Images & Colors

Images & Colors

New

Image Resolution

Image Resolution

New

3:28

Image File Types (GIF, PNG, SVG, JPEG)

Image File Types (GIF, PNG, SVG, JPEG)

New

2:22

Color values (HEX, RGBA, color names)

Color values (HEX, RGBA, color names)

New

3:22

Dynamic Content

Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

SEO

SEO

New

Intro to Paid vs. Organic Search

Intro to Paid vs. Organic Search

New

1:34

Intro to 301 Redirects

Intro to 301 Redirects

New

2:39

new course
CSS grid landing page tutorial (36min)

Lesson info

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.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

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.