Images on this site were compressed using e-Vue MPEG4 technology in 2001, which was groundbreaking at the time for its DRM component and higher compression than JPG, however e-Vue is no more — we are transitioning these images to JPEG for 2004.
Color Sampling Let's look at the differences between GIF and JPEG files. For this little experiment we'll use Adobe ImageReady, but most other Web imaging products have similar options, although perhaps named differently.
Starting with a royalty-free image reduced to 300x391 pixels, and an uncompressed file size of 350KB, we will start with GIF compression. In the GIF image format, at 256-colors (equivalent to what you see on an 8-bit color monitor), using perceptual/adaptive color instead of Web-safe, the file size would be about 85KB. Which is too big. Ideally, an entire Web page with HTML and multiple images should be under 100KB. We use perceptual/adaptive color because in this instance we will get more "skin tones" by not choosing Web-safe. By reducing the image to 64 colors, the image drops to 51KB but starts to show some banding in the skin tones. Dropping this to 32 shades, we get 42KB and a barely acceptable image with noticeable banding on the forhead of the model.
Example JPEG
compression settings in Adobe ImageReady 3.0
This is where JPEG comes to the rescue. Using the default "medium" setting in almost any Web optimization application, you will immediately have an image, which, when compressed, equals about 15KB in output size. In ImageReady, this would be a setting of "30" out of 100 and no blur.
Now, here's where the finesse comes in. By carefully viewing your image at 200–400 percent on your screen, adjust the quality setting down to between 18 to 22, and increase the "blur" from 0 to 0.25. For our example, I've adjusted the setting to 22/100 and the blur to 0.1, and the file size is now 12KB with no significant discernible difference from the "medium" default.
While 3KB may not seem like a large amount, consider a Web page that has say twenty elements. If you save as little as 1KB by doing "finesse" optimization, that could equal 20KB of savings per page. It's like getting two or more images for free.
Depending on the content you're compressing, you can decrease the quality a little more and increase the blur (which will minimize artifacts in high-compression areas of the image). For one client, I was able to create a background image that was 1200x851 pixels, and was only 22KB in size, including a huge swoop, color logo with bevels, and color streaks. This is most useful for images without complex tonal changes. Always choose "optimize" and "progressive" since these help the image to load more quickly.<
Gif Finesse
One of the finesse tricks with GIF files is to choose the Web-safe palette, with dithering off (never use dithering unless you are compressing a photo, or an illustration with gradients, or creating an animation with dissolves), and the "auto" setting in ImageReady, then reduce the number of colors a few more from what the software "suggests." So, if the software says "24," you drop it to "18" while watching your image for what gets taken away. In many cases, you can lose a few shades and it won't be noticeable.
A common problem is "ghosting" on a page where you place a logo with a color backing, and, when viewed on the Web, it looks like there's a big box around the image that's one shade off of your HTML color background. This is due to the fact that colors you specify on an HTML page are single-bit colors, meaning there is only one absolute color number (such as #0066cc).
Example
of eliminating ghost pixel on GIF.
However, in Web images, you could have a two-bit color that has the same color as your HTML background, but one other color (such as #0066de) and this causes the overall shade to be different. This is common when you have a logo that you've dithered to make it look good on the Web, and ended up with dithering in your background color area in the image.
