Web-optimizing photos with iPhoto & Photoshop

What's wrong with dragging photos from iPhoto and uploading them to a web site or even dragging them into a mail message? The web site's pages will take longer to load, the email message may not get through to the recipient, you'd be contributing to the overall slowing down (aka 'choking') of the internet, and you may be unwittingly exposing your high quality copyrighted material to the possibility of digital theft.
 
High quality images are generally overkill on the web and when included in email messages, because:

• you typically view them on a relatively low resolution display that is incapable of displaying them to their full advantage, and
• the file size is unnecessarily large for transfering to and from the internet (through a browser or a mail program).

 
For example, a digital camera billed as 5 MP (Megapixels) will take a high resolution image that has approximately 2560 x 1920 pixels (width x height). As the B&H chart (linked below) states, any image greater than 1 MP "will produce an excessively large file size that would be inappropriate for web applications". Large files take longer to download when a user views a web page. If a web page includes multiple images, the extra download time adds up, making the web site appear significantly less responsive.
 
It is possible (and advisable) to drastically reduce the size of an image for use on the web or in email. If optimized correctly, a web-optimized version of an image is hard to tell apart from the original, when viewed on a computer display. (This is not necessarily the case for printed images.)
 
You can use iPhoto, Photoshop or several other image applications to web-optimize photos and other images. The directions below assume the latest versions of each application. If you are using an earlier version, there may be minor differences in appearance or options.

If you use iPhoto:

1. Use the Export command in the File menu.
2. Choose the File Export tab (see attached screen shot).
3. Choose JPEG and a Quality setting (e.g. High or Medium).
4. Choose a Size (e.g. Medium).
5. Click the Export button and specify where you wish to save the file.

Check the result and increase or decrease the size or quality settings, if necessary. The resulting image file will be significantly smaller (than if you just drag an image out of iPhoto's window) and therefore more suitable for use on a web site. Below is an example of the different file and image sizes for a random photo image using both iPhoto and Photoshop's mechanisms.

If you use Photoshop:

1. Use the Save for Web & Devices command in the File menu (see attached screen shot).
2. On the right hand side of the 'Save for Web & Devices' panel, choose the JPEG or PNG quality at the top (Preset).
3. Choose a Width and/or Height value at the bottom (640 width shown).
4. Click the Save button and specify where you wish to save the file.

Below is an example of the different file and image sizes for a random photo image. It shows that the web-optimized image file is around 5% of the size of the original "dragged from iPhoto" file - a savings of 95%. The savings will of course depend on the size and resolution of the original image. Generally, the more complex the original image, the greater the savings will be.

• Image size of original photo: 2592 × 1936 (approximately 5 MP)
• File size of original photo's image file: 3,300 KB
• Image size when exported from iPhoto with High JPEG Quality and Medium size: 640 x 478
• File size of iPhoto's exported image file: 198 KB
• File size of Photoshop's web optimized image file: 158 KB