Understanding Pixels and Resolution
Reducing File Size and Saving Images for the Web
The most important concern when building images for the Web is file size. You don't want graphics to take more than 15 to 20 seconds to download, so it's crucial to keep file size down. And, always work in RBG mode. CMYK is used for printing output only.
The best compression formats to save your images are JPEG, GIFS and PNG.
JPEG - offers the best reproduction on the web, almost all scanned photographic images should be saved in the JPEG file format. JPEG compresses RGB natural images really well, even if the image does suffer some degradation in the process.
When you save an image in the JPEG file format, Photoshop asks you how much compression - Maximum quality (low compression) to Low quality (high compression).
GIFS and PNG - use this for solid colors, especially computer-generated images, type, and line art. It is not appropriate for images in which you've used Web-safe colors- because colors often shift in JPEG images- or images that require transparency.
Reducing Image File Size and Resolution
|
| Adjust your image to exactly how you want it. Crop
it, set auto contrast, etc. |
|
This IMAGE SIZE dialog box appears. See the original PIXEL DIMENSIONS, FILE SIZE and DOCUMENT SIZE. The current resolution is 72 dpi which is what you need for all web graphics because the monitor screen can only project 72 dots per inch. |
|
Check the boxes for Constrain Proportions and Resample
Image (keep it at Bicubic) and type in the size your want to change
in the Width and Height area. Or, if you know the exact pixel width
and height, fill those boxes with a numerical value. Notice how the
PIXEL DIMENSIONS file size shifts to a smaller file size. |
|
|
This is where you can experiment with Pixel Dimension
and File size. Once you find the target size and dimension, select
OK to accept the change. |
|
| Your new resized image should appear in a smaller window. You can zoom out to 100 percent or double-click on the hand tool to fit in window. To save this image go to FILE>SAVE FOR WEB. |
|
| The SAVE FOR WEB WINDOW should appear. This is where you will experiment with JPEG compression quality settings. See the input boxes on the top right corner for JPEG, GIF, PNG. THE JPEG QUALITY setting pull down menu, and the quality setting. You can select the JPEG pull down menu to choose Maximum to Low quality or type in the quality value you want. The lower the quality the smaller the file size.Also, notice the bottom left info area which indicates the current file size and download time on a 28.8 kbps modem. |
|
| To see the best outcome, use the 2up or 4up optimized window to preview the image before saving it. |
|
| Once you're happy with the resolution and file size and download time, select save and the Save Window pops up for you save the file in a location on your desktop or hard drive. |
