JPEG 101: A Crash Course Guide on JPEG


by Catalin Rosu

http://sixrevisions.com/graphics-design/jpeg-101-a-crash-course-guide-on-jpeg/

 

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:

  • JPEG is a lossy compression algorithm; this means that it discards some data from an image to reduce its file size
  • JPEG is often pronounced as “jay peg”
  • JPEG is an acronym for Joint Photographic Experts Group, the organization that developed the JPEG format
  • .jpg and .jpeg are the most common file extensions of images compressed using JPEG compression algorithm; they are the same, but old DOS systems have a 3-character limit on file extensions — modern operating systems recognize both .jpg and .jpeg
  • Other file formats that use the JPEG compression algorithm are .jpe, .jfif and .jif

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

  • Baseline: the image will be displayed line by line on the screen
  • Baseline Optimized: Same as Baseline, but optimized further using Huffman coding
  • Progressive: You can specify 3-5 scans, meaning that it will have between 3-5 phases before it shows the final image

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 KB Very High, file size: 21.8KB
High, file size: 14.6 KB Medium, file size: 6.73 KB
Low, file size: 3.78 KB 0 quality, file size: 2.72 KB

JPEG Compression Under the Microscope

Here are the micro-differences of a zoomed-in, 8×8px 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

  • Use Smush.it as a further optimizing tool for your JPEGs; it’s a lossless optimizer, so quality is retained
  • To achieve lossless editing of JPEG files (such as cropping or rotating), you can use Jpegtran
  • If you’re looking for a good alternative to the JPEG format, then PNG-24 is a good alternative; it will have a bigger file size for photographic images, but it uses a lossless compression
  • If a JPEG image is opened, edited, and saved again, it results in additional image degradation, so when you’re editing an image in multiple sessions, save the intermediate image in an uncompressed/raw format such as TIFF or the editing software’s native format (e.g. .psd for Adobe Photoshop or .psp for PaintShop Pro)

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.

About these ads

Etiquetado:, , , , , , ,

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

MarketingActivo

el mundo del marketing se activa para ti

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

contact: ralucastoica23@gmail.com

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Tecnología - Internet - Redes Sociales - Entrepreneurship - Música - Economía - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Diario de sueños, cuentos, poesías y una novela en proceso

TechCrunch

Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

Silvia Altamirano

An editorial designer that writes

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

Matt on Not-WordPress

Stuff and things.

BLOGTEC

Noticias de Tecnologia.

Talento en Expansión

Tendencias y Mejores Prácticas en la Gestión de Personas de la Empresa 2.0

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la Clase.com

Portafolio de experiencias en la clase de español para Middle School.

littlegreybox

Travel & Lifestyle Blog

déborah rueda

Un sitio más pero diferente sobre marketing on line

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web y negocios

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación

CNN en Español: Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“Un fotógrafo tiene que ser auténtico y en sus fotografías, debe expresar emociones, provocar reacciones y despertar pasiones..” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

Infographic List

For those who love Infographics - www.infographiclist.com

URieLaRtE

hay que ser libre para ser uno mismo

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 1.682 seguidores

%d personas les gusta esto: