Start learning today, and be successful in your academic & professional career. Start Today!

• ## Related Books

### Start Learning Now

Our free lessons will get you started (Adobe Flash® required).

### Membership Overview

• *Ask questions and get answers from the community and our teachers!
• Practice questions with step-by-step solutions.
• Track your course viewing progress.
• Learn at your own pace... anytime, anywhere!

### Web Image File Formats

• The Web image formats.ppt file is located in the extras folder within the ppts folder
• There are specific image formats to use on the web
• The formats are jpg, gif, and png
• Preview the PowerPoint file to learn about the difference between raster and vector images, optimization, and which image formats are available to use within a browser

### Web Image File Formats

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

• Intro 0:00
• Two Different Image Formats 0:43
• Vector Graphics
• Raster Images
• Raster Image Formats 2:49
• Three Types of Raster Image Formats
• Optimization Process
• GIF Image Format
• JPG Image Format
• PNG Image Format
• Vector Graphics 11:40
• Scalable Vector Graphics
• Web Page Image Creation Tips 14:18
• Summary 16:20

### Transcription: Web Image File Formats

We're going to now take a look at the different image formats that are available--both the two formats that are available (or two different types of images) and then, within those formats, what are the formats we can use within our web pages?0000

Because that is really the important piece: we want to make sure our images can display properly in a browser.0018

So, let's take a look at the different image formats and why we might choose one format over another.0025

I find a lot of people don't really understand when to use what format.0034

So, hopefully, this will help clarify things for you.0039

Ultimately, images come in two different formats--two different forms--and people don't realize that.0043

The first one is a vector graphic; and think of a vector graphic as being Mr. Math; so what happens is: math creates your images.0052

Up until now, the only way to display vector graphics on the Web was really to use Flash; and that is why Flash, as a program, always needed a plugin available--because browsers don't do math.0066

What we need to do is bring in somebody who does, and that is what the Flash plugin does.0082

It literally reads the information in the images and draws the images as it goes.0088

Because it is using math, it is a very small file size in order to create the image.0095

So, vector graphics are very small in terms of their size.0102

That is why working with them is great.0108

The other benefit of a vector graphic is: it's very nice to be able to resize using vectors.0111

But I'm afraid, unless we are using Flash, we are going to move into the raster piece.0118

Raster images are the ones that we are going to deal with on the Web.0125

Rasters are made up of pixels, so every little square of a pixel of an image is what is being stored; every little pixel has a lot of data within it.0130

And because of that, as your image size grows, so does your file size; it's just more and more pixels of data to store.0142

But this is our standard image format for the Web.0151

Let's take a look at the different types of raster graphics that are available, and also get a little bit more information about vector images.0157

Raster image formats: there are three of them.0170

