Build Your Own Business Website header image

Optimizing Images For the Web Part 3 – Image Type

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is Part 3 of Optimizing Images, A Beginner’s Guide and in this session we discuss the types of image compression format: jpg, gif, png. We discuss which is best suited for photos, graphics and use with transparency and the pros and cons of each format with examples.

Video Transcript

Okay so the next level then is image compression format and we’re really talking about 3 different types of image compressing. We’re talking about jpeg, gif, and png. And as a rule of thumb, a jpeg is best of photographs, gifs are best for graphics, and pngs are best for any kind of image transparency. So that’s the best rule of thumb to use. If you’re looking at a photograph, ignore gifs and pngs. If you’re looking at a graphic, ignore jpegs and pngs. And if you’ve got transparency in the image then ignore jpegs and gifs. Gif does actually have transparency but it doesn’t have semi-transparency unless the transparency is perfectly executed, the transparency on gifs doesn’t look that great.

So this is sort of the standard rule of thumb. Jpegs are best for photographs, gifs are best for graphics, pngs are best for transparency.

Ken asks, what do I mean by transparency in an image? Well, images can be transparent or semi-transparent. And so for example, where do I have a good example of a… oh yeah, I mean, actually, I have a good example from last night. Let’s see, what was that? What was that… laurraine. That’s what it was. This image here, this is a semi-transparent image that is, if there was something behind this image, you would be able to see through it. And by this, I’m talking about this brush stroke that I use as the background for this heading. I wonder if I have another good example of this. I don’t even know if this site is still up or if it is up… oh yeah, okay sure. Here’s a… I mean, sort of. This is a semi-transparent image that overlays this space. And so I’ve got a nice background image behind it that you can see through it. And the same thing is true with this white color here. This is a semi-transparent image that is filling up the space and so you can see through it to see what’s happening below. And that’s what I mean by transparent or semi-transparent.

On the other hand, this image right here, this Tailoring Thesis image. This image is also a transparent in that it doesn’t actually have this green in it. The image actually is just the white with the shadow and the yellow with the shadow. And it sits on top of the green background color. And so this is a very common thing to do when you say have a logo that you want to impose over something else in the background. Same thing is true on this site. This image right here is a semi-transparent image and this grey is not part of it. In fact, the same is true for this section right here, this Thesis Toolbox. Again, this is a semi-transparent image or a transparent image that does not have gray behind it. And there are lots of reasons to do that. One of them though is to be able to have, like I said, a background image back behind that you don’t have to try to line up. If this had… if there were some activity going on you know, in this background image here and it was part of this, you would have to try to line it up. Actually, you know what? Maybe the confident mom’s a better idea. This is probably a better site actually because this has a fairly active background and so we use… yeah, okay.

So this image right here, the confident mom image, that image is a transparent image that is overlaying the top of this background image. This background image is a little square. It’s 100 pixels by 100 pixels that repeats itself all over. And so then we have this logo which sits on top of it. If it had this stuff in the background, you’d have to very carefully line it up so that it would line up with the background image which would be a total pain in the patoot. So actually, all of these things on Susan’s site are all transparent pngs that allow the background to stand out behind it or for this to overlay it, to give it a sense of you know, depth and that sort of thing. So anyway, that’s what transparency is in an image and those are the sort of applications we’re going to use transparency.

Jared asks, “Does it… can you just change the image file type by changing its ending?” No, of course not. It’s an entire set of technology that’s indicated by its file type but it’s not… you don’t change the technology by changing the text on it.

So anyway, back to the presentation. Jpegs are best for photos. Gifs are best for graphics. Pngs are best for transparency.

