How to Optimize a Picture for the Web

Video Transcript

"Did you know you can significantly speed up page load times by optimizing your graphics? Hi, I'm Dan Afonso, of Afonso Consulting and Enfold IT, and this is how we're going to optimize graphics for your website. Graphics optimization is sort of a black art that came about from the dawn of the Internet. Back in the day, computer monitors could display 16 256 colors and the rare ones that could display 16,000 or so. In those days we had what's called palleted graphics. Palleted graphics meant you had a range of 200 some odd thousand colors, but you could only choose 256 to display out of them. This was a problem if you had a lot of conflicting graphics because you could not get all the pallet slots that were required to reproduce it. Back then optimizing was critical or you'd wind up with a really terrible looking website. Nowadays almost everyone has at least 16,000 colors and most people have at least 24 million. So what we're going to do here is we're going to take a photo, in this case a couple of canoes lying around and we're going to optimize it for the web. Now the thing is, this photo is 2048 pixels by 1536 wide, it's gigantic, it's about 1.3 megs. Loading this on your average web page, it's just, it's not practical. It's much bigger than the rest of the text that's going to be on there under most circumstances. So the first thing we're going to do to take your camera, just right off the camera is we're going to take the most interesting part. Now I'm using a program called Gimp, Photoshop will do this, just about any graphic manipulation program will do it. Gimp I like because it's free, well supported and they're always adding stuff to it and it feels good to support open source. So the first thing I'm going to do is I'm going to go grab the crop tool. The crop tool allows me to take out just the interesting part of the picture. So I'm just going to grab the canoes and a little bit of the bushes, there we go and it's going to give me a window of choices, off the screen, no there, it's over here. So we can crop and I can change the aspect ratio, I can change the surround once I have and once I'm done I'm just going to click in the middle, okay there's my picture. Now we've taken this down to 1752 by 1112, it's still way too big for a web page. So figure out how big you want it on your web page. The average monitor nowadays is about ninety dots per inch and will go down to about seventy-two dots per inch. You can work out the math or you can guess. I'm not adverse to guessing so I'm going to put this at full size, instead of fifty percent like it is now, a hundred percent, okay. So I'm going to go into image, scale it, and I'm going to take that and make the image a proper size. I'm making sure the aspect ratio is locked, if I do not do this, it's going to get skinny or fat. So we're just going to make this, I don't know, we're going to make it three hundred wide. See, look, the interpolation, that's how it takes into account the information that isn't there. Cubic is fine, just use the best you can, because speed is really not important in this case. So I'm going to hit scale, it scales it, a hundred percent. That looks like about the right size to put it on a web page, so we can leave it there or it can undo by hitting control Z and changing it again. Now, the next thing you want to do is reduce quality. You don't really want to do this on pictures that are supposed to be line art or graphics. It doesn't look good, the artifacting as it's called will just be obvious, where there's little dots everywhere on it. But this is a photo, so what we're going to do on it is, we're just going to get into the right size, again I'm going to scale the image, I'm just going to set it down to, this time I'm going to make it a little bit bigger about four hundred wide, so we can actually see it. Okay, we got that, and now what I'm going to do is I'm going to save it as a jpeg under a different name. To save it, it's going to ask me what quality do I want. Now this is at ninety-four quality. This is an arbitrary scale. I can show the preview and also lose the window and we can see exactly what we're going to get. So, I'm going to preview it and at ninety-four it looks about the same. If I drag it down to seventy-two, it still looks about the same. I can drag it down to five and now it doesn't look so good. So, but we can really just bring it up, we can drop it down to a thirty, the graphics file is now 21K down from one meg and we save this. This is reasonable to put on our website. I'm Dan Afonso and I hope that explains to you how to optimize graphics for web pages."