Build Your Own Business Website header image

Optimizing Images For the Web Part 4 – Image Editor Settings

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 4 of Optimizing Images, A Beginner’s Guide and in this session we give a step by step tutorial on how to create and edit settings of images using Photoshop. We begin by comparing sizes, version and quality using the Web & Device tool. We also discuss what to look for in other image editors so that you can achieve the results shown here in Photoshop.

Video Transcript

Now I’m going to show you in Photoshop. Now I know most of you probably don’t have Photoshop but it’s easy for me to demonstrate this is Photoshop. So that’s why I’m using Photoshop and Photoshop is the tool that I use for all the images on sites that I work on or my own site. I’m going to show you a similar sort of thing in paint.net but it’s just much easier to demonstrate this as a whole here.

So here are the 2 images that I used. If we look at their sizes, if we look at the canvass size of this image, it’s 291 by 200. And if we look at the canvass size of this image, it’s 291 by 200 so they’re both exactly the same size. And if you look down here at the bottom, you can see that the document as it sits right there is 170.5 k and 170.5 k. Before I cropped it down, I actually… this is… it was still that size. But before I cropped that down, it was actually 735k but that’s just because this is an image in progress.

But nevertheless, you have these 2 different images here that I was demonstrating. And Photoshop probably… the Photoshop elements has this ability to save for web and devices. So if we come over here and say save for web and devices, when you save for web and devices, you have this choice of the types of images to choose from. You have the gif with varying degrees of quality and so that is… this 128 stands for 128 colors, 32 stands for 32 colors, 64 stands for 64 colors. And then you’ve got jpeg, high, medium, low and you’ve got png 24 and then you’ve got png 8. And actually, png 8 also has the same levels of transformation here or same levels of quality.

So for example, we’re looking at this right now. Well, if we look at it as a png 24, png 24 doesn’t actually have any quality levels. It is whatever it is. And however, there’s a gif with 128 colors. We could take that up to 256 colors. See, if 256 colors, actually, it doesn’t look too bad but it’s 38k whereas if we come back to our jpeg and we look at medium which is what we’re looking at right here, the jpeg medium looks every bit as good as that at 7k.

So what this tool does is it gives you the ability to look at various options and compare their size with what the image is going to look like, to determine what the level of quality it is you want to use. And so in addition to that, Photoshop has this ability where you can look at different version. So here’s the version as it existed at its original size of 171k. Here’s a version that is a gif with no dither and 64 colors. And let’s see, if we… let’s just pick a gif 64 dithered. This is what I chose for the example. And then down here, you’ve got 32 no dither and then you’ve got… well, this is 88% dithered. That’s just a little finicky. Let’s just take it up to 100% and then this one, we’re going to change down to no dither. So we’ve got a 64 no dither, a 32 no dither, a 64 100% dither and then you’ve got the standard. And you can look at the difference between the 3 of them and then you can look at the difference in the file size, 26.9, 19.8, 14.9. And so this gives you the ability to you know, make a choice here.

So this is the standard… I mean, this is the image as it was created. This is the image as I showed it to you earlier. If we go over to png 24, that’s the image at its… I mean, the png format and here is the image in the jpeg medium format. And you can compare the sizes and the quality of image. And I mean, I think you can… I think it’s fairly obvious that this is the right choice in this situation. And so that’s what you would do is you would pick this choice as a choice. So you pick jpeg medium for this and hit save and then you have the choice of saving it then as a jpeg.

Okay let’s create a transparent image and we’re going to create that transparent image by actually just turning off the background here. This is an image that I’ve been working on for a tutorial I’m going to do on the new Header Widgets plugin. And so if I was to use a transparent background image here for this, let me come over here and we say save for web in devices. If we come over to the 4-Up here, see jpeg doesn’t actually provide the ability to have transparency. You can’t have a transparency in jpeg so it’s transparency is automatically turned into white in jpeg and both of these are jpeg. This is a jpeg and then this is png 24. If we take this and make it a gif 64, a gif can have transparency but just not semi-transparency. So it can render… it can either be totally transparent or not transparent at all. Those are its choices whereas the png can be totally transparent or semi-transparent. So those semi-transparent images I showed you before, those are all created using png 24s.

Actually, you could use a png 8. Png 8 also does not semi transparency. A png 8 only support solid transparency and so if you’re going to use solid transparency, you may as well just go ahead and use a gif except in some very limited circumstances. So usually, just comparing the difference between png 24, gif, and jpegs. But in terms of the file size, you can see that the png 24 transparent image has a 7.6k. The gif has a 4.2k and the jpeg has a 5.7k and looks like crap. If we come over here to the gif, we could probably you know, crank up the number of colors and it would still be a little smaller than the png even at the full color palette. And yeah, so we’ve got the full range of colors and we take that dither up to 100%. There’s its maximum size of image under the circumstances, that’s 5.7k.

What else was I trying to communicate with this?

Okay so now let’s take a look at what this would look like if you were using a different product to create this. Okay, somebody asked me to explain the concept of dither. Dither is the ability to feather between colors. So let’s see, you can see where I… we can zoom in on this even closer. You can see where this yellow and black blend in here in these little pixels and it goes from black to sort of a lighter black to a lighter grey. You don’t have a real strong line of demarcation. It’s not like every pixel here is black and then the next set of pixels was yellow but there’s a panel all blended. That’s the dithering.

So if we say no dither here… where did no dither go? Oh okay. Now if we just reduce the amount of dithering. Let’s just take the dither out altogether. Without the dither, this is much stronger in line than it is with the dither and with the dither turned up. You have more variation inside the pixel itself. The pixel isn’t a solid color but there’s a softer change across it than if you have no dither at all. So dither is the means by which you change from one color to the next and soften the edge of that.

So you probably have seen images where… well, in fact, let’s just cancel this. Let’s turn that white back on and let’s zoom in on this. You’ve probably seen images where there was a real strong jagged edge in them. Now, there are a couple of reasons why. One of them is that it was expanded. That is, the image used to be smaller and someone enlarged it without using a good program for enlarging. And so the edge doesn’t expand properly and therefore, developed these jagged edges. Now, this isn’t really a jagged edge that were zoomed in so closely to it that it looks jagged. But where was I going with that? I lost my train of thought there.

Generally though, what I’d choose to do is to dither and not to not dither. I want to dither because I want these colors to blend as they make a transition. Dithering costs you… the higher the dither, the higher the quality of the image. So with jpegs in particular… I mean, I’m sorry… with gifs in particular, you have a choice of… you have 2 measures of quality. One of them is the number of colors and the other one is a quantity of dither. And so a 200… a gif that has 256 colors and is 100% dither is the maximum quality of a gif. I usually you know, I usually leave my dither on the dither setting which maybe is 88%. Maybe it’s 100%. I usually leave that setting alone, simply select dither and then change the number of colors. This graphic itself doesn’t actually need you know, 256 colors in order to look good. And so, save for web and devices.

And so in this case, I would not use 256 colors. I think probably, 128 colors dithered gives me an acceptable transition here. Although this is instructive of the transition, you can see that the transition still isn’t as smooth as it would be. If we want 256, I bet you it’s a little smoother. Yeah, 256 is definitely smoother and so is the png 24. You know, it’s a nice, smooth transition from a lighter yellow to a darker yellow.

So then next, I’m going to show you what this stuff looks like if you use a different… if you use paint.net instead. Let’s see, paint.net. Oh my gosh, it doesn’t look like I have paint.net installed on the computer. Okay well, I rebuilt this computer a month and a piece ago I guess and I guess it didn’t install that.

You know, so I think what I’m going to do here now instead of showing you what it looks like in paint.net… what the point I wanted to make in all of that was that you should look at whatever photo editing program you’re using. When you go to save, you want to look for those types of options. You want to look to be able to… you want to look for something like save for web and devices or save for the web or whatever rather than just save. And then when you save it, you want to look for choices like the ones you see here in Photoshop. And if your image editing program doesn’t provide you with choices like this then you need to find a different image editing program because there’s no use in using an image editing program that doesn’t allow you to optimize your images for the web. Even if the image editing program is free, you still don’t want to use it because the goal here is to get the highest quality of image with the lowest file size and find that balance.

0 Comments… add one
0 comments… add one

Leave a Comment