EXERCISE 1
You might want to skip down to the second exercise while these first three images are loading.
The first picture was saved as a .gif file, size 17,225.
The second saved as a .jpg file with no compression, size 26,581.
The last one was compressed with JPEG Cruncher. Size 2,814.
Right click on each image and choose properties, to see file information.
This is an image with 21,080 variated and subtle shades. When I chose this example, I expected to get standard results; that is, the .gif file would not be as good. However, er...all three look good! I can't believe I could compress this picture 89.4%, and it still looks this good! However, had the background been a solid color, I could not have obtained such good results. I have been going through all my web pictures and compressing. This happens to be the best results I ever got!
You can see some dithering and flatness in the gif file, and some artifacts and discoloration in the highly compressed jpeg file. For web use I would compress it slightly less, but would definitely go with the jpg.
EXERCISE 2
First image: JPG, size 3813. Bigger file size, but no better than the gifs.
Second image: GIF, 256 colors, standard web safe. Size 1335, 0% dithering.
Third image: GIF, 256 colors, optimized median cut. Size same, 1335, 0% dithering. Color similar to jpeg.
I've been doing a lot of experimenting with palettes, optimized median cut and web safe colors. After spending a couple days on line using only 256 colors, and looking at all my pages with this same display setting, I realized I had to redo all my pages to web safe colors. No more lavender or orchid jello for me, Ma! That's why I am including these optimized results here. I don't know how it looks on your computer, but on mine, the optimized colors came out truer to what I really wanted. Web safe changes all my pinks to this same, darn shade. And does not include anything near my favorite green. But hopefully it's something I can work around :) I'm so glad this course made me aware of the problem!
EXERCISE 3
This is the same image, deformed and tinted, then placed on a sculptured background. (After deforming to a circle, the image was only 65" wide, so W x H sizes are different. You can still see that the added effects definitely added to total file size.)
Each of the following 4 gif files was saved with 256 colors. Images 1 and 3 were saved with 100% dithering. Images 2 and 4 were saved with 0% dithering.
I admit I was working with an enlarged copy, and it looked a lot better (more discernable) in PSP than it does here on the web :) But this is for practice so I'll leave it this way.
The third and fourth files have a horizontal background instead of vertical. I remembered Lori said horizontal blocks compressed better when using the gif format, so I rotated the background 90%, from vertical to horizontal. Sure enough, the last two file sizes are smaller.
I still haven't explored dithering very well, but in the below results, (images 2 and 4), 0% dithering resulted in a smaller file size and deeper coloring.
Right click on each image and choose properties, to see file information.
1 | 2 | 3 | 4 |
![]() |
![]() |
![]() |
![]() |
3062 Vertical, 100% dither | 2391 Vertical, 0% dither | 2968 Horizontal, 100% dither | 2225 Horizontal, 0% dither |
EXERCISE 4
Deformed Image 1: 65x66 Gif, standard web safe, 24 colors, size 1460.
Deformed Image 2: 65x66 Gif, Optimized median cut, 23 colors, size 1873.
Used existing transparency.
Non-deformed Image 1: Resized to 65x66 Gif, standard web safe, 24 colors, size 1268.
Non-deformed Image 2: Resized to 65x66 Gif, Optimized Median Cut, 23 colors, size 1268.
Chose background green as transparency, so had to change green inside to blue.