Many programs used for optimizing web images offer a list of predefined default optimization settings and the ability to customize settings for new graphics based on the user specifications. These settings can be used to adjust certain image’s properties, including color depth, file format, size, and quality.
For web designers, one of the main objectives is to optimize graphics size, which is to achieve the highest image quality with the smallest file size possible. If you significantly shrink the file size, the quality will suffer, and if you increase the quality to get clearer image, the file size will be too large. When working with an image, finding a good balance between quality and file size is necessary. It’s definitely important to discover the best configuration.
When working with image parameters, it’s best to use the panel optimization tool in the image editing software that allows you to work with different configurations. It allows you to choose different settings to get the highest image quality while getting the smallest file size possible.
To get the best results with the image optimization, you should follow using these guidelines:
- An image file size should be between 10 to 50 Kb, depending on its dimension,
- After you’ve finished working with a page. Add the file size of all images on the page. For a quicker view, it shouldn’t exceed 4 or 5 seconds with a DSL connection. Ideally, the combined size of all images in a page shouldn’t be more than 100Kb.
You should decide, which file format to choose, especially those that provide the best configuration option, so you consistently can get well optimized images every time.
GIF and PNG-8 optimization
When working with Photoshop and Illustrator you can use and optimization panel, which can help you to get the best customized settings. If you prefer Image Ready, the optimization settings are available in the ‘Optimize’ panel. Similar panel is also available in the Fireworks, however, you may also need to export the image, using the Export Wizard. These are optimization settings that you can configure:
Reduction algorithm: It defines how colors are compressed. The algorithm is based on the number of colors you choose and the color reduction method.
These are general algorithms you may find:
- Adaptive: When you choose this algorithm, color palette is created based on sampled colors from your image. As the result, you’ll only get the necessary colors in your images, which allow for smaller file size.
- Perceptual: It creates a palette filled only with colors that human eyes are sensitive to
- Selective: It is a combination of adaptive and perceptual algorithm. The color palette is filled only with colors we are sensitive to and these colors should also be used in the image itself. Selective is the default compression method for GIF files, which can produce the smallest size possible while retaining an acceptable quality.
- Restrictive: Its color palette contains 216 web-safe colors and the restrictive algorithm converts any color in your image into one of those web-safe colors. Other colors will be discarded from the palette.
- Lossy: This is a GIF-only compression format and can reduce the file size to about 60 percent of the original size. If you choose higher lossy number, more data is removed from the image, resulting in smaller file size and lower image quality. The settings usually range between 0 and 10. However, often you see slight image degradation. You can’t use lossy algorithm when you choose Noise Dither or Pattern option.
Colors: It defines how many colors you use in the image. If your image is a GIF or PNG-8, the range of color used is between 2 (black & white and 256).
Dither: This method creates a color by alternating two colors in random noisy or checkered pattern, which can trick our eyes into seeing one new color. For example, a dithered green color can be created by alternately displaying yellow and blue pixels. Dithering can improve image quality; however the file size may increase slightly.
You should use dithering on images with plenty of flat color areas. It is also important to choose dithering option when attempting to save an image containing gradients to prevent the banding effects. It is generally inadvisable to use GIF format on images with color gradient, as the banding effect will still visible by users who choose 256 color set, although it is quite rare nowadays.
There are common settings for dithering:
- No Dither: Dithering is not applied to the image.
- Pattern: It creates new dithered colors using squarish patterns, which are more noticeable to our eyes. The amount of dithering is adjusted by percentage slider.
- Diffusion: The color is produced using a more random dithering pattern. By increasing the percentage of diffusion, you can get more dithered colors in the image.
- Noise: It uses a more randomized dithering than Pattern or Diffusion.
Transparency: Both image formats allow you to have transparent pixels in the image. When placed on a Web page, the transparent parts will appear as see-through. Any underlying color will also visible through the transparent area. The range of transparency is between 0 to 100 percent. These are four common transparency options:
- No Transparency: This will disable any transparency in the image, any transparent and semi-transparent pixel will appear as opaque.
- Pattern: If you choose this option, semi-transparent pixels are dithered using square-like pattern
- Diffusion: It controls the dithering pattern of semi-transparent pixels. When it is applied semi-transparent pixels are dithered randomly.
- Noise: It creates a more randomized dithering than the Pattern and Diffusion on the semi-transparent pixels.
Matte: It determines what color the semi-transparent pixels will “sit on”. In general, you should make sure that the semi-transparent pixels have matching matte colors to achieve smoother blending.
Interlaced: If this option is selected, the image is sent to the users’ computer in multiple passes. Users will see a very blocky image first, which will get sharper after each pass. It is good for larger images and generally not necessary for images smaller than 10Kb
Web Snap: It determines how many colors in your palette that can “snap” to the Web-safe palette. The higher the percentage, the less color will be used in your image. If you choose 0 percent, you will use all colors in your original color palette and if you choose 100 percent, you use a maximum of 216 colors in the Web-safe palette. However, this is no longer a major concern for web designers, because modern devices can show much more colors.
If you choose PNG-24 as the preferred file format, there are only three options to configure:
Transparency: When this option is selected, the transparent pixels are enabled allowing you to adjust the transparency of the whole image. If the option is deselected all semi-transparent pixels are replaced with the matte color.
Matte: The default matte color is white; however, you can choose other color when you want semi-transparent pixels are filled in evenly.
Interlaced: You should choose this option if you have image files larger than 100kB. The image is sent to the users in multiple passes and they will see the image gets sharper as it is drawn by the browser.
JPG files have other different settings. This is an overview of JPG optimization:
Quality: It defines the amount of compression used in a JPG file. There are five presets to choose from in a dropdown menu low, medium, high, very high and maximum. To have a finer control, use a slider to select the quality percentage from 0 to 100. Higher percentage can give you better quality, at the expense of larger file size.
Blur: If you choose higher compression, jagged lines will start to appear in the image, especially if you use contrasting colors in the image. You can reduce jagged lines somewhat by applying a blur slightly. However, if you add blur too much, the resulting will be less crisp. For best result, keep the blur below 0.5.
Matte: If the image has blank or completely transparent pixels, they will be filled by the Matte color. It is preferable to choose matte color that is similar to the background color. For example if the background color is red (with a hex value of #bf3b3b) then you should make sure the matte color is also #bf3b3b.
Progressive: It is similar to the interlaced option for GIF and PNG images. When you choose it, the image will be sent in multiple passes, starting from an image with the lowest resolution until the highest. Major browsers support this feature however; users who use more obscure browsers may not be able to enjoy this feature.
ICC Profile: It describes about an image’s CMYK or RGB color settings so the colors can be displayed as intended. You should enable it if you want to preserve the ICC profile. It can you’re your browser to perform color correction better.