WEB STRUCTURE

WEB STRUCTURE

New

Element Hierarchy

Element Hierarchy

New

3:57

Navigator Panel

Navigator Panel

New

2:45

Structure Elements

Structure Elements

New

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Buttons & Links

Buttons & Links

New

Button

Button

New

14:08

Link Block

Link Block

New

9:35

Text Link

Text Link

New

1:16

Typography

Typography

New

Heading

Heading

New

2:02

Paragraph

Paragraph

New

4:42

Rich Text

Rich Text

New

3:52

Text Block

Text Block

New

0:56

Block Quote

Block Quote

New

0:42

List

List

New

2:31

Media

Media

New

Image

Image

New

3:39

Image File Types

Image File Types

New

2:22

Image Resolution

Image Resolution

New

3:28

Assets Panel

Assets Panel

New

3:08

Video

Video

New

1:20

Background Video

Background Video

New

3:15

Lightbox

Lightbox

New

3:44

Forms

Forms

New

Intro to Forms

Intro to Forms

New

4:55

Styling Forms

Styling Forms

New

2:55

Navbar

Navbar

New

Navbar

Navbar

New

9:38

Styling a Navbar

Styling a Navbar

New

4:34

Navbar Menu Button

Navbar Menu Button

New

4:51

Dropdown

Dropdown

New

4:38

Pre-built Components

Pre-built Components

New

Slider

Slider

New

4:56

Tabs

Tabs

New

4:38

Map

Map

New

2:58

Social Media Buttons

Social Media Buttons

New

2:49

Custom Code Embed

Custom Code Embed

New

1:24

Symbols

Symbols

New

3:47

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.