JPEG And You: How The Most Popular Photo Format Works
Those around in the early days of the internet are no doubt familiar with GIF. For a time, the GIF image format was the de-facto standard for web-based graphics, used on everything from photographs to dancing babies. But as popular as it was, GIF had a problem — it sort of sucked.

Limited to 256 distinct colors, GIF was a poor choice for photographers and web designers who wanted a richly colored experience. It was a great choice for logos or animations, but less suitable for authentic replications. Obviously, that was a problem that needed to be fixed, and the solution — JPEG — is a format still used today.

JPEG, like most other file formats, was created by a consortium of people, the  Joint Photographic Experts Group, in 1992. Unsatisfied with previous methods for storing digital images — uncompressed bitmaps and GIF formats, for example — the group set out to design a standard suitable for conveying photographic information on par with that of traditional film. The catch was it had to be small. 

For example, raw sensor data from a digital camera today can take up anywhere from 10-15MB or more. While this is hardly an issue with the speed and storage capacity of today's machines, imagine how impractical images that large would have been for images in the early nineties. At a time when many hard drives were still smaller in capacity than that of a CD-ROM, JPEG's goal was to bring that file size down to something far more reasonable. That meant compression.


JPEG has a sliding scale of compression that ranges from 0-100. The lower the value, the smaller your image, but quality will suffer as a result. To give you an idea of how this affects an image, consider all the pixels that compose an image. JPEG works by sampling 8x8 blocks of pixels and applying a compression algorithm to simplify the data each small block of pixels contains. As you'll above, the best compression produces no visible artifacts, but more serious compression can simplify the pixels of an image to the point where its defining details are almost unrecognizable. This is particularly obvious with the difference in detail between the two bowls of candy on the left side of the image.

Here you can see the 8x8 blocks of pixels that the JPEG algorithm samples. 
Here you can see the 8x8 blocks of pixels that the JPEG algorithm samples. 
Used with restraint, a JPEG-compressed image is often indistinguishable from the original copy. However, there are side-effects and downsides to the format's unique algorithm. Brightness data is discarded in order to preserve accurate colors, but produces a washed-out looking image. Also, while JPEG's approach to compression is suitable for wide color gradients and photos, it fails to handle sharp edges quite as well. As a result, text or hard geometric shapes are often distorted more easily, even if little compression is applied — particularly evident in our drawn cartoon example above.
 
The strange thing is, not everyone implements JPEG's quality scale in the same manner. For example, while Adobe Lightroom offers a 0-100 scale of compression, in reality, t hat only scales to 13 different levels of compression. So, for example, compressing your image at 92% produces the same image as one compressed at 100%. Things get more confusing still in Photoshop, where saving a JPEG through the conventional output dialog produces distinctly different output than the design suite's "Save for Web" function. 

 Photoshop&squot;s "Save for Web" dialog works far differently than the usual save output slider.
 Photoshop's "Save for Web" dialog works far differently than the usual save output slider.
Of course, attempts have been made to fix and improve JPEG's compression handling over the years. At the turn of the millennium, JPEG2000 was ratified, promising better compression with less artifacts, and the handy ability to scale quality and resolution depending on the display needs required. But while impressive, users were given little incentive to switch to the new format, if only because JPEG worked so well to begin with. The adoption simply wasn't there.

These days, JPEG might not necessarily be the best format for preserving and storing digital images, with a big shift to RAW occurring in the digital space. However, there's no denying that JPEG's defining features — speed, size and quality — have helped it remain relevant almost twenty years after its inception.      
 
Images via Flickr user Pete Fletch, Wikipedia. 
26 Comments
Buttonbasher online on July 28, 2010
Interesting read. Also, Adventure Time is awesome.
chickdigger802 on July 28, 2010
You can do animated jpg now? 
 
