welcome
Differences
This shows you the differences between two versions of the page.
|
wiki:preparing_images_for_web [2007/03/10 19:25] michael created |
wiki:preparing_images_for_web [2010/07/03 03:26] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | I like to set the width of "wide" pictures to 500 pixels. I set the height of "tall" pictures to 700 - this comfortably maximizes the size of the pic for a 600 x 800 display. | ||
| + | |||
| + | Then the image needs to be compressed in order to ensure that it renders promptly, and is efficiently stored on the web server. Here's how: | ||
| + | |||
| + | ====== iPhoto ====== | ||
| + | For all you mac users out there, you can simply select the photo(s) you want to use, and then click ''Share''->''Export''. Enter a width value of 500, and follow the instructions to finish exporting. | ||
| + | |||
| ====== Adobe Photoshop ====== | ====== Adobe Photoshop ====== | ||
| * Open the image and rotate it as necessary | * Open the image and rotate it as necessary | ||
| * Resize the image | * Resize the image | ||
| - | * Click Image->Image Size... | + | * Click ''Image''->''Image Size...'' |
| * Enter a width of 500 pixels, the height should change automatically. | * Enter a width of 500 pixels, the height should change automatically. | ||
| - | * Click OK | + | * Click ''OK'' |
| * Save for Web | * Save for Web | ||
| - | * File->Save for web... | + | * ''File''->''Save for web...'' |
| - | * Choose "JPEG" and "Maximum" from the dropdown options. | + | * Choose ''JPEG'' and ''Maximum'' from the dropdown options. |
| - | * Click OK and save the new image in a place where you can easily retrieve it for uploading. | + | * Click ''OK'' and save the new image in a place where you can easily retrieve it for uploading. |
| + | |||
| + | ====== GNU Image Manipulation Program ====== | ||
| + | If you can't get your hands on a copy of photoshop, this software can stand-in for most uses and it's free... | ||
| + | [[http://gimp-win.sourceforge.net/stable.html]] | ||
| + | * Open the image and rotate it as necessary | ||
| + | * Resize the Image | ||
| + | * ''Image''->''Scale Image...'' | ||
| + | * Enter a width of 500 pixels | ||
| + | * Click ''Scale'', the height should change automatically. | ||
| + | * Save the Image | ||
| + | * ''File''->''Save As''... | ||
| + | * Rename the file appropriately | ||
| + | * Expand ''Select File Type (By Extension)'' | ||
| + | * Select ''JPEG image'' | ||
| + | * Click ''Save'' | ||
| + | * Check the box ''Show Preview in image window'' | ||
| + | * Move the slider to the desired quality (I like 95 or better) | ||
| + | * Click ''OK'' | ||
| + | |||
| + | ====== Irfanview ====== | ||
| + | Here's another one that should be pretty simple to setup and it's free to download and use. I have not tried resizing/optimizing for the web with this one but it should be pretty easy. Directions forthcoming... | ||
| + | [[http://www.irfanview.com/]] | ||
