Tested News

JPEG And You: How The Most Popular Photo Format Works

Why Jpeg is still the go-to format for photographers and the internet at large.

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. 
Buttonbasheron July 28, 2010 at 9:14 p.m.
Interesting read. Also, Adventure Time is awesome.
chickdigger802on July 28, 2010 at 9:29 p.m.
You can do animated jpg now? 
 
high res dancing babies =P
AndrewGasparon July 28, 2010 at 9:42 p.m.
That was an interesting read. It's cool to see where these technologies we take for granted come from.
ThePhantomnauton July 29, 2010 at 2:54 a.m.
WAT TYME IS IT?
TheLepperon July 29, 2010 at 6:01 a.m.
Lol.  i dun get it. :) 
crusader8463on July 29, 2010 at 6:32 a.m.
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.
teekomeekoon July 29, 2010 at 6:44 a.m.
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.
Maxtronon July 29, 2010 at 8:07 a.m.
PNG is my format of choice, mostly for its ability to handle translucency.
AURON570on July 29, 2010 at 8:19 a.m.
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?
metalsnakezeroon July 29, 2010 at 9:05 a.m.
A learned a lot about image formatting and its interesting how it works.
aurahackon July 29, 2010 at 9:39 a.m.
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_Con July 29, 2010 at 9:49 a.m.
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.
Alerynon July 29, 2010 at 12:58 p.m.
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.
sickVisionzon July 29, 2010 at 1:38 p.m.
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.
michaelhon July 29, 2010 at 1:41 p.m.
 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.
MordeaniisChaoson July 29, 2010 at 2:18 p.m.
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 staff on July 29, 2010 at 4:17 p.m.
@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.
TheIneffableBobon July 29, 2010 at 8:32 p.m.
I LOVE ADVENTURE TIME!
Brackynewson July 30, 2010 at 10:06 p.m.
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.

flatlinebbon July 30, 2010 at 10:25 p.m.
To the ones asking for more information about the jpg format, have you looked here? Or is Wikipedia not cool anymore?
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

Tested: Apple Mac OS X Lion

The $30 upgrade from Snow Leopard seems like a no-brainer, but that's not the full story. Read the official Tested review.

Apple iPad 2 Review

Our definitive review of the iPad 2.

Tested: Nvidia GeForce GTX 580 Video Card

The green machine comes back swinging.

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

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.

The Best Android Phone for Your Network (February 2011)

Don't get locked in with the wrong phone.

Living with Technology: Building My Annual Production PC

Is in January yet? Then it’s time for a new production system. Here's what Loyd put in his daily work and gaming rig.

Report: 2GHz Samsung Tablet with 2560x1600 Display at MWC This Month

In one month, the first ARM Cortex-A15 device could be unveiled. Sounds like Samsung will be going all out.

The Best Android Smartphone for Your Network (January 2012)

Can you wait for the next big thing, or is it time to settle?

How Android OEMs Miss the Mark with TV Commercials

A one minute Super Bowl commercial is wasted if the ad doesn't win any converts.

Will These Be the Major Technology Trends of 2012?

A design firm predicts the course of technology for 2012. These are big-picture ideas, not products: you won't find smart fridges or smartphones on the list.

AMD Radeon 7950 Benchmarks Measure Up to GTX 580 Performance

The second-tier 7000 series card offers cooler, quieter performance than the GTX 580 of 2011, but performance between the two is competitive, depending on the game.

How Security Cameras Can Provide Anonymous Shopper Statistics

A video processing company takes security camera footage and turns it into useful data for retailers.

Intel Updates Sandy Bridge Family with 7 New Desktop CPUs

Sandy Bridge gets seven new processors, including a trio of i5 CPUs without built-in HD graphics.

Living with Technology: Building My Annual Production PC

Is in January yet? Then it’s time for a new production system. Here's what Loyd put in his daily work and gaming rig.

Kinect for Windows Launches, Here's How it Differs from Xbox

Kinect for Windows leaves beta, gets an official retail release and a new and improved SDK.

Windows Phone 8 "Apollo" Features Revealed in Insider Video

Pocketnew spills some juicy secrets on the Apollo Windows Phone 7 update, due out late this year. Windows Phone 7 becomes Windows Phone 8.

How Many In-Store Shoppers Actually Check Prices Using Their Phones?

A new study looks at how the ability to compare in-store and online prices affects purchasing decisions.

Neil Young Worked with Steve Jobs on 24-Bit Audio Standard

A famous CEO and a famous musician talked about music, compression and a potential 24-bit iPod.

Report: 2GHz Samsung Tablet with 2560x1600 Display at MWC This Month

In one month, the first ARM Cortex-A15 device could be unveiled. Sounds like Samsung will be going all out.

Here's What's New in Mozilla's Just-Released Firefox 10

Firefox 10 has moved out of beta and into full release. Here's what's different that you should care about.

Microsoft Tweaks Windows 8 File Management Due to User Feedback

In the first of a series of posts based on customer feedback, Microsoft lists some tweaks made to Explorer, the Ribbon, and copying files.