This is Part 2 of Optimizing Images, A Beginner’s Guide and in this session we discuss the recommended image size and resolution. We also demonstrate how to use and not use image dimensions particularly as it relates to re-sizing.
So in terms of the first one, it surprises me actually how often people mess this up. But the answer to this is to always use images at 72 dpi. There’s never a good reason to have an image on your site that is at 300 pixels or 150 pixels or 96 pixels. Always use 72 dpi because that’s the only image resolution that you can view on your monitor. All other images are automatically edited… not edited really but are translated into 72 dpi. And so if you have a 300 dpi image and a 72 dpi image side by side, they will look identical to each other. And yet, the 300 dpi image will be several time the 72 dpi. So there’s never any reason to use anything other than the 72 dpi image. And so the first rule of this is to always use 72 dpi.
The second thing then is image dimensions and my suggestion here is to always use the maximum size you wish displayed. So if you want your image displayed at 560 pixels by 200 pixels then that’s the size that the image should actually be. It shouldn’t be 1020 by 400 pixels and get reduced down. It should be at that maximum size.
Now you may already realize that the web does allow you to resize images on the fly simply by explicitly defining their height and their width. So for example, you could take an image that is 560 by 200 and when you insert it into your page, you could say that it’s 600 by 200 and it would distort the image. Or you could say it’s 600 by 240 and then it would just enlarge the image. Conversely, you can do the same thing to reduce the size of the image. That is, you can explicitly make a larger image smaller or appear smaller on a page simply by specifying its height and width in the HTML.
However, you never want to use that technique to enlarge an image because enlarging an image that way just degrades the quality of it far too much. The web is not proficient at enlarging images like that. So you never want to make an image larger which is in fact, I think, something that I’ve seen… well, you never want to make an image larger than it originally was using that system.
And you seldom want to use it to decrease an image. And the main reason why you don’t want to use it to decrease an image is that it’s not optimizing that image. If you take 1,000 or 1200 pixel by 400 pixel image and reduce it to 600 pixels by 200 pixels by specifying 600 and 200 in the HTML, if you do that, it’ll make the image appear to be 600 by 200 pixels. However, you will have nevertheless, downloaded or required your viewer to download an image twice the size that was necessary in order to actually view that image. Because it doesn’t actually decrease the size of the image, it just decreases… it just changes the way that 1200 by 400 image is being displayed. And so decreasing the image size on the fly does not actually decrease the file size.
So yes, you can use it to decrease the image size and in fact you know, sometime in the not very distant future, we’ll all be talking about responsive design techniques. And I’m halfway wondering whether or not Thesis is going to have… this latest version of Thesis is going to have responsive design in it. I don’t know. But responsive design is the technology whereby a site is viewable in all different screen sizes. And so if you have a large image, when you’re looking at it on a small screen, the image shrinks down to fit inside that screen.
Well, the way that is accomplished is that the image is put in in its full size and then it’s given a percentage, by definition, it’s defined as being a percentage of the size of its container rather than being say, 600 pixels wide. It’s defined as being 100% wide. And so when the screen size is made smaller and the bounding dimensions of the container for the image is made smaller, the image itself shrinks because it’s now 100% of a smaller size. That’s really the only good application for using this method of calculating or using HTML to reduce the size of an image.
So the principle here is always use the size you want to display and I included maximum in this because of the… some people here may be potentially interested in using responsive design in their site thereby having this automatically be reduced. So you never want it to go up but you can let it go down although you should very seldom do that on purpose.
Jared asks if I can show an example of changing in an image size on the fly. Sure, I mean I’m recommending you don’t do it but I’m certainly capable of demonstrating it for you. You actually saw this happen yesterday in somebody else’s site where what they had done is they had artificially reduced… they’d had images at a specific… that were actually randomly sized images. And then what they tried to do is make them all uniform in size by saying what their height and width were.
If we… let’s see, let’s just do it here. Okay so this image, let’s see. I think this image is 160 by 314 pixels wide. We’ll go in and take a look at it here for just a second. So in my library, edit this image. Yeah, 314 by 160. Okay so now, I have it inserted using a widget and that widget is right here. I could easily say that the width of this is not 314 pixels but say 614 pixels. And if I hit save, we could take a look at it. You can see it’s stretched out like that. When you see people who have images on their site that look like it’s stretched out of proportion, it’s stretched out of proportion because that’s what they’ve done. They’ve you know, done something artificial. They’ve explicitly set a size in order to make it bigger and you could take this 614 and 320 so we made it… oh no, I’m sorry… 314 so that’ll be 328. If we made it twice its size here, twice its size of its original size you know, you can see how fuzzy it is around the edges and that little ghosting around the edges and that sort of thing. Actually, because this is a graphic rather than say, a photograph, a photograph would look much worse because this is a hard line graphic. It actually doesn’t look horrible but nevertheless, it is fuzzy because it’s been artificially or it’s been explicitly resized. If we take it back down to its original height, 314 by 160 and hit save.
There it is. It’s nice and crisp and clean. That’s the difference. All HTML images, this is just a standard image tag or yeah, it’s a standard image tag so it starts with IMG and then source equals. There’s the address to it and then it’s got alt and a title and that kind of stuff.
Well, width and height are can be explicitly set although it doesn’t have to be. For example, I can probably just delete this. Hit save and it’ll show up the right size because that’s the size of the image. So it doesn’t actually have to say what size it is because it’s going to display at the right size, its own size although I will put that back in here.
Okay so that’s what I mean by resizing it on the fly using HTML.