So now we’re going to take a look at some pros and cons here of jpegs. We’re going to look at the same 2 images in each of these examples. Okay so this is a photograph and this is a graphic. And they are exactly the same dimension and they are exactly the same DPI and they are relatively the same level of quality inside of their… well, they’re relatively the same image quality that is, they’re both medium quality jpegs. And on this graphic, you can see why jpegs are poor for graphics because… or actually, we’ll talk about why they’re good for photos. They are good for photos because photos seldom have solid colors. Photos always have gradations of color, whether it’s light and shadow or it’s you know, different colors on the fruit or whatever it is. This image has lots of variation of color in it and that’s what jpegs do best. Jpegs do not do solid colors and solid colors against other solid colors as well. So even though this little orange is really only 1 color in its image and this orange is only one color in its image, the jpeg compression nevertheless takes it and tries to make it not the same color. And so you get this modeling of color in here. And then when you put a dark color against a white background, you get modeling around the edges also or not modeling, in this case, you call it ghosting around the edges. And this ghosting is just caused by the jpeg’s inability to handle solid colors with strong lines of demarcation between those 2 colors.

Well so, this image is 7k which is of course, quite small and this image is 9k. They are the same dimension so this is a slightly larger image just because it’s got more data in it than this one does. But this quality is perfectly acceptable. You’d be happy with the medium quality image but you’re not going to be happy with a medium quality jpeg in this case.

Okay now a gif on the other hand, gifs are quite good at solid colors and strong lines of demarcation. So this is a gif with a medium resolution and the medium resolution gif has, in this case, it’s 64 colors is how it’s set. And so it renders these colors against each other very nicely. You’ve got a strong bright orange there. You’ve got a nice 2-tone lighter orange here, the solid black, solid grey, solid white up to the text, a solid orange line and a smaller image size. Remember, the jpeg was 7k and looks like crap. The gif is 5k and looks quite nice.

On the other hand, it’s not very good at this kind of an image at a photograph. In the first place, because I used the same quality of compression on both, that is, they’re both 64 colors, this one ends up creating these solid color areas and these odd little bits of demarcation where you can see this bright yellow and then this kind of a lighter yellow or I mean, lighter green and then a darker green. And it’s not a nice, smooth transition from one color to the next as it over here where you can’t see a strong demarcation. It just blends right across. Jpegs or gifs don’t blend like that and so if you want to get that blending action in a gif, you have to really increase the quality.

Well okay, so these things have exactly the same dimension. They have exactly the same image quality but the gif produces a 24k image here and a 5k image there. So you can see that the gif is much better at rendering this than it is at rendering that. And in fact, the jpeg is 9k here so it’s less than half the size of the gif and is a higher quality image than the gif was.

Okay so we have a much nicer application… well so, this is a poor application for a gif. And then we have the 3rd one which is the png. Now, neither of these images have transparency in them but you can imagine that this one could have transparency in it. And in fact, if it… actually, we’ll create one that does have transparency here in a minute so you can see what that shakes out like. But this is actually the best quality of this image. It’s a little bit larger than the gif but it is absolutely flawless in the variation of color from light orange to dark orange through here and then flawless in the solid colors, flawless in the separation between the white and the black here.

If we go back over to the gif for a second, you can actually see a stronger line between orange and yellow here, between these two because it just doesn’t do the transition across colors nice and smoothly at this compression. Well, at 9k or pardon me, at 9k, this is a perfect image. So the png 24 is a very good choice for this kind of an image. And actually, it’s a perfect image here too except you can see it’s 96k. Again, same level of quality for both of these and they are the same size of image. But because this is a photograph with lots more colors in it than this is, this only has a finite number of colors. This has probably millions of colors in it. 96k is what the png takes to render this at this quality.

Now, it is slightly better than that jpeg at 7k, right? It is slightly better I’m sorry, at 9k. But nevertheless, this is 1/10 of the size. So never use a png to do this. You’d always use a jpeg to do this because… and you could even approach the… if you had a high quality of a jpeg, it would be a little bit better than this so you really probably wouldn’t notice it. But it would still be smaller than this.

So that’s the story there in terms of the good potential applications.

0 Comments… add one
0 comments… add one

Leave a Comment