You can't put images on the web as you like, because big images take a while to download. So you have to know something about some problems related to their size. First of all, average monitors can work at a resolution of 72 dpi (dots per inch or, better, ppi: pixels per inch) while images created for print usually have a resolution of 300 dpi or much more. For this reason, when designing for the Web, images should be scanned in at 72 dpi: anything more is a waste of hard disk space only. The second thing you have to know is related to images compression. On the web, the most used graphics formats are GIFs and JPEGS: each of them use a different compression algorithm. GIFs supports up to 256 colors, while JPEGs supports millions of colors. But do you need so many colors? If you use a GIF file format, you have to know that the more colors you use the bigger the image you get. So, in order to decrease your image's size, you should remove redundant and superfluous colors. The process of rendering an image in fewer colors is usually referred to as "reducing color depth," "dropping color depth," or "palette optimization". But there are some other techniques to reduce the size of a GIF file. Let's see:Using solid areasAll GIFs use a compression algorithm which is really good when it has to handle big areas of flat color. It can reduce rows of same-colored pixels to almost nothing. It's like the difference between saying "one red pixel, another red pixel, another red pixel..." versus "two hundred red pixels in a row". Turning off Anti-aliasingConsider turning off antialiasing when painting, selecting, or filling areas of your image. Smooth, antialiased edges may look better in some cases, but they violate the "solid areas" rule, possibly causing the file to be larger than it needs to be. Using fewer colorsIn general, the fewer colors you use in an image, the smaller the GIF will be. However, this isn't always true, because an image that has only 16 colors in it but that contains a lot of noise is significantly larger than one with 256 colors arrayed in areas of solid color. You can reduce the number of colors in your image when you convert to Indexed Color or when you save an RGB image in the GIF file format, which automatically converts the file to Indexed Color. Take a look at these samples. Anyway, if you really need so many colors you should probably use a JPEG image. JPEGs images in fact, support millions of colors and you can compress them without noticeable variations. Controlling ditheringIt's true that GIF's compression is optimized for areas of flat color, but you don't violate the "solid areas" rule so much if you use any pattern of repeating pixels. For instance, a row of pixels colored "red, blue, red, blue..." and so on, compresses almost as well as one colored "red, red, red....". So you can create hybrid colors with alternating Web-safe colors, and the final hybrid will be Web safe, too. GIFs vs Compressed JPEGs
Look at the first image on the left (original GIF). Then look at the last image on the right (JPEG, compression: 30%). Can you notice any difference? In addition, because of the compression algorithm, you can get better results with bigger images. In fact the original GIF's size was about 154 Kbytes, but the corresponding JPEG's size (compression 30%) is: 21 Kbytes! You can look at them here (warning: the GIF's size is about 154 Kbytes, so it takes a while to download). In order to create compressed JPEGs, just save your image (as JPEG) with your favorite graphics software ('Save As') and choose the compression factor. |
