File Size vs. Quality
Web graphics are necessary for delivering visually rich designs, however they are also usually the cause of the waiting time for a user to view anything in their browser.
Graphics on the web are approached very differently than graphics for print. On the web they need to be as small as they can be while maintaining a good enough quality whereas in print graphics are usually as large as they can be with the best quality.
Often on the web we are giving up quality to be able to have smaller and faster files. The art of saving for the web comes in the way of saving out files as an appropriate file format which compresses the file.
Colour Settings in Photoshop
Color-managing documents for online viewing
Color management for online viewing is very different from color management for printed media. With printed media, you have far more control over the appearance of the final document. With online media, your document will appear on a wide range of possibly uncalibrated monitors and video display systems, significantly limiting your control over color consistency.
When you color-manage documents that will be viewed exclusively on the web, Adobe recommends that you use the sRGB color space. sRGB is the default working space for most Adobe color settings, but you can verify that sRGB is selected in the Color Settings dialog box (Photoshop, Illustrator, InDesign) or the Color Management preferences (Acrobat). With the working space set to sRGB, any RGB graphics you create will use sRGB as the color space.
When working with images that have an embedded color profile other than sRGB, you should convert the image ‘s colors to sRGB before you save the image for use on the web. If you want the application to automatically convert the colors to sRGB when you open the image, select Convert To Working Space as the RGB color management policy. (Make sure that your RGB working space is set to sRGB.) In Photoshop and InDesign, you can also manually convert the colors to sRGB using the Edit > Convert To Profile command.
Use Pixels Not Inches
• Your monitor sees everything in pixels per inch (PPI).
• Most monitors display graphics at 72 PPI.
• If your graphic is 72 pixels x 72 pixels, it’s actually one inch by one inch.
• About 92% of computer monitors are set to either 800×600, 1024×768, or 1280×1024 pixels.
• The most common resolution is 1024 x 768 therefore 960 pixels wide is a good base size to use for your designs
Web Graphic Formats
PIXEL BASED
- JPG – Joint Photographers Exploration Group
- Used for photos or graphics with gradients, shadows, shading, etc.
- Does not support transparent areas OR animation
- GIF -Graphic Interlace Format
- Supports transparenct
- Displays up to 256 colors only
- Best used with flat colored object / images
- Dithering is used to simulate gradients
- Supports animation
- PNG – Portable Network Graphic
- 2 versions of PNG with similarities in capabilities and limitations as Gif’s and JPG’s.
- 8-bit PNG is similar to a GIF
- 24-bit PNG similar to a JPG
- To use the PNG transparency safely – JavaScript is required, a JQuery plug in is commonly used to fix browser issues.
- SVG - Scalable Vector Graphic
- Vector graphics are used with the SVG format which is not widely supported so it is used less often otherwise vector graphics tend to be reserved for Flash. Note: as HTML5 becomes accepted, you will see an increased usage of the SVG.
JPEG Optimization Options
A. File Format menu
B. Compression Quality menu
C. Optimize menu
Quality
Determines the level of compression. The higher the Quality setting, the more detail the compression algorithm preserves. However, using a high Quality setting results in a larger file size than using a low Quality setting. View the optimized image at several quality settings to determine the best balance of quality and file size.
Optimized
Creates an enhanced JPEG with a slightly smaller file size. The Optimized JPEG format is recommended for maximum file compression; however, some older browsers do not support this feature.
Progressive
Displays the image progressively in a web browser. The image appears as a series of overlays, enabling viewers to see a low-resolution version of the image before it downloads completely. The Progressive option requires use of the Optimized JPEG format.
Note: Progressive JPEG’s require more RAM for viewing and are not supported by some browsers.
Blur
Specifies the amount of blur to apply to the image. This option applies an effect identical to that of the Gaussian Blur filter and allows the file to be compressed more, resulting in a smaller file size. A setting of 0.1 to 0.5 is recommended.
ICC Profile
Preserves the ICC profile of the artwork with the file. Some browsers use ICC profiles for color correction. This option is available only after you saved an image with an ICC profile—it is not available for unsaved images.
Matte
Specifies a fill color for pixels that were transparent in the original image. Click the Matte color swatch to select a color in the color picker, or select an option from the Matte menu: Eyedropper (to use the color in the eyedropper sample box), Foreground Color, Background Color, White, Black, or Other (to use the color picker).
Pixels that were fully transparent in the original image are filled with the selected color; pixels that were partially transparent in the original image are blended with the selected color.
GIF Optimization Options
GIF is the standard format for compressing images with flat color and crisp detail, such as line art, logos, or illustrations with type. Like the GIF format, the PNG-8 format efficiently compresses solid areas of color while preserving sharp detail.
PNG-8 and GIF files support 8-bit color, so they can display up to 256 colors. The process of determining which colors to use is called indexing, so images in GIF and PNG-8 formats are sometimes called indexed color images. To convert an image to indexed color, Photoshop builds a color lookup table, which stores and indexes the colors in the image. If a color in the original image does not appear in the color lookup table, the application either chooses the closest color in the table or simulates the color using a combination of available colors.
In addition to the following options, you can also adjust the number of colors in the image ‘s color table. See Customize the color table for GIF and PNG-8 images.
Optimization settings for GIF
A. File Format menu
B. Color Reduction Algorithm menu
C. Dithering Algorithm menu
D. Optimize menu
Lossy (GIF only)
Reduces file size by selectively discarding data. A higher Lossy setting results in more data being discarded. You can often apply a Lossy value of 5–10, and sometimes up to 50, without degrading the image. The Lossy option can reduce file size by 5% to 40%.
Note: You cannot use the Lossy option with the Interlaced option or with Noise or Pattern Dither algorithms.
Color Reduction Method and Colors (Palettes)
Specifies a method for generating the color lookup table and the number of colors you want in the color lookup table. You can select one of the following color reduction methods:
Perceptual
Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
Selective
Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
Adaptive
Creates a custom color table by sampling colors from the predominant spectrum in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
(Restrictive) Web Safe
Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the web-safe palette.) Using the web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
Custom
Uses a color palette that is created or modified by the user. If you open an existing GIF or PNG-8 file, it will have a custom color palette.
Use the Color Table palette in the Save For Web & Devices dialog box to customize the color lookup table.
Black and White, Grayscale, Mac OS, Windows
Use a set palette of colors.
Dithering Method and Dither
Determines the method and amount of application dithering. Dithering refers to the method of simulating colors not available in the color display system of your computer. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size. For optimal compression, use the lowest percentage of dither that provides the color detail you require. Images with primarily solid colors may work well with no dither. Images with continuous-tone color (especially color gradients) may require dithering to prevent color banding.
GIF image with 0% dither (left), and with 100% dither (right)
You can select one of the following dithering methods:
Diffusion
Applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels.
Pattern
Applies a halftone-like square pattern to simulate any colors not in the color table.
Noise
Applies a random pattern similar to the Diffusion dither method, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise dither method.
Transparency and Matte
Determines how transparent pixels in the image are optimized.
To make fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.
To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, select a matte color and deselect Transparency.
To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, select an option from the Matte menu: Eyedropper (to use the color in the eyedropper sample box), Foreground Color, Background Color, White, Black, or Other (to use the color picker).
Examples of transparency and matting
A. Original image
B. Transparency selected with a matte color
C. Transparency selected with no matting
D. Transparency deselected with a matte color
Transparency Dithering
When the Transparency option is selected, you can choose a method for dithering partially transparent pixels:
No Transparency Dither applies no dither to partially transparent pixels in the image.
Diffusion Transparency Dither applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels. If you select this algorithm, specify a Dither percentage to control the amount of dithering that is applied to the image.
Pattern Transparency Dither applies a halftone-like square pattern to partially transparent pixels.
Noise Transparency Dither applies a random pattern similar to the Diffusion algorithm, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise algorithm.
Interlace
Displays a low-resolution version of the image in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and can assure viewers that downloading is in progress. However, interlacing also increases file size.
Web Snap
Specifies a tolerance level for shifting colors to the closest web palette equivalents (and prevent the colors from dithering in a browser). A higher value shifts more colors.
Save for Web
The save for web dialogue box is used for preparing graphics for use on the web – mainly compressing and setting file formats.
- Viewing tabs – Original, Optimized, 2-Up and 4-Up
- Toolbar
- Viewing Menu (preview settings)
- Factory and Custom Presets
- Color Palette Menu
- Animation Controls – used for previewing different frames within animation
- Zoom Rate
- File Info
- File Info
- Browser Menu – used for previewing before saving
Resources
- Optimizing Web Graphics (about.com)
- Optimizing Web Graphics (webreference.com)
- Screen Sizes
Extra
Tips to Get Started
- GIF
- Look at the graphic and count the number of colors you can definitely recognized. Multiply that number by 2 and use that number as the starting number of colors when optimizing.
- Only use dithering when needed otherwise have the stting turned off
- Adaptive pallette tends to yield the best results
- JPG
- a good starting value is a quality of 20.