Photoshop CC: The Missing Manual, 2nd Edition

Chapter 17. Photoshop and the Web

Preparing graphics for a website is a journey into the unknown: You’ve got no idea what kind of monitor folks will use to view your images, how fast (or slow) their Internet connections are, or which web browsers they use. It’s a proposition riddled with variables that you have zero control over; all you can do is prepare your imagery well and hope for the best.

The main challenge in preparing images for the Web is finding a balance between image quality and file size. Premium-quality, minimally compressed JPEGs look stunning under almost any condition—but if the person visiting your site has a pokey dial-up connection, she might decide to click elsewhere rather than wait for the darn thing to download. On the other hand, if you try to satisfy the slowest common denominator by making ultra-lightweight images, you’ll deprive those with broadband (high-speed) connections from seeing the impressive details you’ve lovingly created.

Luckily, there are several tricks for keeping file sizes down and retaining quality. That’s what this chapter is all about. You’ll learn which size and file format to use when creating images destined for the Web. You’ll also discover how to make an animated GIF, craft favicons (those tiny graphics you see in web browsers’ address bars), mock up web pages and export the images, protect online images against theft, and export web graphics by using a new feature: Generator.

Tip

If you’re using one of Apple’s Retina displays (called ...