Tracy Marks' exercises
Adobe Photoshop for Web Design: Lesson 4a
GIF ASSIGNMENT
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):
http://www.webwinds.com/pshop/pshop4a.htm
Compression-Friendly(next page):
http://www.webwinds.com/pshop/pshop4b.htm
ASSESSMENT:
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.
Compression-Unfriendly
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.
FEEDBACK FROM TIM:
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 images...it'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.
FEEDBACK FROM TIM:
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).
AND A QUESTION:
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?
FEEDBACK FROM TIM:
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
