by Matt Bird

Created on: December 29, 2010   Last Updated: May 08, 2012

.gifs and .jpegs are legion online. They're everywhere. They are, indeed, on this very page: the Helium logo, for a starter, is a .gif. They are the building blocks that make up the Internet, the visual representations that make websites look nice. .gifs and .jpegs are pictures, and they're as common online as air is in the real world.

But what's the difference between the two? Most Internet users would be hard pressed to give you a straight answer on that. They might know one or two things about each, but not the whole picture, pardon the pun. What separates a .gif from a .jpeg, and when should each be used online?

• .gifs

gifs are small graphical files, typically smaller than .jpegs, that serve as conduits for simpler graphics online. They support only 256 colors, and consequently are much smaller than .jpegs on average. They will load faster, and are perfect for titles, banners and the like, again with reference to the Helium logo. They can also be given a background transparency that's great for overlapping .gifs with other graphics, something not present in always-boxy .jpegs.

.gifs can also be animated by users, allowing for the creation of simple to complex action sequences that can range from a cartoon character doing a dance to a simple letter scrawl. These sequences are smaller in size than with a Flash .swf file, and thus are highly desirable on traffic-heavy servers for saving on bandwidth. They can also be used for live action animated shots, though the color quality is typically inferior...

• .jpegs

... because photos of the real world are the realm of .jpegs. Supporting millions of colors, .jpegs are the larger files of the two in most cases, and are used to maintain photo-realistic conditions in an image. .jpegs can be used on graphics if necessary to preserve color quality, as well, since .gifs don't always do the job. .jpegs cannot currently be animated, however, so despite their higher quality .jpegs won't be displacing .gifs any time soon as the superior choice.

It's also important to note that .jpegs will throw out information when being compressed, a trait not shared with .gifs. Consequently small elements of the photo may disappear forever during compression, usually in the form of pixels that will render the picture forever blurry. Always save a high-resolution copy of a .jpeg when doing compression work.

• The Solution?

When do you use each one? The distinction is fairly reasonable: use .gifs when dealing with graphics and .jpegs for photos. Both can be reduced to small sizes suitable for online use with relative ease, and it's an excellent idea to work them together in tandem when putting together a website or even just posting elements online. 

Learn more about this author, Matt Bird.
Click here to send this author comments or questions.