Which image type?

Hi, and welcome to this Dreamweaver tutorial. My name is Daniel Walter Scott,  and I'm a trainer here at Bring Your Own Laptop. This training course is for people new to Dreamweaver  and people new to web design in general. Uh, in this topic, we're gonna talk about image types. Okay? So I've brought up here in InDesign our little notes  that you can download from our website at bring your own  laptop.com au and look for the resources button,  and you will find the Dreamweaver tutorials.

And here you can download the PDFs. Okay? Um, so we're gonna talk about the different image types you  can use on a website. So the first one that you might have heard of is a tiff. Now that can't be used online, it's really good for print. So those of you who are graphic designers coming into web  design, you can't use a TIFF online, just doesn't show.

So you're left with three different image types you can use. One is a jpeg, okay? One is a gif, one is a p and g. Now, a brief overview of those three  JPEGs are really good at photos, okay? And photography gifs are really good at things like icons  and logos and type, and p  and gs are really good for things  that need transparent backgrounds. Okay?

That's a broad overview and a bit more detail. A JPEG is great for photographs  because it uses loads of colors. It has something like 16.8 million variations of color  as opposed to something like a GIF that only has 256. Okay? So, um, jps are great for photos. And the other benefit of using a JP is that it enable,  it uses something called a lossy format.

You see it there, okay? The loss format is, um, all that means is is  that it can be scaled down  or different quality sliders so you can lose data, okay? Which is really good for compression. It means that if you ever use something like Photoshop  to save a jp, it gives you a quality slider for print. You probably want it maxed out as high as it'll go. But for on websites, you want to kind of drag that slider  as low as it'll go, um, to get the file size down,  but without losing, um, any of the detail  or as much as, uh, too much of the quality.

So jps are great because they have loads of images. They, they're really good  because the quality can be adjusted  to give you a lower file size. And generally jps work really good at making small  file sizes for images. Okay, so let's look at the gif. We talked about the gif. One of the drawbacks for a GIF is  that it's only has 256 colors it can use.

The positive is that it is very small,  often smaller than a jpeg. The other perk for a GIF is that it is really good for  text and image and logos  because the way that a gif works, okay, the way  that it's put together is  that it retains a really crisp edge on things like, uh,  on really high contrast things like type and like logos  or small icons that don't have too many colors. Okay? So gif are really good for those sorts of things. Buttons, icons, logos, any sort of clip art style  of graphics that have really simple colors  that don't have more than 256. Okay?

So the last one is P and g. Now p and G eight, you don't want to use, okay? There are p and g 20 fours and 30 twos. Both of those will work, okay? So PG eight is a bit old school 24  or 32, depending on which program you use,  will save out this option, okay? And the reason we use it is that, um, it has the best of,  best of both worlds for gif and jpeg.

Okay? It able, it's able to show really crisp edge type  and logos like a gif can. And it does really well at showing, um, images  because it has loads of colors like JP does. But the problem with the p  and gs is the file sizes get really big. It uses something called a lossless format as opposed  to JP JPEG's. Lossy lossy means that you can lose data  to get the compression down, whereas JPEGs don't have  that slight, um, don't have that kind of compression.

It just a j uh, p and G is always going to be good. It's as good as it's ever gonna be. There's no low quality p and g. So the problem with that is  that the file sizes tend decree up higher than  a GIF or a jpeg. So when it comes to web design, it's a trade off  between quality and file size. And file size is a big part of it.

So if I can use a JPEG to get a smaller file size of the p  and g and you can't tell a visual, uh,  visual difference, I'm going to use a jp. Okay? So, um, the reason you would use a PNG is  that it has transparency, GIF has transparency,  but it's very, very poor, okay? It's only able to turn pixels completely see through  or completely opaque where it has a PNG is able  to show you a, um, multi-level transparency, great  for drop shadows and things that need  to have a transparent background. You might have an image  or a product, you've taken a photograph  and there needs to be a transparent background  to show the background in your website. Okay?

I hope that's helped explain the difference between JP  gif and p and g. Now, it can be a little confusing, so  what we'll do in the next tutorial is we'll look at using  Photoshop to create these images so  that you can really see the difference, uh,  between the two formats or three formats. All right? So that's the end of the tutorial. We'll see you in the next one.