Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Images that you would like to post on the web must be smaller in file size in order to load quickly into a browser. Depending on how large you shot the images and in what file format, you may need to save web versions of them by lowering their resolution value and saving them in a compressed format, such as JPEG. You can do this using the Save for Web feature in Element 6. Here is how it works. I currently have an image open from our catalog images folder in our exercise files. It's the Enzo's_new_car_02 image. You will notice here down at the bottom of the document window the document dimensions are being displayed. And this is a very large image, its 10.8 inches x 14.4 inches, at a 180 ppi. So we have a lot of room to work with here.
We want to save a web version of this particular image. So we know that we need to make it smaller and we need to lower its resolution and save it in a compressed format so that it will download quickly into a browser when we post it on the web. So we can do all this using the Save for Web feature. Let's take a look. We will go under the File menu and choose Save for Web. That brings up the Save for Web dialog box. Now, because the image is so big in both of our Preview areas here, the before or the original and the after, which is the compressed version, it's really, really large. So we have to actually scroll over to actually see the image. There is my son Enzo and that great expression on his face.
Unfortunately this is too large, so the first thing I want to do is change the size of the image. Now, over here on the right we have the New Size settings. It is showing us the current pixel dimensions. We want to reduce it. I'm going to go ahead and reduce the Percentage down to about 20% of its original size. Now we have 389 pixels x 518, in width and height, and that's way more manageable than what we had in there before. So let's go ahead and click Apply. Of course, we want to Constrain Proportions, because we don't want to scale the image disproportionally when we're doing this.
Click Apply, and we're now getting a proper preview of the new size. Now, you will notice the image on the left still looks great. On the right, it's looking very pixelated and over compressed and that's because of the settings that we have chosen up here. Now, of course you can choose from JPEG or GIF, and notice what it says at the top of this dialog box, this is helpful information. It says, "Save an image to include in a Web page. Save photographs as JPEG and images with limited colors as GIF." So generally web graphics are saved as GIF; things like buttons and small pieces of artwork are saved as GIF. Photographs are generally saved as JPEG in order to maintain a better quality.
So the image preview shows how your image will look using the current settings, and that's what we're referring to here. So this JPEG setting is what we should use, but its a little too low because there is also Medium, High, Very High, and Maximum. Rather than going straight to these lists over here and entering Quality settings, we can just go straight to the Preset list right here. This is usually where I start, and I go straight to JPEG High, and I take a look. Now that's looking a lot better than JPEG Low, as you can see. It has a quality of 60.
The next thing we need to look for is this information down here, because this is telling us how large the new image is going to be when we click OK to save this, and its now 40K at these settings, it was 590K, so that's a huge jump. Nice, small file size. It's also telling us the approximate download time on a really slow dial-up connection, 28.8K bits per second. Now, very few people are using this type of dial-up connection anymore, most people are using a broadband connection, usually cable modem or DSL, in which case this would have no problem downloading.
So we have got a little bit of room to play with here. I think we can increase the Quality setting by either dragging this slider to the right or by choosing Very High or Maximum from this list over here, and that's going to up the download time a little bit, listed down here. 26 seconds now. I still don't think that's a problem. It's almost 70K. That's still very, very small. Using these settings I think we're good to go. We're going to save it as a Very High JPEG, using 80 Quality, based on the preview that I'm getting here in the dialog box, zoomed in at 100%, I would say that we save this properly for the web.
If you're really not sure you can preview in your default browser; mine is Firefox 3, we will go ahead and click this button down here in order to display the image. Here it is. We're getting a quick preview of what this is going to look like on the browser, and it's giving us information about it as well. JPEG, the size and dimensions, the file size, and then the settings that wejust chose. I think that's looking great, and all we need to do now is just click OK. When we do that it's going to say, hey, where do you want to save this? I think for now I'm just going to save this to my Desktop. We can use the exact same name if we want or we can maybe add something like web so that we know that this is the web version of that file, and then click Save.
Here is our original image here. If I want to open up the other image, I can choose it here, Enzo's_new_car_02_web. Open it up, and we can see our document dimensions. 5.4 inches x 7.194 inches at 72 ppi. So it saved it at the proper resolution for display on the web, which is 72 pixels per inch, and it used those sizing dimensions that we applied in the Save for Web dialog box.
Get unlimited access to all courses for just $25/month.Become a member
180 Video lessons · 70358 Viewers
64 Video lessons · 92108 Viewers
86 Video lessons · 60343 Viewers
103 Video lessons · 28987 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.