3: Creating Web Graphics in Java

Create Quick Response Code in Java 3: Creating Web Graphics

height automatically affect the width (and vice versa) to ensure that the image proportions remain constant I prefer to work this way, but if you do want to change the image and not maintain the proportions, you can deselect this box

Figure 3-2: When you resize an image in Photoshop in the Pixel Dimensions area, you can specify the new size in pixels or as a percentage of the original size

6 Click OK to resize the image If you want to return the image to its previous size, choose Edit Undo Beware that when you save the image, the changes become permanent

When you save images for the Web, you save them at a resolution of 72 pixels per inch (better known as ppi) Most computer monitors display no more than 72 ppi, so any resolution higher than that is wasted on the Web because you d be making your visitors download more pixels than they can see However, if you want to print an image, you want all the pixels you can get, usually at least 200 ppi or higher, which is why most images you see on the Web look terrible if you try to print them in a large size

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

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 when you want to display an image with a transparent background PNG generally produces better-looking images with smaller file sizes than GIF for the same kinds of limited-color images Really old browsers, such as IE 3, don t support the PNG format, but most Web designers now choose this format over GIF because so few people use such old browsers Browsers as recent as IE6 don t display transparent PNG files properly, which is unfortunate because PNG files tend to handle transparency better If you re using transparency and know that many of the visitors to your site still use IE6 or earlier versions, you may want to consider using GIFs instead JPEG is the best format for colorful, complex images (such as photographs); images containing gradients or color blends; and any other images with millions of colors

JPEG (Extension may be jpg or jpeg)

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 an image from any format into the GIF, PNG, or JPEG formats For example, turn all your TIF, BMP, and PSD image files into a Web-friendly file format Optimize images that are already in GIF, PNG, or JPEG format Even if your files are already in a Web-friendly format, following the instructions in this chapter to optimize images with Adobe s Save for Web dialog box 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 and CS5, 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 (which are covered in this chapter) are the same See the upcoming sections Optimizing JPEG images for the Web and Optimizing images in GIF and PNG formats for details about using the Save for Web feature Make image edits before you optimize When you re editing, using the highest quality image possible is always best 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 (When you use the Save for Web & Devices feature, Photoshop creates a new copy of your image and leaves the original unchanged)