3: Adding Graphics in Java

Encoder QR in Java 3: Adding Graphics

One of the most common questions about images for the Web concerns when to use GIF or PNG and when to use JPEG Table 3-1 provides the simple answer

Table 3-1

Best Use For line art (such as one- or two-color logos), simple drawings, animations, and basically any image that has no gradients or blends GIF is also the best format for images that you want displayed with a transparent background PNG generally produces better-looking images with smaller file sizes than GIF for the same kinds of limited-color images Just beware that really old browsers, such as IE 3, don t support the PNG format and that even newer browsers, such as IE 4, 5, and 6, have problems with full PNG alpha channel support For colorful, complex images (such as photographs), images containing gradients or color blends, and any other images with millions of colors

If you re new to saving images for the Web, the following basics can help you get the best results from your files, your image-editing program, and ultimately, your Web pages You can Convert images from any format into the GIF, PNG, and JPEG formats For example, your TIF, BMP, and PSD image files can all be turned into a Web-friendly file format Optimize images that are already in GIF, PNG, or JPEG format This further reduces their file sizes for faster download over the Internet Use many programs to create Web graphics, but Photoshop is one of the best and easiest to use Under the File menu in Photoshop (and Photoshop Elements), you ll find the Save for Web option (In Photoshop CS4, the option is Save for Web & Devices) Fireworks provides a similar feature and although the dialog boxes are slightly different in each program, the basic options for compressing and reducing colors are the same

When you use the Save for Web feature, Photoshop creates a new copy of your image with the settings you specified and leaves the original unchanged in the main Photoshop workspace See the upcoming sections Optimizing JPEG images in Photoshop and Optimizing GIF and PNG images in Photoshop for details about using the Save for Web feature Make image edits before you optimize It s always best to use the highest quality image possible when you re editing, so make sure to do all your editing, sharpening, and resizing before you use the Save for Web option Similarly, if you want to make further changes to an image after you ve optimized it, you ll achieve the best results if you go back a higher resolution version of the image rather than editing the version that s been optimized for the Web

The JPEG format is the best choice for optimizing continuous-tone images, such as photographs and images with many colors or gradients When you optimize a JPEG, you specify how much compression should be applied, a process that makes the file size of the image smaller If you have a digital photograph or another image that you want to prepare for the Web, follow these steps to optimize and save it in Photoshop If you re using Photoshop Elements or Fireworks, the process is similar although the specific steps may vary: 1 With the image open in Photoshop, choose File Save for Web & Devices (or File Save for Web) The Save for Web & Devices dialog box appears 2 In the top-left corner of the dialog box, choose either 2-Up or 4-Up to display multiple versions of the same image for easy side-by-side comparison In the example shown in Figure 3-2, I chose 2-Up, which makes it possible to view the original image on the left and a preview of the same image as it will appear with the specified settings on the right 3 On the right side of the dialog window, just under Preset, click the small arrow to open the Optimized File Format drop-down list and choose JPEG (this dialog window is open in Figure 3-2) 4 Set the compression quality Use the preset options Low, Medium, High, Very High, or Maximum from the drop-down list Or use the slider just under the Quality field to make