Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Compressing images, audio and video for the web truly is an art form in and of itself. To really do this subject justice is well beyond the scope of this course. But what we can do is go through a couple of techniques for compressing images, audio and video that will help you get good enough results. In this movie we're going to step through the process of using a feature that's built into a lot of image editing programs and that is the building of a web photo gallery and then and extracting out the resources that are created as part of that process.
So to begin let's go ahead and minimize Firefox out of the way and if you're following along with the exercise files, I'm inside of the Chapter 4 folder. There is a folder called Images and inside of Images are a whole bunch of JPEG images of Coral Reefs that we have ready for you to be able to compress. Now the images, if we go ahead and look at the pixel dimensions over here in my Finder, we can see that these images are roughly around 2000 pixels by 1500 pixels and that's way to big for distributional web. So what we want to do is we want to batch compress all of these pictures.
Now I'm going to go ahead and I'm going to use Adobe Photoshop CS3. Adobe has had, since version 5.5 of Photoshop all the way up through CS3, a plug-in that will automatically create a web photo gallery for you out of a folder of images. In CS4 they've moved this functionality into the Bridge. A lot of other programs out there that work with images will also create a web photo gallery. So if you don't have a copy of Photoshop, then go ahead and use whatever image editing program. The steps are going to be a little different but we'll show you the general process that you're going through.
So what you're going to do is go up to the File menu in Photoshop CS3 and come down to the Automate menu. Then you want to go over to the Web Photo Gallery and go ahead and select that option. The Web Photo Gallery window then opens up and we can choose a bunch of different parameters here. A lot of the specifics that we choose here are not going to be important. So for instance the Style that we choose to use, absolutely not important. We'll go ahead and just for the simplicity sake choose the Simple web photo gallery. We don't need to add an E-mail address but we do need to come down here to the Source images and select the Choose button and go ahead and navigate out to your Desktop, to the Exercise Files folder, to the Chapter 04 folder and select Images, then click the Open button. You want to make sure that the option for Include All Subfolders is selected if you have any subfolders that you have images in that you want those added into this gallery.
Next you need to click the button for Destination. Go ahead and then click on your desktop and we're going to create a New Folder here and we're going to call this simply Image Gallery and click Create. So we've got just a blank folder and this is where Photoshop is going to put out image gallery at. So I'll go ahead and click the Open button. Now there is two other places that we want to set some things. We want to go into the Options dropdown menu and start off first with Thumbnails. We can set the Size, the default Sizes are Small, Medium and Large. If we select large, you can see that the Thumbnails are going be about 100 pixels and that is the width of those images. Now 100 pixels for a thumbnail image is fine but if we want to use these inside of our Moodle site, we can customize this to make this a little bit better. So we'll go ahead and kick that up to about 150 pixels.
Next we'll go ahead and click the drop down menu here for Options again and go back to Large Images. Under Large Images, make sure that the Resize Images box is checked and we can change the pixel dimensions here. Let's go ahead and see what Large would give us in this case. It would give us a 450 pixel image. Let's go ahead and change that up to 500 pixels. The JPEG quality of Medium and 5 should be fine. We don't have to even worry about any of the other settings because all we really want Photoshop to do here is just batch compress all of these images.
Now again, yes there are ways you can go in and compress the images manually one by one yourself and get better results but this going to batch compress all of these images for us and give us two different versions at the same time. So then go up here and click on the OK button and sit back and watch as Photoshop just cranks through every image inside of that folder. It's going to open the original image. It's going to resize it down to that 500 pixel size, save out a JPEG, then resize it down again to the 150 pixel image size and then open up a finished web photo gallery for us in Firefox.
We now have a fully functional site; all of our images have been shrunken down to a fairly good size for us to be able to work with. If we wanted to click on any of these images, so here is this Aplysina fistularis image. We can go ahead and click on that and we can see the larger JPEG image that's been compressed for us and we have all the different images that we have here that we could work with. So we can close this tab down, minimize our browser and let's look and see what this actually did for us out in our Finder. So if go back out to our Desktop and we open up the folder Image Gallery that we just created, let's go ahead and get rid of this guy, get him out of our way. We have inside of the Image Gallery, there's a couple of folders, with lot of HTML files but what we're interested in are two folders in particular.
The first is the images folder itself. These are the large images that have been compressed for us by Photoshop. So if we go ahead and click on one of those, we can see the pixel dimensions, 500 by 339. This image is ready to go up on the web. It's being compressed down to a nice, small size and its dimensions have been reduced. The other folder of the images that we're interested in is the folder called thumbnails and thumbnails has these smaller images in here. You can see they have been shrunken down to 150 pixels by some other dimension and those are also ready go up on the web. So we're ready to go ahead and post both of these up there.
Now we have our large size images and our thumbnails. They've all been compressed for us and are ready to go up on the web. All we had to do was create a web photo gallery and inside of the resulting web photo gallery are these images, the source files that the application is using. Lots of different applications will do this. We've just showed you one example as to how to go ahead and work with that.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98060 Viewers
80 Video lessons · 141298 Viewers
59 Video lessons · 59661 Viewers
52 Video lessons · 72898 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.