If you have been using Photoshop for the web for any length of time, you have probably run into a situation where you find yourself doing the same operation over and over again. For me, it's preparing a directory full of photos (usually from my digital camera) for use on the web. My camera captures big (1344 x 960 or something like that) .JPG or .TIFF files that need a little work before they'd be what I would consider 'web ready'. What do I think of as 'web ready' for a photograph? Depends on the context, but for the most part images should be 'small' both in terms of pixel dimensions and file size, sharp and adjusted for contrast/color balance. 'Web ready' photographs often times have an associated thumbnail image.
If you already know why, you can skip this section. Bandwidth is always an issue when preparing content for the web. Photos (especially high-quality ones) are especially hungry for bandwidth. Say you have 12 images you want to display on a page. If each photograph is 30 K, you're looking at a final page size upwards of 360 K! That only counts the photos. What if there are graphics, icons, maps and supporting text? Common sense suggests that 400 K pages are not user friendly. So what are our options? We can either give users only small photographs, give them only text links to the large photos or we can give them thumbnail versions. The thumbnail versions are a great bandwidth saver, because they not only allow the user to download a quick index of the images (the thumbnails page), but also to make informed choices about which files they will download to view. I have heard it suggested that one solution would be to put only large images on the server, and constrain them to thumbnail display size with the height/width attributes, but that completely defeats the purpose of having thumbnails. The user is still forced to download big, heavy photos of your Aunt Betty's birthday party. Small, lightweight thumbnails make navigating through an images directory a breeze for the users. Let's help the user out!
For the purpose of this article, we will perform what has become a fairly routine practice for me — saving 'web ready' photographs (with corresponding thumbnails) for use in our website. For an example of the final product, see a thumbnail gallery I prepared for a client.
Yes, I know there's a 'Web Photo Gallery' option in Photoshop. Why don't I use it instead? Because I want flexibility! I want the freedom to do whatever I want with my thumbnails and larger images. Maybe I want JavaScript links that open the images in a new window, or maybe I want a PHP script that automatically generates the thumbnails and links based on the contents of a directory, or maybe I want to do the slick alpha fade on my thumbnails. The point is, the technique that I've used on this page is:
- exported a large, optimized .jpg to the folder 'large'
- exported a small, optimized .jpg to the folder 'thumbs'
- written a PHP script that gets all the image filenames from one of the directories, and writes the appropriate <img> tags and links.
The whole process took about 20 minutes, though more time could be spent fine-tuning image brightness, contrast, color, etc. The particular needs of this page were just to display the images I'd shot with my camera during this one day. Due to the large number of files, I didn't pay too much attention to each photo's color and detail. Your mileage may vary.
Some of this work has to be done manually in Photoshop, but many of the repetitive tasks (e.g., applying commands with their parameters to individual files) can be automated. Read more
0 comments:
Post a Comment