welcome

Differences

This shows you the differences between two versions of the page.

wiki:preparing_images_for_web [2007/03/19 02:00]
michael
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. 
Line 16: Line 24:
  * Open the image and rotate it as necessary   * Open the image and rotate it as necessary
  * Resize the Image   * Resize the Image
-    * Image-->Scale Image...+    * ''Image''->''Scale Image...''
    * Enter a width of 500 pixels     * Enter a width of 500 pixels
-    * Click Scale, the height should change automatically. +    * 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/]] 

Personal Tools