Adobe Photoshop for Web Design: Lesson 4b
Lesson 4a: http:/www.webwinds.com/pshop/pshop4a.htm
Lesson 4b: http:/www.webwinds.com/pshop/pshop4b.htm
Compression-Friendly gifs in Photoshop
In the two examples below, the gif and jpgs are similar in size. The gifs
compressed well, without loss of quality.
radiance2.jpg 15kb radiance2.gif 17kb
Here, the slabs of bright flat horizontal color and the limited
number of colors are conducive to the gif format. The gif file
is almost as small as the jpg. There is, however, unpleasant
dithering in the yellow sky of the gif.
FEEDBACK FROM TIM:
I agree with your assessment of the R.C. Gorman picture, but it's
probably the presence of the type that tips the scales over to GIF.
If it weren't in the image, I might squeeze the JPEG a little harder.
clowns.jpg 17kb clowns.gif 18kb
Here also the slabs of flat color and limited number of
colors are conducive to gif. Perhaps the small size helps
in this regard. There appears little difference between
the two pictures, and they are almost the same size.
FEEDBACK FROM TIM:
I'm a little surprised by the clowns. What's the JPEG setting?
I can see how the image would start to "halo" quickly around
the edges, but it's not exactly a perfect image for GIF either...the
colors aren't really flat enough for best results. This might make
a nice indexed-color PNG.
A QUESTION: My Early Spring Woods Photo
woods2.jpg 33kb woods2.gif 34kb
This one is a puzzle. I did not expect a photograph such as this to so
easily compress to a small size in gif. What strikes me is that the yellow
flowers are sharper in gif, but the dew-covered tree branches are
unpleasingly blurry. I would assume that the limited number of colors,
and repetition of colors reduced file size.
In this case, I would want to divide the picture into two halves and post
them on top of each other - the top half of the jpg and the bottom half of
the gif. Does anyone do such gif/jpg acrobatics? I'd like to know:
How does one explain the differences here between gif and jpg?
FEEDBACK FROM TIM:
Yes, the image with the trees is surprising. I guess that there are a lot
of little runs, rather than big row-spanning runs...... You could make a
composite image by <TABLE>-ing together a GIF and a JPEG, but
remember that 1) fetching two images adds connection-to-the-server
overhead, and 2) tables are a pain, and slow everything down. If you
want to try it, remember: guides and the info palette are your friends.
Thanks in advance for your feedback!!
Tracy Marks
|
Index of online Photoshop assignments: Lesson Two Creating banners in Photoshop Lesson Three JPG quality Lesson Four Gif and JPG in Photoshop Photoshop Tips and Tricks Lessons |