high res dancing babies =P
AndrewGaspar on July 28, 2010
That was an interesting read. It's cool to see where these technologies we take for granted come from.
ThePhantomnaut on July 29, 2010
WAT TYME IS IT?
TheLepper on July 29, 2010
Lol.  i dun get it. :) 
crusader8463 on July 29, 2010
Ya, I remember in college during our graphic design class the teacher taught us this by getting us to load and save the same image like twenty times as a different jpeg to show us what happens.
teekomeeko on July 29, 2010
Very good read, Matt. My design classes typically only accept jpeg images for content because the compression works so well, making it easy to have a ton of student works at the same time without filling up hard drives. When keeping images of those exact same projects for personal reference, I tend to stick with png, though, as I seem to get the best results with that format - admittedly by using as little compression as humanly possible since I care more about the quality of my work than the file size.
Maxtron on July 29, 2010
PNG is my format of choice, mostly for its ability to handle translucency.
AURON570 on July 29, 2010
so now that I know the general difference between gif and jpeg, what is the difference between bitmap and png? And howcome games tend to save screenshots as bitmap?
metalsnakezero on July 29, 2010
A learned a lot about image formatting and its interesting how it works.
aurahack on July 29, 2010
Rather fascinating, though I'd say that .png is probably gaining more popularity over JPEG nowadays then anything else. I know it's all I use now. 
 
Good read, though.
Kyle_C on July 29, 2010
Very interesting! I always wanted to know a little more about JPEG, but was too lazy to go looking for it :P
 
But man, do I wish people would stop using it. JPEG sucks. Time to move on, interworlds.
Aleryn on July 29, 2010
Excellent read.  Summarized it up very nicely and without a lot of unnecessary data, loads better than reading a wiki article.  Thanks guys, love these incredibly handy little articles on tech/geekdom.
 
... and yeah, like many other people, I'm not a big fan of jpeg.  Lot better formats, but the mainstream loves jpeg so we haveta' deal with it for now.
sickVisionz on July 29, 2010
Nice read.  What's the future of image compression?  JPG is still the standard for most things but that's crazy old.  It'd be like still rocking whatever the first video compression format for the web today.
michaelh on July 29, 2010
 An interesting read but I'd love an article that educates people on several different formats and what their best uses are.  For example, demonstrating PNG's superiority in quality and size for clean vector-like graphics or how bloated it becomes versus JPEG with photos.  It's a pet peeve of mine at work that nobody seems to select appropriate formats.
MordeaniisChaos on July 29, 2010
Interesting enough of an article, but the title is a bit misleading. This doesn't really explain how jpegs work. It's more the what, and history about the format. I'd think a more in depth article on the process of compression and whatnot to be much more interesting and useful.
@michaelh said:

"  An interesting read but I'd love an article that educates people on several different formats and what their best uses are.  For example, demonstrating PNG's superiority in quality and size for clean vector-like graphics or how bloated it becomes versus JPEG with photos.  It's a pet peeve of mine at work that nobody seems to select appropriate formats. "

agreed, I would love a tested article on all of the different formats that are used and when you should use them.
bagels on July 29, 2010
@MordeaniisChaos: Thanks for the comment! We'll keep all that in mind. Also, on your last point, it's definitely in the works. Something like that was originally going to be included in this article, but we went with the JPEG slant instead. A good comparison is definitely needed.
theineffablebob online on July 29, 2010
I LOVE ADVENTURE TIME!
Brackynews on July 30, 2010
Since the JPEG format predates the world wide web, it's odd to read this:

Limited to 256 distinct colors, GIF was a poor choice for photographers and web designers who wanted a richly colored experience. It was a great choice for logos or animations, but less suitable for authentic replications. Obviously, that was a problem that needed to be fixed, and the solution — JPEG — is a format still used today.


I realize ancient history is history, but implying that JPG was a solution created for web designers is a curious rewrite of history.  Pretty sure we didn't have web designers when NCSA Mosaic was first released in 1993, and v0.6b supported JPEG extensions, then v2b1 in 1995 could display JPGs inline on a page, right around when Netscape came out.  And the rest as they say, is teh internets.

flatlinebb on July 30, 2010
To the ones asking for more information about the jpg format, have you looked here? Or is Wikipedia not cool anymore?
  • Type the words above including the space. Get new words?
