Create Good-Looking Web Images that Work for You

1. File formats. There are 3 kinds of web-friendly file formats: jpg, gif and png. You can control compression level in a jpg file—the more compression, the lesser the quality. Images are displayed better using jpg or png formats. Gif and png files can have a transparent background, jpgs cannot. I prefer png to gif because there is greater color quality and similar file size compression. Gifs have the advantage of offering simple animation by inserting multiple frames. In order to save a file from Photoshop in any one of these formats, choose the Save for Web & Devices button from the File menu.

2. File size. Anything more than 72 dpi is a waste. Larger files just take longer to load, they do not look better. Make the dimensions of your files to 100% of the final image size. If you’re using thumbnail-size images (a good idea), don’t scale down the larger versions take the time to create smaller files.

3. Copyright protection. It’s a good idea to watermark your images or otherwise put a copyright on them. As in the real world, there are bad people on the internet who will grab your image and use it without compensating you for it. But, if you catch them and want to pursue them legally, at least you have a leg to stand on.

4. File names. Name your files something that the search engines can read and lead back to your website (ex: Molly_Ahearn_cowgirl.png). Remember to use underscore marks instead of spaces.

5. ALT tags. Don’t forget to give your images descriptive ALT tags. Dreamweaver politely asks you to create an ALT tag every time you insert an image. Another way to guide search engines to your site.

6. Relevant text content. Use photo captions or have text describing the images that is relevant to their content. This is critical for search engines like Google and Yahoo direct people to your site.

7. Quality. Make sure you review the quality of files saved for the web. Many times an image looks great at its full resolution, but needs some additional curve adjustment and sharpening after you’ve downsized it for the web.

8. Time-saving Photoshop tools. If you’ve never written an action, don’t be intimidated, it’s easy. Go to the action menu, select new action, label it, and then proceed to adjust an open image file (ex: decrease its resolution to 72 dpi and dimensions to 25% of the original size). Close the window, hit the stop button and you’re done. Now you can use the batch tool to apply that action to an entire folder of images while you’re enjoying a frosty beer!