Menu

JPEG 101: A Crash Course Guide on JPEG

Advertisement

JPEG 101: A Crash Course Guide on JPEG

JPEG, a compression algorithm optimized for photographic images, is something we encounter on a regular basis. JPEG is not limited to a certain amount of color (unlike GIF, for example) and is popular due to its variable compression range, meaning that you’re able to more easily control the amount of compression, and consequently, the resultant image quality. In this guide, we will discuss the important things you need to know about JPEG.

Quick Overview of JPEG

Here is a list of things you should know about JPEG:

Semantics and Disambiguation: JPEG vs. JFIF/Exif

Many people refer to any image format that uses the JPEG compression algorithm as a "JPEG file." However, most image-capturing devices (such as a digital camera) and image-editing programs actually create a file in the JFIF or Exif format. For all intents and purposes, when people say "JPEG file" or when a software application says they’re saving your work in JPEG, you can just think of it as a file that uses the JPEG algorithm, whether it’s really JFIF or Exif.

Why Use JPEG?

JPEG allows you to control the degree of "lossiness" by adjusting compression parameters. This way, you can achieve very small files with just the minimum amount of quality that you really need.

The second important advantage of JPEG is that it stores full color information: 24 bits per pixel (that means 16 million colors). GIF, another image format widely used on the web, can only store 8 bits per pixel (256 colors). This capacity for storing colors is why JPEG compression is great for displaying images that have rich colors and that are photographic in quality.

JPEG Compression

Opposite to the PNG format (which uses a lossless compression algorithm), JPEG uses a lossy compression method.

Lossy compression reduces the image size by discarding information. Think of lossy compression as an excellent book summary of just the important and interesting parts of a book you’re reading. For example, you could summarize a book that’s long-winded and redundant in prose, to just a page worth of notes containing only the information that’s really important.

The problem, then, is when you want to recreate the original book from your one-page book summary; it wouldn’t be possible.

The other problem is that if you continue to summarize the book summary again, then you’ll lose more fidelity and accuracy from the original book.

With lossy compression, compressing an image again means losing more data, which means reduced image quality.

Baseline JPEG vs. Progressive JPEG

JPEG come in two flavors: baseline and progressive. Baseline JPEG is an image created using the JPEG compression algorithm that will start to display the image as the data is made available, line by line. In a web browser, you can see JPEG images that are in baseline format when you see it slowly showing up, from the top of the image, to the bottom of it.

Progressive JPEG displays an image in such a way that it shows a blurry/low-quality photo in its entirety, and then becomes clearer as the image’s data becomes more fully downloaded.

Baseline JPEG vs. Progressive JPEG

Progressive is good because the user gets an idea of what the image will be right from the start, even though it’s not as clear as the final image, which is great especially for people with slower Internet connections. The progressive JPEG format also enhances perceived web page performance because it doesn’t appear to be loading in increments, unlike baseline.

JPEG Baseline/Progressive Format in Photoshop

When you use Photoshop’s Save As feature (File > Save As) to output your work in JPEG format, you will be presented with the following Format Options:

JPEG Baseline/Progressive Format in Photoshop

When to Use JPEG

Photographic images that are rich/high in color are where JPEG compression is most suited.

Use JPEG when you want better/easier control of the lamount of compression that you want to use for your images. This helps you in in maximization for small file size versus quality.

When JPEG Should Be Avoided

The JPG algorithm isn’t good for images with sharp edges such as text, cartoon drawings, and so forth. You should choose PNG or GIF for such images.

Also, when you have files that are simple in color, such as logos, icons, favicons, and vector drawings, you will get lower file sizes and the same (or better) quality as JPEG. To learn more about JPEG vs. PNG/GIF, read the Web Designer’s Guide to PNG Image Format.

When JPEG Should Be Avoided

Saving JPEGs in Photoshop

The following shows a comparison of the same image saved in various levels of JPEG compression.

Original
Original, file size: 23.2 KBVery High, file size: 21.8KB
High, file size: 14.6 KBMedium, file size: 6.73 KB
Low, file size: 3.78 KB0 quality, file size: 2.72 KB

JPEG Compression Under the Microscope

Here are the micro-differences of a zoomed-in, 8x8px area of the image above, from original to lowest quality:

Is Transparency Using JPEG Possible?

JPEG does not currently support traditional transparency. If you need transparency, such as when you are setting an image on top of another and want to allow the background to show through it, you should use a compression algorithm that supports transparency, like PNG or GIF.

Here is a simulation of JPEG vs. PNG transparency:

simulation of JPEG vs. PNG transparency

WebP: A New Image Format That Rivals JPEG

WebP is a new image format that provides lossy compression for photographic images, just like JPEG. A while ago, Google announced the WebP (pronounced "weppy") graphics format along with its research. The research indicates that using it could cut image file sizes by 40% compared to the dominant JPEG file format. This means faster file transfers and reduced network burden.

As many web browsers don’t support it (yet), it’s currently ineffective for web use. Read more about WebP.

Practical Tips for Using JPEG

