Image formats and why do they matter

Arseni Mourzenko
Founder and lead developer
161
articles
December 17, 2014
Tags: performance 13

See also How does Ya­hoo's Smush.It work and why doesn't every­one use it?, from which this ar­ti­cle is in­spired from.

One ques­tion any web de­vel­op­er asks him­self soon­er or lat­er is which for­mat is the best for­mat for im­ages. The broad sup­port of JPEG, PNG, GIF, WebP and TIFF in browsers doesn't help ei­ther.

A clue­less coder may pick the wrong for­mat and use wrong op­tions, re­sult­ing in less-than-op­ti­mal im­age qual­i­ty and huge size. An ex­pe­ri­enced graph­i­cal de­sign­er is ex­pect­ed to know which for­mat and op­tions should be used, re­sult­ing in high qual­i­ty im­ages with low band­width foot­print.

Let's see how it works.

Ex­am­ple 1: 90% re­duc­tion

The first ex­am­ple is a pho­to. Near­ly every pho­to­graph is stored in JPEG, but an in­ex­pe­ri­enced coder may hear some­where that PNG is the best for­mat, and pre­fer us­ing PNG. This is what hap­pens:

The PNG export of the photograph

Click to see the full-size 2470×1636 ver­sion.

The size of this PNG im­age is 5 992 591 bytes—near­ly 6 MB, enough to make both the serv­er band­width and your cus­tomers un­hap­py.

The JPEG export of the photograph

Click to see the full-size 2470×1636 ver­sion.

Here is the same im­age ex­port­ed as JPEG. The JPEG com­pres­sion lev­el was thought­ful­ly ad­just­ed to avoid los­ing vi­su­al qual­i­ty: watch­ing the im­ages side by side, you nor­mal­ly can't tell which one is which.

The size of the JPEG im­age is 700 283 bytes, that is 683 KB: 11.7% com­pared to the PNG vari­ant. We in­deed achieved near­ly 90% com­pres­sion with­out af­fect­ing the qual­i­ty of the im­age.

Ex­am­ple 2: 80% re­duc­tion

Now the clue­less coder is con­vinced that JPEG im­ages are much small­er than PNG ones, so he's us­ing JPEG for every­thing. When he needs to store a logo, he choos­es JPEG.

The JPEG export of the illustration

Click to see the full-size 1300×850 ver­sion.

Since low­er com­pres­sion lev­els make JPEG ar­ti­facts no­tice­able, he should push the lev­els up to 100—low­est com­pres­sion, high­est file size. He ob­tains a 68 348 bytes file (67 KB).

A more ex­pe­ri­enced graph­i­cal de­sign­er prefers PNG. Here's the re­sult.

The PNG export of the illustration

Open im­age in new tab to see the full-size 1300×850 ver­sion.

By care­ful­ly ad­just­ing the op­tions, i.e. us­ing a 8-bit PNG with 128 col­ors, he ob­tains the same vi­su­al re­sult in a file which weights only 13 930 bytes (14 KB), that is 20.4% of the JPEG vari­ant, that is a com­pres­sion of ap­prox­i­mate­ly 80%.

Im­por­tant notes about the ex­am­ples

Al­though those ex­am­ples show a dif­fer­ence of 80% to 90%, a re­al­ly clue­less coder may do worse. I knew peo­ple who were stor­ing im­ages in BMP for­mat and were ac­tu­al­ly paid to cre­ate web­sites. There is al­ways a way to screw things up and to achieve un­nec­es­sar­i­ly huge sizes with­out any vis­i­ble gain in qual­i­ty.

Hav­ing said that, both ex­am­ples il­lus­trate ex­act­ly what can ac­tu­al­ly hap­pen when the web­site is done by in­ex­pe­ri­enced web de­sign­er or web de­vel­op­er.

The fact that many per­sons are us­ing wrong tools makes things even worse. In those ex­am­ples, I've used Pho­to­shop to ex­port the im­ages in both for­mats. I would ex­pect that dif­fer­ent ap­pli­ca­tions may per­form dif­fer­ent­ly when it comes to ren­der­ing fi­nal im­ages, re­sult­ing even­tu­al­ly in poor qual­i­ty cou­pled with ex­ces­sive file size.

How to choose for­mats and op­tions prop­er­ly?

There are a bunch of rules of thumb which can serve as a guide­line when ex­port­ing im­ages:

But all those rules of thumb ac­tu­al­ly don't mat­ter. What mat­ters is ex­per­i­men­ta­tion. Don't just as­sume you should use JPEG be­cause it's a pho­to­graph. Try oth­er for­mats. Com­pare. Play with the op­tions. Se­lect 8-bit PNG and go down to 2 col­ors, see how ugly is that and then go up to a sat­is­fac­to­ry re­sult.

This leads to an­oth­er ob­ser­va­tion: good soft­ware makes your life eas­i­er. Pho­to­shop is great be­cause it let you play with op­tions with ease, show im­ages side by side and vi­su­al­ly de­ter­mine which for­mat and op­tion is the most ap­pro­pri­ate. En­sure you use an app which ac­tu­al­ly let you ex­per­i­ment ef­fort­less­ly.