preparing images for the web
1. scan. sketch. snap. steal.First, find or make the image you plan to use. Then get it into your computer by one of the following means: Scan. You can digitize an existing photo or graphic by scanning it into your computer. You'll need access to a scanner, of course. (Most copy shops and computer centers have them; you can also buy one for under $200.) Sketch. You can create a new image of your own, using image-creation software like PaintShop Pro or Illustrator Snap. You can take pictures with a digital camera and easily transfer them to your computer. Steal. The web is designed so you can easily pinch graphics off neighboring sites. Just right-click on any image (on the Mac, you click and hold), and select "Download to Disk." The image will be saved to your desktop. But remember: Just because it's easy, that doesn't mean it's legal. Equipment needed:
On the web Webmonkey Graphics tutorials http://www.webmonkey.com/design/graphics/index.html 2. cropCrop the image tightly, using Photoshop or similar image-editing software. Remove extraneous elements and cluttered backgrounds. This will reduce the file size, and therefore the download time, of the image. By the way, this isn't just good web advice, it's good visual advice. A closer, tighter shot is almost always more effective. As the photojournalist Robert Capa said, "If your pictures aren't good enough, you're not close enough." Equipment needed:
3. pick a file formatEvery image has to be saved in a format appropriate for the web. To keep matters simple, there are only two real options: GIFs and JPEGs. GIF. In general, graphics and line illustrations with solid, flat color should be saved as GIFs. JPEG. In general, photographs or images with colors that fade and blend should be saved as JPEGs. See choosing an image file format, p. 207, for explanations and exceptions. Note: Before saving an image as a GIF, you must convert it to "indexed color." Before saving an image as a JPEG, you must convert it to "RGB" color. Buy this book!
4. compressCompression is the most important part of image preparation, and the one most unique to the web. In print media, it doesn't matter how big an image file is. But on the web, size is everything. Images must be as small as possible in order to download quickly. So this is where the real work comes in. Images must be strategically altered and then shrunk to the smallest possible size that retains their original look and feel. The process is different for GIFs and JPEGs. JPEGs are easy to compress. There isn't much detail work or even much choice. You simply choose a level of compression, from 1 to 12 (12 is the highest quality image with the largest file size), and observe the trade-offs in size to speed. Fat images, saved with "maximum" compression, will be beautiful and terribly slow. Slimmer images, saved with "low" compression, will be fast and rough. The challenge is to pick the sweet spot in the middle. GIFs are more complicated than JPEGs, but they give you more control over the compression process. The main way to shrink a GIF is by reducing the number of colors in the image. You can do this with any image-optimization program. The trick is to reduce colors without dramatically altering the picture's appearance. As Luke Knowland wrote on Webmonkey, you have to "stealthily suck the color out," being selective and strategic. Reduce colors in a GIF by:
Equipment needed:
5. post!Once your image is digitized, cropped, and compressed, you're ready to integrate it into your web site. Images are brought into a page using the <img> tag, which lets you identify the image's name and location, height and width, and border size. It also lets you incorporate a short text description (called "alt" text), which describes the picture. The HTML would look something like this: <img src="/books/2/132/1/html/2/rhino.gif" height="100" width="100" alt="Photo of a wrinkled rhino" border="0"> |
EAN: 2147483647
Pages: 195