In general you want to use the lowest bit depth you can that creates an acceptable image. GIFs and PNGs both are palette-based, with file size related to bit depth, or the number of colors contained in the palette. Index-color formats like GIF and PNG are ideal for low- and flat-color images like logos, buttons, and graphic text.
We'll cover these details in a future tweak. Of course you want to optimize your images for the Web and create thumbnails. They are designed for full-color images and can create visually indistinguishable versions of the original. Graphic text is best saved as a GIF, or as CSS styled text instead.įor larger photographs however, JPEGs are the perfect match. This is especially apparent when saving graphic text as a JPEG (see Figure 3). They break up the image into 8x8 blocks of pixels (usually) and approximate away, which gives artifacts at lower quality settings. You can see why hard-edged and flat-area images don't work well with JPEGs. The net effect is a lossy approximation of the original image, preserving the key details most apparent to the human eye. This is what you control with JPEG quality sliders, how much these representative blocks of frequencies are downsampled. Higher frequencies representing detail and noise are downsampled or "quantized" more than lower frequencies and luminance, which our eyes are more sensitive to. JPEGs work their magic by approximating blocks of pixels with blocks of frequencies representing brightness and color. JPEGs support 24 bits per pixel in color mode (16 million colors) and 8 bits per pixel in grayscale (see Figure 3).įigure 3: St. JPEGs do not work well on hard-edged images with areas of flat color, these are better suited to GIFs or PNGs. JPEGs (JPEG is actually the compression algorithm used in JFIFs) are designed to efficiently compress realistic true-color or grayscale images, such as photographs or fine artwork. With high quality quantizers and some judicious dithering you can create a sharper, yet slightly banded version that's smaller as a GIF. You can either raise the quality at the expense of file size, or use a GIF. However, at lower-quality settings the sharp color boundaries are somewhat blurry in the middle of the JPEG balloon. Note that this small image of a balloon would normally be saved as a JPEG. For these borderline images, experiment in your favorite graphics program to see which format creates the smallest acceptable quality image (see Figures 1 and 2)įigure 2: GIF 64 colors, dither, lossy = 9,260 bytes For example a screen shot of a web page with mainly flat-color areas (see Flowing with Yann Arthus-Bertrand for some examples). Images with smooth-toned areas can sometimes be optimized to a smaller size as a high-color GIF or PNG. Images with smaller dimensions, on the order of 100 x 100 pixels or less, sometimes create smaller files as a GIF rather than a JPEG. For smooth-toned images like photographs JPEGs are usually the best choice. In general, palette-based or index-color formats like GIF or PNG are best for flat-color art like buttons, logos, or cartoons. Each has its own strength and weaknesses. GIFs, JPEGs, and PNGs are the formats used to display images on the Web. Choosing the appropriate web-based format for your images is the first step towards optimized web graphics. On average, images make up over 50 percent of the average web page, so it is important to minimize their impact on page speed (King 2003).
#What is best image format for web how to#
Learn how to choose between the GIF, PNG, and JPEG formats for different image types. Summary: Choosing the right image format is the first step in optimizing web graphics.
0 kommentar(er)
