Lessons

Lesson Info

Optimizing Images for the Web

I'm going to start in photo shop, and it's funny. I had taught Dreamweaver and Web design in general for a long time before somebody said, You know, I didn't realize until I start getting into Web design, you actually spent a lot of time and photo shop when you do Web design, and it's made me step back and make sure I always include at least a little bit of Photoshopped in my classes. So I'm gonna show you two different ways to optimize images for the Web. First, I'm gonna just open an existing image. I've got some photos on my, um, computer here to play around with. So let's just grab a photograph of an owl here. Full disclosure for all the nature photographers. I took this in an enclosure. This owl was rehabilitating. It had had a broken wing, and it was in a 100 foot enclosure where it could fly back and forth. Well, it was learning to fly again. I was allowed to creep in there very quietly and take a few photos and then creep back out. I think about 4.5 minutes in that enclosure, b...

ut it was amazing they really don't make any noise. They really flap their wings in total silence. It's kind of eerie. Rose. Extraordinary. So do you have a photo like this? And lots of us take photos now with these wonderful high resolution cameras, and they're huge images and they might be in camera raw. And you can't use that on the way. You can Onley use J Peg, PNG or GIF format images on the Web, and that's because Web browsers need to be able to view them and display them. And Web browsers are not like Photoshopped. They can't display every image format out there. But it's also because J. Pegs and PNG Files and GIF files have some elements to them that allow us to make the file size smaller. This mattered a lot more in the early days of the Web, when we had those little dial up modems at 56 k Anybody remember the my husband can do the sound perfectly. I am not so good at it, but I know those of you have heard it or hearing it in your heads as I say this what it sounded like to make that connection back in those days highly optimizing images and making them a small as possible was really important. And it's one of the reasons that so many photography sites today, our little tiny images on our big monitors, and we're just not doing justice to those images. So part of what I want to remind you of today in this class is we get to go bigger, but not that bit. You can have much bigger images on the Web today, but we're still not talking 5600 pixels wide. That's just too much so. So when you open images and Photoshopped, the first thing you want to do is change the image size, and I'm gonna change this image size too 1000 by about 600. Here's a quick trick if you want images to be exactly the same, and you're already cropping them a little from their original. Yes, I cropped this down to get in on a more, uh, the canvas size is the perfect way to get just exactly if you want this to be 1000 by 600 so it's just a really quick Photoshopped trick. Change the image size you change the the physical dimensions change the canvas size and you could just crop a little bit off and get it, because a lot of things we do on the Web look better when all of the images are exactly the same size. So the first thing I did was resize that now a lot of you are probably already familiar with the safer Web or in previous versions said, Save for Web and Devices. And if I choose safer Web, I get a dialog box here. I can see things four up, meaning I'm seeing four different versions at once or two up just seeing two previews, and I can choose between different image formats here. GIF, PNG or JPEG. Anybody know why you would use when you would use one or the other? Go ahead so you would use P and G if you had transparent backgrounds that you wanted the image to see through. Maybe words or something. Um, JPEG and GIF is probably more. I don't know if it's would be Java or moving images. And then J Peg would be It's still, I'm guessing is a really good stuff. Let me try and explain this, but thank you and I love that. There's some people here that already know something. So the simple answer is J. Pig is almost always the best one for multi color images. So if your photographer and you're used to J pegs, you're right. Stick with J pegs. You're totally right. The PNG is what you should use if you have transparency, and a lot of times we want something kind of float on the page. Or we want something that doesn't have anything around that Ukrop something out. You want it to be transparent against a background. You're gonna want to preserve transparency. You can only do that in the PNG or gift. For me. Gift was the first option. PNG is a relative recent comer to the Web, relative meaning years now on DSO. There's still some people out there that say you should use gifts because it's supported by all browsers. I would tell you that anybody who's still using a browser that doesn't support PNG files such a tiny, tiny, tiny percent of your audience. Unless you know you're designing for a particularly limited audience, you probably don't have to worry about that. The one place we still see gifts today are animated GIFs, and that might be why you were thinking about motion. So animated GIFs have had this interesting resurgence on the Web in the very, very early days of Web design. One of the only ways to have any motion on a page was to make an animated GIF. Today they're back because Flash doesn't work in so many environments and animated GIFs work everywhere. They're just little image files that have this ability to process a series of images. So if you just want a little motion on your page, a simple slideshow or kind of a flip book effect cartoon style animated GIFs a great you can create animated GIFs and Photoshopped. There are also a number of dedicated animated GIF tools. I won't go into that today, but really, the only time I would recommend gifts today is in the case of animated gifs. Everywhere else PNG is gonna be superior. And then you say, Do you want PNG eight or 24? And there's even a PNG most people don't bother with. If you're trying to preserve transparency, PNG 24 is the best option. It'll be a slightly larger file size. But what you'll gain and transparency, especially if you have drop shadows or Grady INTs, will look much, much better. In PNG 24 there are some browsers, like some of the not so old versions of Internet Explorer. The more recent versions of Internet Explorer, I believe, support PNG 24 just fine. Earlier versions didn't support transparency in PNG 24. So just be prepared for the fact that somebody with a really old browser may not see the transparent part of her may see what you think is the transparent part of your image and try and set it to a neutral color so it doesn't look too bad if it's there. But the simple thing to remember is J pegs for photographs and multi color images. P and G's for Leinart, limited colors or transparency. So with this photograph, I'm gonna choose J. Peg. And now what I wanted to see is there to previews here so they can see the difference. So as I do J pegs, I have compression options, and the more I compress this, the smaller the image will become. But the more I compress it, the worst the image will look, So if I zoom back in here, you'll see this is now down from 1.17 megabytes to 21 K But I'm starting to see a little bit of degradation because I've compressed it so much. I'm found a 12 in quality. That's a lot of compression. Usually, if you're or above, you're gonna be OK. There's no right answer to how much compression to put on. It's really as much as you can stand, and some photographs show it more than others. But the more you compress it, the smaller the file size, the faster the load on your Web page. But the more you compress it, the more degradation you get. And as a photographer who was really into your images, that may be too painful. So go as much as you can stand. It's kind of the simple answer to that. The other thing That's nice about the safer Web dialogue boxes. When I say done, it actually is going to create a copy of this image. So I'm not. I'm not affecting the original it all I've opened it. I've resized it, have compressed the heck out of it, and I'm saving a new version. Let me just do that one more time. Safer Web. Come in. You can use the hand tool notice. There's some little tools over here to move around so you can get a part of the image that you can see what's going on. Choose the option you want. Now, this is a short cut to common setting. So if I want J peg medium, you're gonna see that takes me all the way down to 30. You know what? That still looks okay to me. And that's 39 K That's pretty cool. So when I click save it lets me save this. Now it's saving a new copy, and I can say this wherever I want. So I'm gonna create a new folder that's gonna be my new California wildlife site. So California, I'm just gonna call it California new so you can distinguish it from all the other versions I have here. And I'm gonna go ahead and create this as I create the images. When I do the sights set up process, I'll have to do that Mac user that I'm not sometimes let me do that again and put it where meant to put it at the top level of that so I can find an easier California new. Doesn't matter if you have extra folders on your hard drive. Just make sure you select the right one in Dreamweaver, right? And now in that folder, I'm gonna create a folder called Images and when it go ahead and just save my images right into there so that I will inflate image already optimized, save for the Web on a stick it in there again, I'm saving a copy. You don't have to save the images in an image folder in your main website folder, but it's a common practice, and it helps you keep them organized. You can have sub directories and image holders. You can have folders called graphics, photos and images. All those are all fine. And I think I have a question here. Yes, so I noticed when you first saved the image. You say that in 70 Resolution most photographers we shoot in 300. The Resolute so did does safer Web bring it down to 72. That's because I've already done that in the past. Most photographers would have an image at 300 resolution, and I started quite a little firestorm. The chat room when I the first time I did this on Creativelive because I said, You should go in, you should re sample uncheck re sample said It's 72. Some people said it to re sample again and then change the physical dimensions to what you want them. And the firestorm in the chat room was between people who said Yes, you absolutely should change the resolution of 72 people who said it really doesn't matter. And after extensive research, trust me. After that much controversy in the chat room, I researched this one. I came to the conclusion that from a file size perspective, it doesn't matter whether it's 72 or 300. It's gonna be the same File five At the end. If you want to protect your images as a photographer, going to 72 means if somebody steals it off the Web, they're not gonna have the resolution to make a high quality print. So as a photographer, that may be an option you want to do. As somebody who's history on the Web predates modern browsers. This used to be a practice that made a difference. And that's why the chat room got divided between those of us who've been working on the Web for a long time, and this is how we learn to do it. You always lower the resolution before you resize to people who know more about pixels than I'll ever know and said, you know really doesn't matter. It really doesn't matter unless you want to protect the quality of your image, and it's not. There's nothing wrong with it. It comes from the fact that computer monitors didn't display 300 pixels, so why bother? We might as well take it down 72 make it a little smaller today. It doesn't really matter as much, but that's a very astute question, and I appreciate you asking it because it has come up before. Think thanks for the answer. So if you're optimizing a whole bunch of images, you're not worried about people stealing them, and you don't want to bother leave him at the resolution there in. If you want to take the extra step, you can do it. Just make sure you uncheck re sample before you change the resolution that is wanted. Very good question. So that's how I would optimize a J. Peg. I'm about to show you how to use Photoshopped generator to do this even faster, but I want to show you the basic safer Web dialogue. First, we show you one other image completely different image there. This this is a little cartoon image drawn by my uncle Tom McCain. Yeah, he's an amazing artist, actually. And I love using these because they're very colorful and they demonstrate well, what happens when you reduce colors. So if you've got an image like this one, your best option is PNG. And if I'm not worried about transparency, I might have removed the white and made that transparent. Then I'd want PNG 24. But if I'm just trying to make it a smallest possible, and I'm gonna have a white background, PNG eight is the best option with J pegs you compress and then the browser. Un compresses thumb with PNG and GIF files. You reduce the number of colors, so here you'll see there are 256 colors available in PNG eight. But this image doesn't really use colors, so I could take it down to 32 colors. And if I do that, you see far fewer colors here. But it really didn't change this image much, except it didn't make it a smaller file size. It's kind of small. It's now down to 10-K 10.7 k Reducing the number of colors make something difference in file size. If I take it down too far like two colors, then you see who that really doesn't work right, and you see this even better with when you reduce colors than you do with compression. The same thing can happen with compression. The more you do, the more it just starts to degree the image. So this image requires more than two colors. Toe look good. But how Maney doesn't require four or eight The fewer colors, the faster the load. Now the difference between seven K and 10-K is so negligible that I wouldn't compromise the colors in this over a couple of K, and that looks pretty good to my eye. So I've gotten it down to 10-K by making it a PNG eight and reducing it to 32 colors you see, the color palette goes down from what it originally was at 256. There are all these colors in here that aren't really necessary for the I. When you look at it on a computer screen, so again, the more you reduce it, the smaller it gets again when you save it, it will create a new version of it in that format, and you can save it wherever you want to on your hard drive. So that's J. Peg versus PNG. That's the safer Web dialogue. But a lot of times I'm working on a whole bunch of images at once. I want them all to be the same size. We're gonna create a series of images, set him up in a template and link them all together. Really nice little exercise to see how Dreamweaver does a number of things. The first thing I have to do is create a series of images that are exactly the same size and are all optimized. So let me just open a couple more images and put them in here. I've got a picture of an eager it hunting something. Grab this image. I'm just gonna select all. And copy and paste. I'm just using command or control. See, happy and paste this in. There are many ways to reduce images in Photoshopped. I'm just using the shift drag trick to keep the aspect ratio the same. But you will find many great photo shop instructors here. It's creativelive. I really just want to show you the safer web options. So assuming that you know how to optimize images, get them to fit in the space. What I'm doing is copying all of these into the same document. So I know they're exactly the same size, just a easy way rather than re sizing everyone. I just found that this saves me a little time. And then when you see the generator, you're going to see how much time you can say I'm gonna grab my middle quail. Yeah, we don't need all that background, right? Just get my quail right in here. See if we can, uh, he take that down just a little more because that's kind of a big image. Lips. There we go. All right? Yes. I am not your food of shop instructor. I am your web instructor. Okay, Thanks. And I'll let make both one more coil picture cause we're going to use that to selective all the copy. Call this one quail to Russia. Okay, drag it down just a little. And now I'm gonna do a rollover effect. Someone show you one other thing to watch? Um, do rollover effect with ease. Quails. So I want them to be set up so that when you switch from one to the other, they're about the same. And that's a place where just dragging out little guidelines can help you make sure I've got my base of this. Yep. See, he's not really the same. But if I use that post as a guide, I can adjust that. So again, I'm showing you a photoshopped pretty quickly. There are lots and lots of wonderful classes in photo shop here. It creativelive but just showing a couple of tricks that I've found for the things you need to the web, which have to do with trying to make things line up. When, later, When you're putting them together, entering liver. Yeah, we could take him down. Just a touch. But I would say good enough for a demo. Right? So take that as far as you want, but I'm gonna say this one now just to have my layered birds psd file just so that I know I've got this saved and I can come back to it if I want. Now, I could save each one of these in the safe for Web dialogue. One at a time. Optimize each one is a J peg like I just did, and that would be fine. But when you've got 4 10 20 images at once, that's a lot of steps. And yeah, you can write a macro and you can get us fancy as you want Photoshopped. But let me show you what generator does. What generator does is take each layer and save it automatically in the format you include in the name of the layer. So if I rename this quail dot jpeg, it's going to get saved as a jape It Now, if you're somebody who doesn't believe in naming your layers, you know who you all this make your you about have it because whenever you name, the layer is what the name of the file will be. Wouldn't get spit out. So I'm gonna go ahead and give each of these a name, you have to put the dot j pig or dot tng on it. In order for this to work, um, duplicate this one just so I don't want any challenges with it. Sometimes the background layer could be a little ornery. So let's just duplicate that when I turn it off and we'll make this owl Jake leg. Now, this is crazy because it's it's almost so intuitive. You don't believe it works have named them all I go up to file generate image assets. This is the one thing you really have to pay attention to, and you have to do this for each image file, but you don't do it for each layer. You do this once for the image. Someone to generate image assets. This is a new feature and Dreamweaver CC that was launched maybe halfway through last year, long after Sisi was released, which is why a lot of people don't even know about this file. Generate image assets click on them. Seems like nothing happened, but wait, there's more. So I was just saving that image, and I called it layered burns assets. I called it layered birds and Dreamweaver when I turned on as a generator created that fast Ah, folder called Layered Bird Assets. And it spent out four different J pegs just like that again. It's so fast, you almost can't believe it. But now you're saying, Well, wait a minute. What about all that compression stuff? Okay, no problem. Let's go back. And I'm gonna rename these so you can see Call this coil. Uh, I'm gonna call it quail A and B this time. And let's add some compression the way you do compression using this generate assets option is you simply add to the end. And I'm just gonna double check cause Sometimes use a comma, and sometimes you don't sometimes use the space, and it's slightly different. I want to make sure I get it right. If you're doing compression, you just put the number at the end. So if I want this to be a 70% compression, I just put a seven. Let me zoom in there so you can see what I'm doing. So quail a and quail be in double click and put a seven after them. Let's go back and look at that folder. We were just looking at. And now on my Larry Bird assets, I have quail A and have coil be. You see how instantaneously that changed. Now it replaced the other two. That's all right, because those layers aren't there anymore. So now it's replacing them. But I changed the name so you could see that it actually changed. Um, And those air now at 70% compression. So just like that, safe for web dialogue. And then you say, Well, I kind of like being able to compare them. Well, what if we did quail a seven comma quail B six comma Quayle. See? And you need that J peg seven. Yeah, this gets a little crazy, but what I'm doing now is telling it to generate three different versions. Do you need the dot jpeg that J p. G. And then let's call this quail D just to make a difference. Okay, that's it. Hey, let's go back to that folder. Come on. There we go. Don't make a liar out of me. Ah, Space comma is probably a typo somewhere. Well, a J pigs. Seven comma krill eight. That should have automatically generated three versions with those a B and C, and it should have put it in the folder. And it's making a liar out of me on live video again. Because sometimes that happens here. Creative life. I will look into that at the break where my typo is. But that should function to create multiple versions. Um, it may be that I'm doing a space where I shouldn't or doing a comma where I shouldn't. That's right. Without the comments, just to see if that makes the difference. Um, I don't know. I usually just pick a number and do it once, but if you want to do it this way, you can, uh it is kind of handy to be able to compare the different types I haven't already open. So, no, let's go to the desktop desktop website or demo bird assets. Now they're not there at all. OK, on the photo shops, like you can look up. Whatever my mistake, Liz, thank you for playing. I'm just gonna go back to doing one at 70. So 70% is a nice number for these. That part's easy. If you wanted it to be a PNG, you would put PNG instead of J. Peg and you would use a dash to indicate eight or 24 or 32. And in theory, you can also do the Commons between them and generate multiple versions. In practice. I could certainly create another layer of this and then make this a six, and it'll definitely work that way. So if you want to have multiple versions and all you ever see is my training, this will show you. But what I really want to introduce you to is this incredibly powerful new feature in Photoshop that is woefully under used. And the only thing you really have to know is generate image. Assets must be turned on on each image. It's not something Turn on Once and Photoshopped. It's something you turn on for each image, and the layers need to be named J. Peg or PNG, with the number representing the amount of compression. That part, I guarantee, will work. The other thing that works, that's kind of cool is you can name a folder full of layers, so if you're a very sophisticated photo shop user and you've created a layout where let's say you have a slider that you're going to use on a Web page and there 17 different images in that slider and you save them in a folder called Slider One and then have a second slider with 17 images in a folder called Slider to You Canoe Slider one dot j Peg slider to dodge a pig. And it will save everything in that folder as one Jay Peak when you're done. So if you've got one of those big, complicated layouts the way many of us lay out an entire Web page in Photoshop naming those layers the way you want those files to be, and then you can automatically create J pegs things etcetera from specific layers or from folders. Eso the Internet did find the the typo if you're interested. Oh good. What I do wrong with Photoshopped you feel like you re doomed. Redeeming. I love the international asked for that house. I know it's so funny, Samoon River says. The last file is J. J J J. P. See, I knew it was the type of so if I did Okay, so let me let's see if I can get this to work. Thanks Moon River love you, Moon River. You will save my little. Okay, so let's do quail X y and z x dot j p g. Six. Watch my back here Quayle. The word quail doesn't really matter whether I spell that correctly or not, but it be nice quail. Why that you do have to give them different names because you use the same name three times you confuse it. It needs to have a different name for each image. Zemel. Just enough that I could see what I'm doing there. So quail J pegs seven Comma and then coil Z move over. There we go well, Z like Jay Z Heart Quails E D. J P G. And Let's make this one eight. So 60% 70% and 80% compression it return. And in theory, let's see in practice. Look at that. Now I have quail, X, y and Z, so it does work. It is separated by commas, and the one typo you have to watch is J. P. G. You can't get wrong. PNG. You can't get wrong. What you named the file is up to you, although another good practice and Web design and back to the world of Web design. Not all Web servers can handle spaces or special characters in file names. Which is why, when you save files for the Web, most of us use dashes or underscores and file names. I wouldn't offer the same practice when you're doing this. So notice that I don't have quail Space X, because that would complicated and Space X is a really cool company. I don't anyway, Quail X quail, while crazy all got saved instantly at three different levels of compression. And now I could open each of those in turn and take a look at it and say, With that level of compression versus that level of compression, you may not see a huge difference in these, but it will help you see that difference.