Tutorial: Optimizing Images using PhotoFiltre Studio
NOTE: This tutorial is graphic intensive with many screen shots from PhotoFiltre. Please be patient as it loads the first time.
|
|
|
|
|||||||||||
|
|
|
|
|||||||||||
 |
When you are creating a page that will displayed on the web, whether it is a website, a wiki, a blog or content in a course management system, it is important to remember that image size is critical because the size of the image will largely determine the speed with which your page will load. It is also critical when you are using a free server to house your materials as generally they will only give you a limited amount of server space before they either cut you off or charge you for the services.
Thus, it is important that you learn to optimize your photos for uploading to the web. Ideally, the image itself should be roughly, if not exactly, the size that it will appear on the page. Sometimes, when individuals insert images in a webpage or wiki, they will upload a large image and resize it on the page itself. This is not an effective or efficient way to use images. The tutorial below will show you how to optimize your photos using a very simple and FREE image editor called PhotoFiltre that can be downloaded for free by clicking here.
Many programs can be used to edit photos. Some of the more popular ones are PhotoShop, Corel Draw, and Photo Impact. They all work basically the same and once you learn how to do this on one, you can generally figure out how to do it on another rather easily.
BEFORE YOU START:
The JPEG compression is what is called a lossy compression codec. What this means is that each time it is saved, it loses a bit of its clarity. JPEG is designed to exploit known limitations of the human eye, primarily working on the inability of the human eye to accurately perceive small color changes. What happens is that the jpeg codec takes a little bit more color out each time it saves - and if you keep making changes to the same photo, it keeps taking out a bit of color - hence a bit of clarity each time you make a change.
So - to avoid a seriously degraded image (or messing up an image that you only have one copy of), ALWAYS save your original and work off a duplicate when you are editing. You can easily do this in PhotoFiltre by clicking on CTRL+U once you open your original. You may want to do this several times so you have multiple images to play with. THEN, close your original so it does not get degraded.
In addition, try to make final changes from the original size rather than stepping down. So - if you want to make the image smaller and try decreasing width from 400 to 300, then discover 300 is not small enough, go back to 400 (undo) before trying a smaller size. This will give you a better image than moving to 300, then 250, then 200, etc.
With that said, it is time to try this out for yourself.
Step 1: Opening an image using PhotoFiltre Studio
Once you have downloaded PhotoFiltre, open your photo by clicking on the Folder icon. Browse to find your image and click on it to open the image.
Step 2: Reviewing dimensions of your image
Your photo will open on the PhotoFiltre canvas. In the example below, the image takes the entire PhotoFiltre canvas and is only 76% of the actual size. Thus, you can tell immediately that the image needs to be reduced in size before it it used on the Internet.
Step 3: Selecting area to crop
This photo is going to be used on a page that will identify the individual. While the photo does a nice job of using the Rule of Thirds to frame the photo, for this purpose, the photo needs to focus more on the individual. So, much of the background can be cropped out.
Often, photos contain information that is not critical or sometimes is poorly framed - not following the Rule of Thirds. Cropping an image in PhotoFiltre is very simple to do. Click where you want the crop to begin, hold down the mouse button and drag the mouse to where you want the crop to end. Generally you will drag in a square or rectangular shape.
Once you have the area drawn, let go of the mouse button and you will see a dotted line outlining where the cropping will occur.
If you do not like the cropped area you selected, then simply click on the mouse button again and redraw the area by holding down the mouse button and dragging. You can also change the dimensions of the crop line by rolling the mouse over a horizontal or vertical line until you find the double-ended arrow, then clicking on the arrowed line, holding and then dragging the line out or in/up or down.
To crop all you have to do is click Image, then click Crop. Or you could use the key command combinations of Shift+Ctrl+H.
While this will make the size of your image smaller in dimension as well as file size, it will probably not be as small as you need for web purposes. Please note: The photos you download from your camera generally have a high resolution and are typically HUGE. So you will have to decrease the image size quite a bit.
To change the image size (or to see what the dimensions are) click on Image, then Image size (or click on the Image Size icon, or click on Ctrl+H.
A window will open and you can see the current dimensions of your photo as well as the space it will take up on the server. Remember bigger size = slower load = longer wait.
Enter your new dimensions in the New size boxes. When you change Width, the Height will automatically be changed to maintain aspect ratio. And visa versa. What this means is that you won't have one of those photos that looks distorted - with either a string bean look or a squashed flat look. (No distortion is a good thing - although you can use it to your advantage if you want to very rapidly lose weight.)
Once you click on OK, you will notice that the photo is much smaller in the PhotoFiltre window. You can see the image with lots of space left over and you are viewing at 100%. Amount of space the photo takes up on the PhotoFiltre desktop can give you an idea of the size of the photo. But remember to check the viewing size also to be sure you are viewing at 100% when guesstimating the size of your photo.
After the photo is decreased in size, you may notice that it is a bit fuzzy. If it now seems blurry, just click on Filter, then on Sharpen and Sharpen again. This will make your photo less blurry. If it is still blurry, you may want to sharpen again.
When you save the new image, you have another chance to decrease the size of the photo - this is not the dimensions (width and height) but the file size. This is called optimizing your photo. To do this in PhotoFiltre, just click on File, Save as. A new window will open so you can save your photo. To optimize the photo, click on the drop down menu for Save as type, then scroll down until you get to JPEG, highlight JPEG by clicking on it, then click on Save.
Step 8: Deciding on compression
A window will come up that allows you to decide how much to compress your photo. The sliding bar indicates the quality of the compression - the farther to the right, the higher the quality of the photo when viewed in a webpage. Generally, quality will be adequate when you save at 90 - but you can view the photo to see the quality by clicking on Preview. Slide the bar left or right, depending on the quality you want. Notice the File size will be shown when you hit Preview so you can see how much you are decreasing file size. When you have the setting you want, click on OK.
Look carefully at the two photos below and you can see the difference in file size as well as image quality. You will notice that the quality of the bottom photo is substantially degraded, so you probably would not want to compress it that much. Sometimes you just have to play with compression to determine how much you want to compress the image.
Step 9: You are ready to upload
Now you are ready to upload your image. Have fun!!!
Power
Bytes are tutorials provided for the MTT program at
University of Texas at Brownsville.
© 2007 Janice Wilson Butler
This work is licensed under a Creative
Commons Attribution 2.5 License.