k ' Anyone wlio linn IIVIII IIMd tliu Wub hns li kely 11H I11tl liy ulow lontlin g Wob sites. It's ', been fn1 11 the ft 1111 cl nlli{lll n1 mlllllll wh111 o th o fil o si of t/11 1 f /11tpli1 LII lt ill llliltl lltt 111t n huw fnst Sllll/ 111 111 11 I 1111 VIIIW 11 111 111 , Mllki l1(1 111't1 11 11 7 W11 1! 1/lllpliiL" 111 llll lllillnti lltlllllltll>ll. 1 l iitllllllllnl 111111 '" )timizing Images y, / l1111 11 11 11111' Lil'J C:ii') I1111 Vi llll ihllillnn l 111 1111 / 11 / ~il/ 11/ y 11111111 In l1 nlp Yll ll IIIIIMIIII IIII I/ 1 11111 I Optimizing JPEGs I 1 I Selective JPEG Optimization with Alpha Channels I l 11 tp111 11 1111 II 1111 111 I 1111 !11 11 1 IIIII nlllll I Optimizing GIFs I Choosing the Right Color Reduction Palette I lljllillll/11 111111 Ill II lillllljliiiX 111 111/r ll I lilnl illllli l 'lilltlllllllip (;~,:; 111 111 I Reducing Colors I Locking Colors I Selective G/F Optimization I illtnrlln lll ll" lllt l" "'ll" i ~IIIH i y C}l •; I Previewing Images in a Web Browser I llnt11tl. II 111 111/ M ullt.li 11 n tlttlmt, 1111111' I Optimizing G/Fs and JPEGs in lmageReady CS2 I IlVII filllll/11111, /111 t/11/l lh, }/ '/ CJ, lind ) If unlnmdtltl In yn tl, /hoy won't chap_ OJ 11111 bo lo1 ""'II· II yo 11'1 11 n pw nt oplimi1 PCS2Web HOT CD-ROM I ing Wol1 IJIIipluc;u, you'll bo impronml d by th o llllpOI'b optimiw ti on cupnbilitlos in ,,, Photoshop CS7 und lmng oRondy CS?.. I ~I I ) I zs61 ) ) l ) ~r c)''-' 1'Y~ 3> ~ What Affects Speed on the Web? ~0 f Unfortunately, just making your file sizes small in Photoshop CS2 or Image Ready CS2 does not guar­ I antee fast Web site performance. Here are some other factors that slow down Web sites: " • Connection speed: If the connection speed of a Web server is slow, your Web site will be slow. Anyone who has ever used the Web has likely • Routing problems: If router problems exist, your Web site will be slow. ', been frustrated by slow-loading Web sites. It's • Traffic: If you are using a large Internet service provider, such as AOL, Earth link, or GeoCities, the first design medium where the file size your Web site may slow down during heavy usage hours due to a high volume of Web traffic. of the graphics translates into how fast If you're using a small, local Internet service provider, your Web site may be slow because the someone can view them. Making small Internet service provider does not have resources to handle the heaviest traffic periods. Web graphics is an art and a science. '" ,.)timizing Images Fortunately, Photoshop CS2 and Solutions? Make sure you host your Web site from a fast connection or hire a hosting company who lmageReady CS2 provide the ideal guarantees a fast connection. If you have a serious business site, get a dedicated hosting service Optimizing JPEGs I I tools to help you master this craft. instead of a large, consumer-based Web service. I Selective JPEG Optimization with Alpha Channels I Prepare for a long chapter because If the Web is slow because of router problems, it affects everyone. Such is life. Control the things I Optimizing GIFs I Choosing the Right Color Reduction Palette 1 optimizatio'n is a complex subject you can (like file size). The only predictable thing about the Web is that it won't always perform in I Reducing Colors I Locking Colors I Selective GIF Optimization 1 that both Photoshop CS2 and a predictable manner. I Previewing Images in a Web Browser I lmageReady CS 2 handle in great I Optimizing GIFs and JPEGs in lmageReady CS21 detail. If terms such as dither, adap­ tive palettes, bit depth, JPEG, and Understanding Web File Formats chap_o7 GIF are unfamiliar to you, they won't There are only a small number of graphic file formats you can use when optimizing Web graphics. PCS2Web HOT CD-ROM be for long. If you're a pro at optimiz­ The most popular formats are JPEG and GIF. / ing Web graphics, you'll be impressed by the superb optimization capabilities in GIF stands for Graphic Interchange Format; JPEG stands for Joint Photographic Experts Group. The Photoshop CS2 and lmageReady CS2. words graphic and photographic are intentionally bolded here to indicate what each file format handle< best. It isn't that GIF is better than JPEG, or vice versa. Each compression scheme is best•suited for< certain type of image: • GIFs are best for flat or simple graphic images with solid areas of color, such as logos, illustrations cartoons, line art, and so on. • JPEGs are best for continuous-tone images, such as photographs, glows, gradients, drop shadow' and so on. Some images don't fall into either category because they are hybrids of line )art and continuous-tone graphics. In these cases, you have to experiment with GIF and JPEG to see which gives you the sma est file size and the best image quality. ) I 156 1 I 151 I L ( ( Adobe Photoshop CS2 tor the Wel:l H•O•l 1 7. opt>mmng 11 Transparency and Animation Transparency and Animation Terms continued Whether a graphic contains flat color or continuous tones is not the sole deciding factor for choosing Description the best file format. The GIF and SWF formats can do a couple of things the JPEG format cannot, Term A single G IF file can contain multiple images and display them in a such as transparency and animation. If you're looking for specific information about saving files as GIF animation transparent GIFs, animated GIFs, or animated SWFs, you can refer to Chapter 10, "Creating Transparent slideshow fashion. GIF files containing multiple images are called ani­ Graphics," Chapter 11, "Creating Animated GIFs;' or Chapter 19, "Integrating with Macromedia Flash:' mated GIFs. For more information on how the GIF file format supports In the meantime, here's a brief explanation of these terms because their capabilities may factor into animation, check out Chapter 11, "Creating Animated GIFs." your optimization strategy. ---------------------------With Macromedia Flash (SWF) files, you can create more complex Macromedia Flash animations than with animated G I Fs. Although you can't take advantage animation Transparency and Animation Terms of all the features of Macromedia Flash in lmageReady CS2, exporting files as SWF is a huge benefit. Once you've exported files as SWF, you Term Description '--. ( can open and edit the files directly in Macromedia Flash. For more infor­ Transparency All digital image files are rectangular. The shape of your Photoshop CS2 1\ mation, check out Chapter 19, "In tegrating with Macromedia Flash." document window is always square or rectangular. Even if an image inside is not in that shape, the file itself is defined by rectangular bound­ aries. What if you have a circular button design you intended to be viewed Lossy or Lossless? on a colored or patterned background? In such a case, you use transpar­ There are two categories of file compression: lossy and lossless. Lossy file compression reduces file ent pixels to mask out parts of the image, leaving a shape that appears II size by discarding visual information. Lossless file compression reduces file size without throwing circular in a Web browser. If you want to use transparent images on the away visual information. JPEG is a lossy compression method. Traditionally, GIF was a lossless method Web, you can choose one of two file formats: GIF or SWF. ~------- but in Photoshop CS2 and lmageReady CS2, you can add lossiness to G IF compression to reduce G IF transparency The GIF file format supports 1-bit masking, which means the image can file size. be turned off in specified areas, making it possible to create irregularly I shaped graphics. Because the file format supports only 1-bit transparency, IJ !wARNING I Don't Recompress a Compressed Image there are no degrees of opacity except on or off (visibility or no visibility for each pixel). For more information, check out Chapter 10, "Creating Recompressing a JPEG or a lossy GIF can erode the image quality because you throw away Transparent Graphics." visual information each time you apply lossy compression. The result can be visible, unwanted Macromedia Flash Like the GIF format, SWF also supports masking, but of much higher compression artifacts, which cause the image to look distressed. If you need to make a change transparency quality. SWF supports 32-bit masking, whereas G IF supports 1-bit mask­ to an image that's already been compressed as a JPEG or lossy GIF, find the original, uncom· ing. The process for exporting SWF files with transparency is identical to pressed version of the image, make your changes, and compress the file as a fresh JPEG or lossy exporting SWF files without transparency, which you'll learn about in GIF to maintain the image's quality. This is one reason you should always save the original PSD Chapter 19, "Integrating with Macromedia Flash." (PhotoShop Document) files you create in Photoshop CS2 or lmageReady CS2. ::::1 I ---~- · ----· Animation Animations are a series of still images (called frames) that appear in '~-· motion. When you work with animations, you can control how fast and ~ how many times the animation plays. Photoshop CS2 lets you save ani­ mations as animated GIFs; lmageReady CS2 lets you save an imations in two different formats: animated GIFs and SWF.