| Scenario: You have some new photographs which you would like to put up on your web site. How do you proceed if you aren't a graphics professional? Contrary to your intuition, you can't just upload them to your site like you would to your Facebook account. Unless your site has a built-in image conversion system like Facebook, you need to do the following post-processing of your images first: 1. Scale and crop the image to the proper size for your site. 2. Optimize the image to reduce the file size in KB so as to speed up download times and conserve server storage space. There are a number of paid and free image editing software programs out there such as Photoshop or Fireworks — both of which must be purchased. We're going to focus on the free, open-source software application called GIMP, which stands for GNU Image Manipulation Program. There are versions available for both Windows PCs and Mac computers. Download GIMP… Once you've installed and launched GIMP, there will be three steps for you to perform. Step 1: Get Final Image Dimensions To proceed you'll need to know what the final image dimensions are of your photos when used in the site. If there are other similarly sized images already on the site, an easy way to find out what their dimensions are is to navigate to the page on which they are and then (Windows PC) right-click on the image and choose View Image, or (Mac) press the Control key and click on the image and choose View Image. The image will display in a new window and its file name and dimensions will display in the browser's title bar at the top. Write this dimension down (width X height in pixels) for future reference. Step 2: Scale (and Crop) Your Image We're going to just give you some short tips here and direct you to GIMP's documentation page for this specific task, since they have instructions at their site. Write instructions for Change the Size of an Image for the Screen… A. At Figure 3.19, Scale Image, make sure that the X resolution and Y resolution are both set to 72px, that the chain link to the right of the two resolution fields is displayed, and that the unit measure in the next box is set to pixels/in. B. Next, under Image Size, enter the width and height dimensions which you wrote down in Step 1 for your final image dimensions. Make sure the units measurement is set to px for pixels. C. Click the Scale button to finish. Step 3: Optimize the Image for Web Use In essence, you are compressing the image so that it takes up less file space on the web server without changing the file's dimensions. Follow the directions for Compressing Images at the following link: Compressing Images… When you get to Figure 3.22 Save as JPEG dialog experiment with various Quality settings by adjusting the Quality slider. You can view changes in image quality in real-time in the viewer window. A setting of between 75 and 80 is usually fine. Click the Save button to finish saving your optimized image. Step 4: Upload Your Image To Your Web Server You'll need to use a FTP (File Transfer Protocol) application to upload your image file to the correct subdirectory on your web server. You can learn how to do that by searching for FTP in our knowledgeable. Placement of that image on your web page is dependent upon how your web site is configured. Please contact your Webmaster for that information. |
Quick Navigation
Search
