Colin Smith, is an award-winning author and designer, and is the founder of photoshopcafe.com, the leading Photoshop resource online. He’s a regular contributor to many graphics-related publications and web sites, such as Photoshop User, Mac Design, PlanetPhotoshop.com and the National Association for Photoshop Professionals (photoshopuser.com). If all that weren’t enough, he’s also authored and co-authored over a dozen books, including the best-selling How to Do Everything with Photoshop CS (McGraw-Hill/Osborne), and How to Wow: Photoshop for the Web (with Jan Kabili; Peachpit Press). Kinda paves the way for what’s next: how to professionally optimize your web graphics, Colin Smith style! Buckle in folks, it doesn’t get better than this!

Geoff: Hi Colin. Thanks a lot for taking a moment here with us.

Colin: Hi Geoff, thanks for having me.

Geoff: In the world of graphics, you’re as heavyweight as they come—so we gotta get the goods from you! First, do you have a set process or approach when you’re optimizing graphics for the web, or is every site—and every graphic—a little bit different?

Colin: Well, every site is different for sure, but I do have a process I follow. I use ImageReady or Save For Web in Photoshop. I always optimize from the original Photoshop file. I never recompress GIFs or JPGs because you lose too much quality.

I will slice the image first, taking care to slice the areas of flat color and the detail such as text in separate slices. I will then select all the slices and choose a general setting for everything. I then go to each slice and define it as a GIF or JPG depending on its details. If its flat color or text, its GIF. Most of the other slices will be JPG. I take as much time as I need to squeeze as much out of the images. I make the file sizes as small as possible without sacrificing too much quality. There are times when I will really keep the quality high, such as on areas of important details and then I will squeeze everything out of areas that aren’t so important. It’s a good idea to hide the slices for a second and make sure that there are no visible lines between slices where the optimization is very different. If that is the case, I will play around with the optimization until everything is smooth. I also avoid dither most of the time.

Geoff: That’s killer. Understanding how to slice up images correctly is a must for designers. So do you bother worrying about web-safe colors these days, or is that a thing of the past?

Colin: If I am choosing a solid color, it will be a web safe color. I’m not so much worried about dither on screens set to 256 colors like the case in the past. I find it convenient to use colors that have a hexadecimal value.  That way I can make empty cells with HTML color in Dreamweaver and they will match the Photoshop colors perfectly.

Geoff: Nice, so your layouts match up perfectly to your images. But what if  you have a folder full of, say fifty images that all need to be optimized? Do you really take your time, compare 2-UP images and so on, or do you take a much faster approach?

Colin: If I am processing a folder full of images, most of the time I will find a setting that works well for all the images and then batch process them either using an Action or the Image Processor script in Photoshop CS2. (Edit > Scripts > Image Processor). I spend most of my optimization time on the actual navigation of the site.

Geoff: Totally—I don’t know about you, but I don’t know where I’d be without Actions. Probably still working on those fifty images! So something else: What’s your take on PNG? Do you use them live on the web, or do you stick with JPG and GIF?

Colin: There are times I use PNG. If I am exporting an image to Flash or if I need multiple levels of transparency. The rest of the time it’s GIF or JPG because their file sizes are smaller.

Geoff: Any graphic or optimization secrets you can share with us?

Colin: Try to replace images with HTML whenever possible.  If you are using a flat color, where can you use color in an empty cell and save file size. A blurry image compresses better than a sharp one, so avoid sharpening images too much (avoid the Bicubic Sharper interpolation setting for resizing most of the time). Some designers blur their images slightly. I’m not a fan of that. In the end it’s a balancing act, quality versus file size.

Geoff: Yes, that balancing act is key. When you’re building a site, what’s your preferred software to use for image optimization?

[ Back to Web + Mag Articles ] [ Go to page: 1 | 2 ]