Tracy Marks' exercises
Adobe Photoshop for Web Design: Lesson 4a

Find (or create) two examples of images that compress well under GIF in Photoshop, and two examples of images that don't compress well under GIF. Explain what makes each image compression-friendly or unfriendly.

Compression-Unfriendly (this page):
Compression-Friendly(next page):

None of my examples looked much worse in gif than in jpg. However,
in each of the compression-unfriendly cases, the 8 bit gif file was
2 - 3 times the size of the medium jpg file.


          elder2.jpg   16kb                              elder2.gif   45kb

I was surprised that the gif file looked as good as it does, given
the gradations of color. In the gif however, the background is
spottier, and the brown speckles on the right are unpleasant. The
shawl in the gif is also speckled. I would imagine that the subtle
gradations of color contributed to the significantly larger gif size,
and that the limited palette in the gif contributed to speckling.

As you say, the GIF image of the portrait looks good, but doesn't
compress very well. This is probably the most clear-cut of all of
the's a natural JPEG.


            owl2.jpg   13kb                                    owl2.gif     26kb

The gif is not too compression-unfriendly, but it is double the file
size of the jpg. The background is spottier in the gif, but the 3d
letters show even worse effects. (The lettering also  deteriorates
significantly with 7 and 6 bit color reduction). There are both
slabs of flat color here and subtle gradations, so this example
is somewhat of a mixed bag. The gif does not look too bad, but
its significantly larger file size is a disadvantage.

The banner with the eagle is a bit tougher. The use of type makes me
lean towards GIF, but the noise in the blue background will not
compress very well under GIF. I think the noise looks cool, but I
would consider removing it and using a browser-safe color for the
type on the bottom (but I wouldn't fret about using the web palette
for the eagle itself or the gradated type).

I would think in the photographic image below that the jpg, which
is considerably smaller than the gif would be better quality. But the
background in the jpg is very streaked, whereas the gif background
is smooth. Is this an example of jpg artifacts, and the dithering done
by the browser?

I can see a little bit of the streaking that you discuss in the third set
of images, but only under 256 colors. In any case, it doesn't look very
noticeable at all on my monitor. Personally, the streaking isn't bad
enough to warrant an extra 25K in the file size.

           child.jpg   17kb                                        child.gif   41kb

NEXT: Go to good compression examples

Index of online Photoshop assignments:
Lesson Two   Creating banners in Photoshop
Lesson Three   JPG quality in Photoshop
Lesson Four  Gif and JPG