JavaScript EditorBest javascript editor debugger     Ajax website 



Main Page

Previous Page
Next Page

Making Images Smaller

Most images are simply too big for a Web page. While an image destined for print might measure 1800 pixels across (in order to print at 300 dpi and be six inches wide), images for Web pages should rarely be wider than 600 pixels, and often more like 200, depending, of course, on what you're doing.

To make images smaller:

1.
In the lower right portion of the Save For Web window, click the Image Size tab (Figure 5.20).

Figure 5.20. The original image, snapped with my digital camera's default values measured 2048 by 1536 pixels, which besides being big enough for almost four browsers, weighed in at a whopping 366.9K, when compressed as a high quality JPEG.


2.
Enter a new width or height in pixels, or a percentage, and then click Apply (Figure 5.21).

Figure 5.21. Type the desired new width of 400 pixels in the Width box and click Apply. The reduced-size image will fit properly on my page and will take only 2 seconds to download at 128Kbps (or less with a faster connection).


Tips

  • You can continue to adjust the size up or down until you're satisfied. The image is not resampled until you press Save.

  • Don't use this technique to make an image bigger than its original. Adding pixels with Photoshop increases the file size but doesn't add any image data. If you must increase the image's size, use (X)HTML (see page 94) or better yet, rescan or redigitize your image.

  • You can also use the Image Size command to change the size of an image. Remember that the Resolution box is irrelevant (it refers to the output resolution, which is determined on the Web not by you or Photoshop, but rather by the visitor's monitor). Instead, base the size on the number of pixels in the image. You will have to check the Resample Image box to get it to change the image's size (as opposed to its output resolution).

  • Another great way to reduce the size of an image is to crop out unwanted areas.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website