There is a GIF (or a "jiff"--it's pronounced both methods; I always think of the peanut butter when I think of "jif," so I always call it a "gif"; so you will hear me reference it as a "gif").0174

The second format is a JPEG format, and the last one is a bit of a newer format (the format itself isn't new, but being able to use it on the Web is); and that is a "ping," or PNG file.0190

Each of these formats has these very different properties built into them; and there are times when you will want to use one versus the other.0206

But, notice: you get to choose the format for every image; and you should be the one in control of which format to use for what images.0215

So, the optimization process: a very important process when we are working on the Web.0228

Raster images are made up of pixels, and every pixel stores a lot of information about the images.0236

Now, the more image information you store in each pixel, the larger the file size.0245

We get a lot more pixels; so does our data grow; and our image size grows as well.0252

What we want to do is do something called an optimization process for our images.0260

What happens is: we control what image is saved or what information is saved, and we can also control the format during that optimization process; and we want to determine exactly what information within each pixel we need, because we need to get that file size down when we're working on the Web.0268

In order to reduce the file size, you have to reduce the information stored in every pixel.0296

There is no other way around it, at least with raster images.0302

So, what do we do about it?--good question.0309

Let's take a look at that optimization process a little deeper.0314

What we want to do is control the removal of information; and each type of image determines a little bit different method for controlling that removal of information.0318

But we want to maintain the quality, because if your image can't be seen (if it's a terrible quality), nobody really cares what type of format it is.0333

I cannot stress this one enough: I'll put a big circle around it--every image you create for your website should be optimized.0343

The optimization process sets the format, reduces the file size, and also resizes physically the size of your image to fit perfectly on your web page where you want to use it.0355

But you get to choose the best format; so it's important to understand that optimization process.0372

Let's take a look at the GIF image first.0388

So, the GIF image is the most common format on the Web; it has only 256 colors in it--that is it.0391

But it does allow for animation, and there are some very interesting animations being created nowadays for this.0402

They are called cinemagraphs (provided I can spell cinemagraphs), and they are something you may want to take a look at.0411

It has kind of reinvented the GIF image, using that animation piece.0422

Also, the GIF image allows transparency; so we can make the background appear to disappear.0427

In other words, every pixel is a square, so there is no way around those square corners on an image; but what we can do is make those pixels surrounding the image clear.0436

So, even though they are square, they are not saving a color in them; and what that does is make it appear like the image is floating on the background.0450

Also, the big one with a GIF is: it is lossless.0459

You can reduce the file size and maintain the quality of the image; you don't have to reduce the quality of the image in order to lower the file size.0465

The way you do that is using this piece here, 256 colors; so let's say you have a logo that uses 2 or 3 colors--so I have three colors in my logo, as an example.0477

Wells Fargo is a good example of that: there is a red, a yellow, and a black, and that is it in their logo.0493

Why should I store 256 when I only need 3?0500

What I can do is subtract 253 of those colors from every little pixel in that image; I don't lose any quality, because my image only needs three colors.0506

That is why call it lossless.0520

And the way I would do that is through the optimization process.0522

Now, there are some other formats for the Web: JPEG is one of them.0529

JPEGs have millions of colors in them; so they are not limited to 256, like a GIF.0535

There are no animation capabilities and no transparency capabilities, either.0543

You can see why a GIF image has been used and is very common on the Web.0548

But a JPEG image is lossy: the only way to reduce the file size of that image is to drop content from every pixel; as soon as you do that in a JPEG, you are losing quality on the image.0555

JPEGs--they are a great format, but you will always lose quality when you try and reduce the size.0571

And the last Web image format that is available is a PNG.0579

Now, a PNG was invented in the late '90s, 1990s--yes, that long ago--but browsers didn't start supporting it for almost 10 years.0586

Now, you can use a PNG on the Web, but there are different types of PNGs.0597

It's not like a GIF or a JPEG, where really there is just one type; PNGs have multiple, and it determines the bit depth of that PNG image and what it can accomplish.0603

It uses millions of colors, just like a JPEG; it has no animation, just like a JPEG; but it has multiple levels of transparency, which is more than what a GIF can do.0616

You can see, it is kind of a combination: this image format was designed to really solve the problems of GIFs and JPEGs, and it really didn't quite make it, because first of all, it took forever for browsers to support it.0633

Now, a PNG format is considered lossless: you can reduce the file size without losing quality.0649

That part sounds great; but this image format, for me personally--whenever I try and make my images a .png, or a PNG format, they usually end up larger than my GIFs or JPEGs.0658

Now, you could probably put a bunch of people in a room and ask them that same question, and they might differ from me; but I have yet to find images, even over doing it for many years--images that become better as a PNG than a GIF or a JPEG.0675

So, just a side note on that one: like I said, other people might disagree with me, but that is what I have personally found.0692

Now, let's talk about vector graphics.0700

These are very different from a raster image, stored as point locations; so what happens is: if you have...let's say this is your image, or that's your web page, and what I can do is store points for where that image is going to be located on the page, and then the browser draws the rest.0703

Or, whatever is reading that format--since browsers can't yet do this (we are on the verge, but not quite there), that is why we really have a tough time putting vector graphics on the Web, unless it's Flash.0728

And that is why Flash became so popular so quickly.0745

Because we are just storing those image points, the file size is very small.0749

There is a new vector format that is coming out, called SVG; it stands for Scalable Vector Graphics, and you may start seeing more and more information about it out on the Web.0755

There are a few graphics programs that can create it; but browsers don't have full support yet, by any means.0768

That is something you would want to test; but you will be hearing more about SVG graphics in the future.0777

Now, some programs, like Adobe Illustrator, as an example (which is really a graphics program, but specifically for vector graphics)--that program is now fully capable of creating SVG image formats.0788

They did move it over within the last 2 or 3 versions of Illustrator.0806

Only the latest and greatest browsers support SVG; so don't plan on Internet Explorer first of all, especially if it's older versions, supporting SVG right now.0812

Since that is the biggest percentage of browsers worldwide, this is a format that you really have to be careful who your audience is and what browsers they are using, before you can use it.0825

But it is a very exciting format: we would finally be able to have built-in browser support for vector graphics.0837

I can make my graphics small; I can make them big; they look perfect, whatever I do, when I resize them.0846

And that is another benefit of a vector graphic.0853

So, I want to give you a few little tips on working with your images on your website.0859

What you want to do is never assume your image will be one format or another; always check--the one you want is the one with the best quality and smallest file size: that is the key.0865

Optimize every image--I can't stress that enough--on your web page.0881

And image dimensions do affect file size: the larger the dimensions, the more pixels there are, the larger the file size.0889

If you start by making your images smaller, and then you can optimize your images from there, you will have much smaller file types.0899

Always save, and I mean always, always, always save, both the original image and the optimized version.0909

If you need to re-optimize, or you need to change that image that is going into your web page, this is what you go back to--the original image.0919

Here is our big one: always, always...0931

So, those last two are very important: it will save you a lot of time and a lot of issues if you just plan on following those last two rules.0934

Always save your original image and the optimized version, and go back to that original before you go to use or recreate another image in that same item.0945

So, in other words, let's say I make my image one size, and I put it on my web page, and I don't quite like the size--it needs to be either bigger or smaller.0957

I never change the size of that optimized image; you always go back to your original, re-optimize to the exact size you need, and use that new one within your website.0967

Those are the image formats that are available, specifically on a computer, and we focused primarily on those that can be used on the Web and gave you a few tips, moving forward, for your image creation for your website.0980

Those are the Web image formats that are available for you.0999