Errors will go here
Post Reply
Processing....
Popular News
How To Rip DVDs to Play on Any Device—For Free!

Our ultimate DVD copying guide shows you how to use Handbrake to rip discs for playback on your laptop, Xbox, PS3, iPhone, Zune, netbook, iPad, PSP, iPod, and pretty much anything else

Video: How To Build the Best $1500 Gaming PC, Step-by-Step

Do you like saving money? What about playing PC games? Have you ever considered building your own PC? We show you exactly what you need to know to build an awesome $1500 gaming PC.

How To Build an Awesome $500 Windows Home Server

We pick the best parts to build a lean media backup and streaming machine.

Apple iPad Wi-Fi Review

Apple's device isn't magical, but it is going to make the tablet a real category--for better or for worse

Nexus One vs HTC Desire vs HTC Incredible: What's the Difference?

HTC is releasing more Android phones all the time, but is there a difference?

How To Steal Mac OS's Best Features for Windows

Windows 7's Aero is a fine UI, but there are just a few things it's missing. Here's how to steal some of Mac OS's features.

How To Rip a Blu-Ray Movie with Just One Click

The MakeMKV utility decrypts and rips a Blu-Ray disc with just one click, preserving the original video quality of the source file.

How To Stream All of Your Video Files to iPhone and iPad

Get your DVD rips off your computer and play them on a mobile device, without having to convert them beforehand.

What Kind of Digital Home Upgrades Have You Done?

Ethernet, streaming music, smart power, oh my! What 21st century upgrades have you made to your home?

Why the Obama Administration's Stance on Piracy Sidesteps Complicated Issues

Addressing an audience of workers in the music industry, Commerce Secretary Gary Locke reaffirmed the Obama administration's commitment to cracking down on media piracy on the Internet.

Free Friday - Android Mini-Vinyls! We Love Them So Much!

This week we're giving away an awesome Android Mini figurine. All you need to do to enter is sign up for the site and post a comment in this thread. Yay!

How To Take and Create HDR Photos on Android

Some methods are better than others.

Living with Technology: Two Mice for One Desktop PC

What would drive a man to use two mice for one computer?

Never Give Up: Microsoft May Be Working on One More Zune

Just in time for Apple's new iPod Touch announcement, a rumor is brewing indicating that Microsoft is going to give the Zune another go.

How To Spot Scams and Malware Apps on Android

Some apps are already doing some shady things. Learn how to protect yourself.

Why the All-in-One Multifunction Inkjet Printer is Obsolete

Multifunction printers are big, slow machines that have lots of features, but do none of them well — and they aren't worth your time.

Free Friday - Android Mini-Vinyls! We Love Them So Much!

This week we're giving away an awesome Android Mini figurine. All you need to do to enter is sign up for the site and post a comment in this thread. Yay!

What Kind of Digital Home Upgrades Have You Done?

Ethernet, streaming music, smart power, oh my! What 21st century upgrades have you made to your home?

Never Give Up: Microsoft May Be Working on One More Zune

Just in time for Apple's new iPod Touch announcement, a rumor is brewing indicating that Microsoft is going to give the Zune another go.

Why the Obama Administration's Stance on Piracy Sidesteps Complicated Issues

Addressing an audience of workers in the music industry, Commerce Secretary Gary Locke reaffirmed the Obama administration's commitment to cracking down on media piracy on the Internet.

Living with Technology: Two Mice for One Desktop PC

What would drive a man to use two mice for one computer?

Why the All-in-One Multifunction Inkjet Printer is Obsolete

Multifunction printers are big, slow machines that have lots of features, but do none of them well — and they aren't worth your time.

Why You Should Buy an iPod Classic Before it Goes Away

Last week, Apple revealed it's new line of iPods. Conspicuously absent? The iPod Classic. The high-capacity player is still around, but for how long?

How To Get Great-Sounding Audio for Podcasts and Games

Getting decent audio from your headset or mic isn't hard, and we'll show you a few simple ways to do it.