Adobe Photoshop/GIF vs JPG

Advertisement


Question
I've used PShop for 10 years on Mac, still used 3.0 (Antisocial Security won't permit extravagances like updates), and have always been curious about the disparity of file sizes with GIF and JPG.

In a sample photo scan as a duotone, a GIF file reads 101k at the size indicator on the image, while the Info shows 104k on disk (101,706 bytes). Same thing in a JPG file reads 303k on the image, but Info shows 32k (30,521 bytes) -- 3 times smaller than GIF. Image quality and resolution for both seem to be identical.

Why such a difference? Compression?

Answer
Hi Peter,

The first thing I thought of here was to ask if you were saving images for the Web. But I'll assume you're not, since you're using Photoshop 3.0. Saving for the Web has become extremely easy in the more recent versions of Photoshop -- but it's understandable if you're still using an older version. Hey, software ain't cheap!

To answer your question, yes, compression is the issue here. But I'm going to back up here and tell you why.

There seems always to have been a question as to when to use what format. When it comes to the Web, a general rule of thumb for choosing is that any image containing a large, flat amount of color -- for example, the box behind the words AllExperts on this page -- should be saved as a GIF. The same goes for type. Type on the Web will appear much sharper when saved as a GIF.

Conversely, when saving a photograph for the Web, it's best to use the JPEG format. And when I say "photograph," I'm really using the term loosely. I should say, "image," meaning anything with a continuous tone -- could be  a photography, could be a halftone, etc.

But forgetting about the Web -- this is the same rule of thumb that would apply to all images created in Photoshop.

And yes, you're right -- the difference in the two formats lies in compression. Roughly described, GIF compression looks for lines of similar pixels and compresses them with a type of routine caled RLE.

JPEG looks for the patterns in an image, and uses what's called "lossy" compression. This means that when saving this way, a little bit of the image is lost -- and the more times a JPEG is saved as a JPEG, more image information is lost. Lossy compression tries to eliminate redundant or unneeded information -- like if you have a picture with a huge sky area, perhaps quite a bit of that sky's digital information will be eliminated when you save that picture as a JPEG.

You might have also heard of "lossless" compression -- a type of compression in which no data is lost. This is what's used when saving an image as a TIFF, by the way. TIFF is often the recommended file format when saving an image for use in a page layout program such as Quark or InDesign. And it can result in large file sizes!

So when you have the option to save a document in Photoshop, it's always best to consider its file structure, and also the document's destination.

I think you're always safe to rely on the "GIF = flat, solid areas of color -- JPEG = photographs, continuous tone imags" rule of thumb when saving images from Photoshop. Sure, it may look like the two are identical, but if you blow them both up, and look closely at the pixel formations, you'll see the differences.

I took a JPEG and made a copy of it as a GIF. Like you, I saw tremendous file size differences: My 6.5MB original JPEG went to 216k when I re-saved it as a JPEG, and my GIF file went from 2.2MB to 996k. But I can see a difference in the two pictures. You can see too, here, in a greatly-reduced version:
http://little-works.com/all_experts/file_compression.jpg

Granted, this is a small picture -- too small here for you to see at first glance the differences in the pixel composition. But if you blow up this example in Photoshop, you'll see the jagginess of the pixels in the GIF, and that the JPEG is much smoother (brighter, too). That's because even though the JPEG compression might have tinkered some with the sky (and maybe deleted some of the redundancies), the GIF compression tried to use its horizontal line algorithms when it compressed, and totally messed up the pixels.


Well, this is probably more than you ever wanted to know about GIFs and JPEGs, LOL! But long story short, the difference is in the compression, and that's why.

Here are some related articles to read, if you like:
http://www.siriusweb.com/tutorials/gifvsjpg/

http://www.wfu.edu/~matthews/misc/jpg_vs_gif/JpgVsGif.html  (mostly about Web graphics, though)

Hope this helps!

Lisa

Adobe Photoshop

All Answers


Answers by Expert:


Ask Experts

Volunteer


LizaL

Expertise

I've used Photoshop since the release of version 2. I taught college commercial art and graphic design for 10 years, and within that realm, taught Photoshop at every level, and with each successive product upgrade. My experience with Photoshop is thus extensive and well-rounded, from photo retouching to color adjustment to incorporating Photoshop and ImageReady into Web design. I am primarily a Mac user (since 1985), but am also PC-savvy.

Experience

I've been a graphic designer for 22 years, was a national magazine art director, a designer for the Department of Defense, a college art instructor, and have my own freelance Web and graphic design business, LittleWorks (www.little-works.com). I've also worked for several printing companies, in both prepress and art.

Awards and Honors
PICA award (Printing Industry of the Carolinas Award for the design of a media kit that accompanied a magazine I was art directing at the time)

©2012 About.com, a part of The New York Times Company. All rights reserved.