Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Many of us today have digital cameras that are capable of taking images at incredibly high resolutions. We pull those images directly out of our cameras, and then we go to work with them inside of our courses in Moodle, and we find out that the images are just too big. To truly learn how to do image compression properly can take a long time and a lot of work. In this movie, I'm going to show you a trick that you can use in virtually any image editing program that can export a web gallery in order to compress a large number of images with a fairly good set of compression settings.
If you have a copy of Adobe Bridge, go ahead and open up that. If you have iPhoto or some other image editing program, you may have to hunt around to find these tools, but they're in basically any image editing program that you can find today. There's a lot of web-based tools as well that you can use. Right now, I've got the Images folder from the Chapter 04 exercise files opened up in Bridge. All I'm going to do is go ahead and hit Command+A, or Ctrl+A, to select all of these images, and then I'm going to go over to the Output tab at the top.
By default, I'm brought to the PDF tab, but what I want is the Web Photo Gallery tool. The next option here for Template, if we hit that dropdown menu, you'll see that there are a whole bunch of different options here. The one that we really want to use though is the one called HTML Gallery. This is going to produce a basic web site that has each of these images linked together between a thumbnail image and a larger size image. If you want, you can go ahead and type in some basic information about this gallery into these blanks, although it's not necessary for the specific technique that we're showing. I'm going to go ahead and fill in for Gallery Title Week 2 Images.
For Gallery Caption, I'm going to type in "Coral Reef Diversity." About This Gallery, I'm just going to simply type "Images for the Week 2 Lecture." For Your Name, I'll type in my name. So I'll go ahead and fill in my email address. Now go ahead and scroll down. For the section under Color palette, go ahead and leave that as is. It's not important for what we're doing here. Scroll down a little bit further.
Now make sure you checked the button for Show File Names. And this is in a lot of different editing programs as well. Next we want to set the preview size, and in some programs this is called the large size or the full-size image. And I like to set this to a nice size of about 450 pixels. For Image Quality, Good or 70%, something along those lines is what you're looking for generally. Go ahead and scroll down a little bit further. For the Create Gallery, type in "Week 2 Gallery." And for the Save Location, hit the Browse button, and we could point directly to our Desktop for this case.
And then click the Open button. All right! That's all we've set here. The important thing again here is to make sure that you set your image size to be about 450 pixels. At the very bottom, click the Save button. What Bridge is going to do now is it's going to go through, one by one, each of your images and it's going to compress it for the web. And it's also going to create a little HTML web page that's going to link all of those images together. In a later movie, we'll show you how to post that gallery. Hit the OK button when Bridge tells you it's done.
We can go ahead and minimize Bridge and we'll go ahead and minimize our browser if that's still open as well. So we're back out here to our desktop, and we can see the folder that it's created. Go ahead and double-click that folder, and let's look at the contents of it very quickly. To look and see overall what happened, you're looking for the file called index.html. That's the front page of the web gallery that got created for you. Go ahead and double-click that file and it should open up in your web browser. You can see all of the images. Now depending on the specific program that you use to create your web gallery, your results may look a little bit different than mine.
But it's generally going to have the images in thumbnail form that you're able to click on, see the overall image, and then have some kind of built-in navigation to be able to navigate around those images. Now this is a great way to distribute these images out to your students. Go ahead and close your browser window. Let's look at the files that we're really interested in here. And those files are in the content folder. So go ahead and click on content and you'll see all of these individual HTML files. Scroll down until you find the bin folder.
When you click on bin, you'll find another folder inside called images. Go ahead and click on the images folder, and now you have two folders inside of that: large and thumb. And these are the two that we're really interested in. If we click on the large folder, we can see each of those JPEG images that have been compressed for us. The pixel dimensions are now 450 x 300 pixels. This is down from the nearly 2500 pixels x 2000 pixels that we started with initially, and the file size is significantly smaller as well.
In the next movie, I'm going to show you how to batch-upload all of these large images, the thumbnail images and the overall gallery itself.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 74761 Viewers
80 Video lessons · 129849 Viewers
52 Video lessons · 64052 Viewers
59 Video lessons · 49843 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.
Your file was successfully uploaded.