Today, we'll play with GIMP [The Gnu Image Management Program], which just happens to be free, using it to resize a couple of images so they will be better suited for the web
Remember, the key issue with images is file size. Most, if not all, digital cameras capture images whose file size is far too big to be suitable for the web. So part of the process we have to follow to include images on the web is optimizing them for the web
We're also going to practice creating hyperlinks - an integral part of web pages
Essentials of Web Development
In your labs folder on your removable drive, make a new folder named lab2
Download waterfall.jpg and save it on your external drive in your lab2 folder. Depending on what browser you're using, you may have to copy the file to your removable drive from the Downloads folder
Click the Cortana Button
In the search bar, type in gimp
Click on the GIMP [GNU Image Management Program] application that appears under Programs (at the top)
GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.
Whether you are a graphic designer, photographer, illustrator, or scientist, GIMP provides you with sophisticated tools to get your job done. You can further enhance your productivity with GIMP thanks to many customization options and 3rd party plugins.
Once GIMP loads (and it'll take a little while), click File → Open
Navigate to your lab2 folder and select waterfall.jpg. Either double-click on the file name or click on it and then the Open button
Click Image → Scale Image...
In the dialog that appears, change the resolution to 72 Pixels/Inch (see the picture below)
Unfortunately, GIMP isn't real good about letting you know how your changes will affect the file size until you just go ahead and save it, then look. Photoshop is better about that
Now change the picture's width to 450 pixels After that, hit the Tab key. Notice that GIMP automagically calculates the appropriate height for you
IMPORTANT! Make sure that the units are set to Pixels, not Inches. If you try to save two files that are 450 inches wide, you will lock up your computer
Again, GIMP doesn't do a real good job of telling you ahead of time how your changes are going to affect the resulting file.
Since the file size was changed, the picture now looks much smaller
Click on the Zoom Tool (looks like a magnifying glass):
Hover the mouse over the image and left-click a couple of times
Now, with the mouse still hovering over the image, press and hold the Ctrl key and scroll the mouse's scroll wheel back and forth. Notice how the display changes
Click File → Export As...
In the dialog window that appears, change the file name to waterfall2.jpg. Make sure you're in the right directory, etsu_id.csci1210.com/labs/lab2
<sigh> Once again, GIMP is great but it doesn't give you much idea how your changes are going to affect the resulting image...
Change the Quality to 80. What this does is increase the compression ratio when the image is saved. I've found, over the years, that 80 (out of 100, in GIMP, vs. 8 out of 12 in Photoshop) works really well
Notice that, once again, we have a file that's too big for the web
NOTE: If you're not familiar with file sizing, 15.4 MB is 15,400,000 bytes [give or take]. What we're shooting for here on the web is something around 100,000 bytes. So the original file is 15.4 times what we want!
Click the Cropping Tool: or
Here's where things get a little tricky
In the tool options window, make sure Fixed is checked and Aspect Ratio is selected (see below)
Set the size to 450 x 300
Click Highlight and select Rule of Thirds
Place the cursor above and to the left of the waterfall in the picture
Press and hold the left mouse button
Drag the mouse down and to the right, to a point below and to the right of the waterfall
(Your selection doesn't have to be exactly the same as the example above)
Notice that, if you don't get it exactly the way you want the first time, you can "grab" one of the handles in the selection area and adjust the selected area
If you're interested, note that the selected area is divided into thirds. This comes from photography's Rule of Thirds, which says that to make a photograph interesting, its focal point should be along one of the lines or at one of the four intersections, not in the center of the viewing field.
Once you're satisfied with your selected area, hover the cursor inside it and double-click
Click Image → Scale Image
As you can see, even cropped, the image's file size is still wayyyy too big, so let's resize it here
Once again, change the resolution first to 72 dpi. Then change the width to 450 pixels
Now, click File → Export As...
Give it a file name of lg2.jpg (I like short file names)
Make sure the compression ratio ("Quality") is set to 80