Save Your Photos for Web and Mobile Delivery
[by Richard Harrington]
I frequently see other photographers struggle in preparing their files for the Internet. Some make files that are ridiculously big and take forever to download. Others accidentally resize or flatten layers during the process and damage their files. But I understand, you probably didn’t study to be a web developer.
Fortunately, Photoshop provides a powerful command for compressing images and previewing the results: the Save For Web & Devices command.
1. Open an image in Adobe Photoshop.
2. Choose File > Save For Web & Devices.
3. The Save For Web & Devices dialog box offers several important options for optimization and preview:
- Tools. If you can’t see the entire image, you can use the Zoom tool to make the image more visible. Additionally, you can use the Hand tool (or hold down the spacebar) to drag and navigate around the image.
- Optimization tabs. By clicking the four tabs at the top, you can choose to view the Original image, an Optimized view, 2-Up for two versions of the image side by side, or 4-Up for four versions of the image side by side. Being able to compare optimized images helps you choose the right format and compression settings.
- Image Optimization Info. The area below each image in the Save For Web & Devices dialog box gives you optimization information. You can see the current optimization applied, the projected file size, and the estimated download time based on a selected modem connection speed.
4. You’ll likely need to further reduce the file size for Internet delivery. The first area to tackle is the actual image size in pixels. In the Image Size field type in a Height of 600 pixels, so the image can integrate easily into the Web page (even with a screen resolution of 1024 x 768, a height of 600 would allow the image to display without scrolling up and down). Press the Tab key to exit the field and apply the resize value.
5. The file size has been reduced, but it’s hard to see the effects of the compression. Set the image magnification view to 100%.
6. Change the amount of Compression by either changing the preset (from High to Medium, for example) or adjusting the Quality amount.
7. Click Save to specify a location for the saved file and then write a compressed Web-ready version. The original file will remain untouched, and its resolution and quality will be identical to its state when you launched the Save For Web & Devices command.
For more on mastering Photoshop, check out my book Understanding Adobe Photoshop.
Here’s a free podcast that also shows the technique in action:
Richard Harrington is the founder of RHED Pixel, a visual communications company in Washington, D.C. You can read Rich’s blog at www.RichardHarringtonBlog.com as well as follow him on Twitter @rhedpixel
7 Responses to 'Save Your Photos for Web and Mobile Delivery'
Subscribe to comments with RSS or TrackBack to 'Save Your Photos for Web and Mobile Delivery'.
This is cool, but how is it different than resizing and saving out as a jpg?
This is pretty much the same way I prepair my files for my website. One problem I have with this is that it strips some of the meta data. Mostly concerned with copyright. If I open this file back up and ad only the meta data needed then save again does it retain its optimized for web properties?
In a few ways.
It automatically strips the unneeded (and large) preview image
It lets you precisely control size with download time estimates
It won’t let you change your original image permanently
It sets it to the right color space
It makes the name of the file compatible for the web.
In older versions of Photoshop, the “Save for Web” function would strip out all Metadata. Is this still the case? If the metadata is removed, it makes it an orphan work.
Tag your images with Bridge
You can simply lift the metadata and tamp it in Bridge. No need to open and resave.
Hi Robert -
A couple of years ago, the ASMP worked closely with Adobe to get this issue fixed. Photoshop now includes a dialog box that allows you to set preferences for how the Save for Web command handles metadata. You can choose to preserve just copyright information, just copyright and contact information, preserve all metadata except the “camera info”, which will strip the lens, shutter speed, f-stop, etc. out of the EXIF data or preserve all metadata. Pretty cool, huh?
You can find instructions for locating that dialog box at this link from the dpBestflow.org site.
Richard- you always have “real world” solutions and you provide such resource-filled info. I appreciate you.