Related Content

About the Author

Catalin Rosu, a.k.a. Red, is a web designer and developer with over 5 years experience in the industry. You can find articles or tutorials on CSS tips and tricks by visiting his blog at red-team-design.com. You can connect with him on Twitter as @catalinred.

This was published on Dec 8, 2010

27 Comments

It’s always interesting to read articles in which you take a closer look at something a lot of people use every single day. Well done and well explained, Red! I’d like to see more of these types of articles.

Tim Leon Dec 08 2010

Well written and informative. I was in the printing industry for 19 years and didn’t know as much about jpegs as I do now. Thanks.

message Dec 08 2010

Also there is a trick in ms paint. When you open jpg image and simply press save, he reduces file size for about 40%. And also there is good practice to use Yahoo Smush.it service to compress images.

Great article! This is a topic that is often discussed around most design firms.

Tyler Wainright Dec 08 2010

As a photographer this is an awesome article. Well laid out and very informative. Thank you

I, for one, for all these years, have never thought to learn what I was doing when saving JPEGs in the baseline preset. And I have seen many in both baseline and progressive formats – I just never thought to look further into it! SR strikes again with an immensely helpful and informational article. Thanks Catalin.

p.s. WebP sounds promising.

Nagarjun Palavalli Dec 08 2010

Great article. I actually didn’t know the difference between Baseline and Progressive. Thanks for an amazing article.

Wow. Thanx for putting this together. I’ve just been mucking about and winging it because I didn’t “get it” before.

Leon Ouwendijk Dec 08 2010

Good article! In my opinion, every webdesigner should know this, same goes for the “Web Designer’s Guide to PNG Image Format”.

Photographic images saved as PNG-24 will not always have a bigger fil size though. Many a time I succeed in lower file sizes and better (photographic) image quality with PNG-24.

I also found that saving graphic content (such as logos) as PNG-8 gives me better qualitiy/ lower file sizes than GIF. I hardly ever use the latter anymore.

Thanks for reading it guys and I’m glad you found this article useful!

Conrad Chu Dec 08 2010

PunyPNG is similar to Smush.it by optimizing JPEGs, but it also has the additional feature where it will convert it to an optimized PNGif it thinks you’ll get more savings that way. It’s by far the easiest way to get your images down in size.

omvaishnav Dec 09 2010

Really It’s great article, Baseline and Progressive format is very useful for a web designer, I am also new for these formats…. thanks a lot for sharing this useful article.

Imran Khan Dec 09 2010

A great article!!! thanks for sharing

Really informative. Thnx for sharing. I never tried to know more about it but i have written a article related to this with my knowledge. Baseline JPEG vs. Progressive JPEG concept was really new to me.

After reading this article i understand Progressive JPEG concept is used in all the digital cameras and mobile phones.

Sankar Datti Dec 09 2010

Thanks for the detailed JPEG Guide

Lyndsay Babl Dec 09 2010

As a front-end developer we generally/somewhat/kind of try to avoid using .png files, but if you want to be extra safe and want/need to use one try PNG-8 (an option when you save for web and devices in Photoshop).

I personally just use regular .pngs as much as I want, but working within certain content management systems and clients I have been cautious. Just an FYI.

Tom Wachowiak Dec 09 2010

Hi – a pleasure to read and so informative !
Many thanks
Tom

Jim Arriesgado Dec 09 2010

Thanks for the explanation about baseline vs progressive… I have worked in a press before but didn’t know about that one. When i’m working with images on photoshop i really don’t know what those options are for :)… now i know!

Great Read! I hv heard of baseline and progressive a thousand times, never really wondered what they meant

Mariusz Dec 12 2010

Thanks for this article. Neever made a difference between Progressive and Baseline.

Now i know better. :)

Curtis Scott Dec 13 2010

Great article and highly informative. The bit about progressive and baseline was my favorite, great breakdown!

Clarissa Dec 14 2010

I was browsing through Google and found this. And let me hand you a whole round of applause! I find this site as very informative and useful. One thing though, can you shift you Facebook like button and Twitter share button to the end of the post? I prefer to ‘like’ and ‘share’ a page only if I find it to my liking. That means I will only ‘like’/’share’ it after reading. And it’s a slight nuisance to scroll back up to do it.

Andy Johnson Dec 15 2010

Awesome article.

Baseline and progressive look pretty interesting! I never knew they had names for the way it downloaded / was rendered!

Christian Vuong Dec 16 2010

Thanks for this post! I thought I knew about JPEG but this post obviously proved me wrong.

Ramesh Vishwakarma Feb 08 2011

Nice post some I have not idea about jpeg too much. But this article give me a good knowledge.

Hi,
Thanks for post… Now I can say that I know about JPEG much better… And its increase my knowledge… keep it up.

Jeff Williams Jun 13 2013

This article is clearly written, concise while remaining complete. The included editing tips are useful without being overbearing. You’ve made this one of the few available articles that explains the differences between the three Photoshop jpg choices. Thanks for making the information so easily comprehensible in a one-page article.

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners