|
JPG vs. GIF
JPG, GIF, and PNG are all different web image compressions.
* Renaming an image called "picture.jpg" to "picture.gif" doesn't change the image from a JPG to a GIF. JPG, GIF, and PNG are are special compressions that occur when an image is saved. You can't change the compression simply by changing the name of the file.
Why do we need to compress our images for the web?
Compression is the art of breaking down an object and putting it back together in such a way that it is smaller and lighter than before. When dealing with web graphics, you'll want to compress the image files to be as small as possible so they download quickly, yet maintain quality.
The best way to ensure a good balance between image file size and image quality is to understand how compression works. JPG, GIF, and PNG are all file formats for the web. They all use compression, but each one has different uses, methods, and results.
In general, JPG compression is most often used for photographs, or images with lots of color and/or gradients. GIF compression is most commonly used for line art and logos, images with few colors or geometric shapes, animated images, or any image that needs a transparent background. PNG is less commonly used, but is slowly gaining popularity on the web, and has the ability to display many colors (like a JPG) with a transparent background (like a GIF). Unfortunately, not all browsers support transparent PNGs.
Joint Photographic Experts Group (JPEG/JPG)
One of JPG's main advantages is that it can store 24-bit (thousands of colors) image information, as opposed to GIF images, which can only store 8-bit (256 color) image information. However, JPG compression is lossy, meaning that some image data is thrown away in order to compress the image. Once the image has been compressed, it is no longer identical to the original.
How the JPG compression works
The first step during JPG compression is that a map is created of one brightness value and two hue values for each pixel in the image. During "sub-sampling," the two hue values are averaged into one value, decreasing the image by at least one-third it's original size. This process is based on the principle that small changes in color (hue) are less likely to be perceived by the human eye than small changes in brightness.
The JPG compression scheme then divides the image into 8x8 pixel squares and uses complex mathematical processes to round off changes in brightness and hue. This rounding decreases the amount of information necessary to describe the image. The remaining information is compressed and saved.
The amount of information thrown away depends on the level of compression, but choosing a compression level can be tricky. For example, a quality setting of 85 in one application does not mean that you will be preserving 85% of the image. Some JPG conversion applications list a "low," "medium," and "high" quality option, and some list a numerical scale from 1-10 or 1-100. In most cases, the range of quality scale is arbitrary. In an image with too much compression, the 8x8 pixel squares become very apparent and visible. This "over-pixelization" is called "artifacting" or "artifacts."
Saving as a JPG
JPG compression is "lossy." If you open a JPG file, modify it in an image editor like Photoshop, and re-save it as a JPG, you just lost a generation of quality — you compressed an already compressed file! If you keep making adjustments and re-saving your file as a JPG, your image will deteriorate fast and the artifacting will become very apparent.
Never save over your original image. Always do a "Save As" when saving your newly compressed JPG image. That way, if you need to make further adjustments, you can go back to the original, rather than modify the compressed one.
It is recommended that a relative 50-75% (medium to medium-high) JPG compression setting will achieve the best results for the web. But you should test several options and see what works best for a particular image.
When you save your image as a JPG, you also usually have the option to save it as a "baseline" (standard) or "progressive" JPG. A baseline JPG will display itself on the web one row at a time, from top to bottom, as the page loads. A progressive JPG will display itself all at once (usually out-of-focus or blurry), gradually becoming sharper as the page finishes loading. Progressive JPG files tend to be smaller than their baseline counterparts, and is the preferred web standard.
JPG images are saved with a .jpg or .jpeg extension. Always use lowercase extensions.
Looking at a JPG
Figure 1. The original JPG image
|
Figure 2. An overcompressed JPG
|
The artifacts show the ";blockiness" as seen in Figure 2. Compare it to the original image in Figure 1. The blockiness appears when the compression ratio is pushed too high. In normal use, a JPG compressed image should show little to no visual difference to the original uncompressed picture.
Be aware of your compression settings as you save your images. Good images do not happen by accident!
|
|
Figure 3. Zoomed in on Figure 2. Notice the 8x8 pixel squares indicative
of JPG images. Very apparent pixelization in JPG images is called "artifacting."
|
Graphics Interchange Format (GIF)
One of GIF's main advantages is that its compression is "lossless," meaning that once the image is compressed, no data is lost. The GIF format is best for images with large areas of solid color and/or text, such as logos, line-art, and cartoons.
How the GIF compression works
The first step in GIF compression is to "index" the image's color palette. This decreases the number of colors in the image to a maximum of 256 (8-bit color). You can increase your chances of making a small GIF file by further reducing the number of colors in the palette. This increases the chances of horizontal repetition of data in the image, a key factor in GIF compression.
Often, an image that looks good with 256 colors will look just as good with 128, or possibly even fewer.
GIFs use a color compression called LZW. LZW compression works best with images that have horizontal bands of solid color. For example, if you have 8 pixels across a one-pixel row with the same color value (yellow, for instance), the LZW compression algorithm would see that as "8Y" rather than "YYYYYYYY," which in turn saves file space.
Saving as a GIF
There are several setting options when saving an image as a GIF. First, you need to determine how many colors your image will need. Don't save every image with the max of 256 colors. Many images don't need to use all 256, and your file size could end up bloated by unnecessary colors. Start at 256 and drop to 128. Did you see a difference in your image? If not, try dropping to 64 colors. If you see a change in your image, go back to the previous color number. If you still don't see any change in the appearance of the image, keep dropping colors until you do.
Another setting option is called "dithering." If you need to compress an image that has more than 256 colors into a GIF that has 256 or less, it'll look better with dithering turned on. Dithering mixes existing colors to approximate other colors that didn't make it into your color palette. For example, a red pixel next to a yellow pixel will look like orange to your eye. But beware — dithering will increase your file size, because you're reducing the amount of horizontal repitition in the image. If you don't mind a slight increase in file size, you can generally get good results using an "adaptive" palette setting with "diffusion" dithering.
One factor that could affect your GIF file size is interlacing. If you choose to interlace your GIF, if will display itself all at once, (usually out-of-focus or blurry), gradually becoming sharper as the page finishes loading (much like a progressive JPG). Unlike progressive JPGs though, interlacing your GIF will increase your file size. If you don't choose to interlace your GIF, it will display itself row by row from top to bottom.
GIFs can also be formatted to allow for transparent backgrounds. The pixels in the image are designated either as 100% solid or 100% transparent. Gradient transparencies (such as a drop shadow) will not display properly as a transparent GIF. If your transparent image appears too "rough around the edges" or the edges are too pixelated, you can add a matte to the image. The matte color should as closely as possible match the color of the web page's background color where the image will be displayed. The matte will edge your image, to make the edge transition smoother.
GIF is the only web file format that allows for animations. You will need an image editor (such as Adobe ImageReady) to string together multiple still-frame images into a sequenced and timed animation.
GIF images are saved with a .gif extension. Always use lowercase extensions.
Looking at a GIF
 |
A bitmap file is an image comprised of pixels. Each pixel is stored as a bit of information. GIFs are read horizontally, left to right, row by row.
The pixel information for the first row of this bitmap image is:
white, white, white, white, black, black,
black, black, black, black, black, white, white, white, white, white
GIF compression sees a great opportunity to compress the pixel color data:
4 white, 7 black, 5 white
Violá! Our GIF compression just condensed the first row of data from 16 to 3 bits of info!
|
Portable Network Graphics (PNG)
The most notable aspect of PNG compression is that, like GIFs, PNGs are lossless, meaning that no information is lost in the compression process. PNGs can be considered a hybrid of GIF and JPG compressions — it can have thousands or colors AND transparency. And unlike GIFs, PNGs can take advantage of transparency masks, allowing them to have gradient transparencies.
How the PNG compression works
PNG compression works similar to GIF's by taking advantage of color repetition. Whereas GIFs can only compress colors horizontally, PNGs can compress both horizontally AND vertically.
Saving as a PNG
There are two different ways to save a PNG: 8-bit and 24-bit. Saving a file as an 8-bit is much like saving the file as a GIF. You're limited to a maximum of 256 colors, you can dither, and have transparency (pixels are either 100% solid or 100% transparent). Saving a file as a 24-bit PNG gives you thousands of colors, and the option to have gradient transparencies, but the file size will be much larger than that of a GIF or JPG.
The good and the bad
PNG sounds like the superior web file format, so why aren't they as widely used as GIF and JPG? Aside from larger file sizes (which continues to matter less, as computers and internet speeds keep increasing), some browsers will not read the 24-bit PNG gradient transparencies, and will display the image with a solid color background instead. Until all browsers support PNG files accurately, they will continue to be used far less than the more univeral JPG or GIF compressed images.
PNG images are saved with a .png extension. Always use lowercase extensions.
|
