TurnKey Linux Virtual Appliance Library

PNG vs JPG: 6 simple lessons you can learn from our mistakes

Page load times are important. Amazon insiders estimate that every 100 ms increase in latency costs Amazon roughly %1 of profit.

Simply put: visitors hate slow sites, so don't make them wait.

Unfortunately, many web sites, including this one up until recently, are slowed down by inefficiently encoded images. Note that there are many other components to page load times and if you're looking to optimize your web site you should analyze and understand all of them. But today we're just going to focus on the images.

Our mistake was very simple: we used PNG for everything. Of course, we realized other encoding formats such as JPG existed, we just didn't have a good awareness of when you should use one and not the other. Bzzzzt.

  1. PNG is a lossless compression format: that means it compresses images without losing any quality. But it's not economical to encode most images in a lossless format such as PNG, when the loss of quality using JPG is barely perceptible to the human eye and a JPG might only take up a quarter of the space.

    For example previously the front page weighed 701KB and was visibly slow to load. A large component of that weight were the PNG appliance icons. Batch converting the icons to JPG shaved 400KB off, a 60% reduction!

  2. Gotcha! JPG doesn't support transparency (but don't waste your time trying to optimize PNGs): since we initially depended on icon transparency in the web design we resisted making the change and tried optimizing the PNGs first. We tried every tool we could find. Lossless optimizers such as pngcrush and optipng only yielded a 3-4% decrease in filesize. Lossy compressors such as pngnq slashed the file size dramatically by reducing the color depth but the decrease in image quality was often unacceptable. Some icons (e.g., Drupal) looked OK, but others looked terrible.

    A few examples. In the first row are originals, second row reduced to 256 colors, third row 128, fourth row 64:




    Bottom line: PNG optimization is a poor substitute for JPG. We concluded that it was better to modify the web design and compromise on that than accept a 3X increase in load time for the front page.

  3. Don't compromise on resolution, compromise on compression: after we finished with the front page we turned our attention to the screenshots section. To compensate for the size of PNG encoded screenshots we had previously reduced the resolution of the image but that's a bad move because it results in dramatic reduction in readability of the screenshot.

    For the same size we discovered you could encode a much higher resolution JPG image at high quality such that the user would barely notice any compression artifacts. Overall this would provide a much nicer, more usable screenshot without increasing bandwidth requirements.

    Long story short, resolution is very important to the perception of quality and it's one of the last things you want to give up when you are reducing bandwidth requirements.

  4. Keep PNG "masters" for future image manipulation: I can't stress this enough. JPG is a lossy format, and every time you re-encode a JPG the quality deteriorates. After a few passes compression artifacts pile up and can become easily visible to the human eye.

    For this reason it's best to always keep around masters of your images in PNG format in case you want to perform edits.

  5. When PNG is better than JPG and vice versa: sometimes you just don't want to compress an image with JPG. As I mentioned earlier, if you really need transparency JPG is out. But also we've discovered small and simple images may actually compress better using PNG than JPG. It seems to depend on how much is "going on" in the image. PNG works best for vector type graphics with hard lines. JPG works best for anything with complex gradients (e.g., a photo).

  6. Use imagemagick to batch convert PNG to JPG: manually re-encoding PNG images into JPG is boring, especially if you're converting a large number of images.

    ImageMagick is the swiss-army knife of command line image manipulation tools. Using it saved us a ton of time:

    apt-get install imagemagick
    convert -flatten -background white file.png file.jpg
    

    Convert an entire directory:

    
    for f in *.png; do
        n=$(echo $f|sed 's/.png/.jpg/');
        convert -flatten -background white $f $n
    done
    

Was this post helpful to you? Share your experience, post a comment!

You can get future posts delivered by email or good old-fashioned RSS.
TurnKey also has a presence on Google+, Twitter and Facebook.

Comments

Another gotcha with PNG

Great article, well explained.

One thing I would point out is that some older browsers like IE6 don't support PNG properly. 

Recent stats suggest that 20% of surfers are still using IE6 (http://en.wikipedia.org/wiki/Usage_share_of_web_browsers). I imagine that most are inside corporate LANs and don't have a choice (I'm using it at work now).

If your page design depends on PNG transparency, IE6 will murder it with grey boxes all over the transparent sections.

Liraz Siri's picture

IE6 must die

IE6 is an extremely poor excuse for a web browser and it's been holding up web development for far too long. As far as I'm concerned anyone still using it deserves the broken web experience they're going to get. I only pity those poor souls who don't have a choice due to crazy IT mandates.

Luckily only 14% of OUR visitors use IE at all, and of those only 7% use IE6. In other words on this web site only 1% of our users are using IE6 and that's a good thing because IE6 doesn't render this site properly at all...

Cause or effect?

Cause or effect?

Liraz Siri's picture

Technically savvy audience

On this web site, Firefox is the most popular browser by far (%54), followed by Chrome and only then IE.

I think that's because we're targeting an unusually technically savvy audience (e.g., sysadmins, web developers, open source enthusiasts). For an audience like that I'm not surprised we only have 1% IE6 users.

..."due to crazy IT

..."due to crazy IT mandates".

In most cases, the "crazy IT mandates" aren't as crazy as you think.  It costs hundreds of thousands (in some cases millions) of dollars to write applications that are targeted at IE6.  There is also a cost to upgrading to newer browsers which these applications must be retargeted for.

I agree that IE6 needs to die, however rarely do people provide an real solutions for this ongoing issue. 

I wrote a blog post this morning regarding potential solutions to this problem:

http://www.endswithsaurus.com/2010/04/why-isnt-browser-rendering-engine.html

Cheers

Codehead's picture

Legacy Apps

I took a call from a vendor this morning who was looking to roll out a web based app on our network. He was asking about our baseline browser and was horrified that we are looking at moving up to IE8.

His app apparently 'Works on IE6, probably works on IE7, but hasn't been tested on IE8."

As long as people get away with selling products that rely on IE6, it isn't going to go away.


"It costs hundreds of

"It costs hundreds of thousands (in some cases millions) of dollars to write applications that are targeted at IE6."

You're just replacing one crazy IT mandate with an even more crazy IT mandate. Spending millions of dollars writing unportable applications for browser that was obsolete before it was even introduced is crazy indeed.

Less than ten percent

It's actually less than 10% of people who are using IE6 - http://www.w3schools.com/browsers/browsers_stats.asp

Unless you're designing for an intranet where people are held hostage on IE 6, it's not an issue at all - use .png wher appropriate.

unfortunately you're wrong.

unfortunately you're wrong. check the link again, it only shows statistics for w3cshools.com.

DD_belatedPNG

DD_belatedPNG will (usually) solve all of your IE6 transaprency headaches with a little javascript:  http://www.dillerdesign.com/experiment/DD_belatedPNG/

It may slow down the page a little in IE6 (make sure you use conditional statements to prevent loading in other browsers), but it's much better than horrible grey blocks.

 

Good information overall in this article; however the easiest way to choose whether to use PNG/JPG or even GIF is:

Is the image a photograph?  Yes = JPG

Must it use transparency?  Yes = PNG

Does the image contain predominately blocks of colour?   Yes = PNG or GIF,  No = JPG

Is the PNG/GIF image very small (less than 10px x 10px)?  Yes = GIF,  No = PNG

Does the PNG/GIF image use >256 colours?  Yes = PNG,  No = 8-bit PNG/GIF

 

Even though GIF is an old format, it still seems to produce smaller filesizes when images are very very small.  Also, it's a lossless format too so if your image contains less than 256 colours, then you won't lose any image details.

On a side note; it is a very good idea to store originals in a lossless format such as PNG.  However, when storing photo originals, you'll achieve a better lossless compression using the TIFF file format, rather than PNG.  This is because TIFFs are specialised for storage of photos without losing data, whereas PNG files are specialised for storing block colour graphics.

IE6 Supports PNG8

A slight correction.  IE6 supports full transparency for PNG-8.  What it does not support is alpha-transparency in PNG-24.

http://css-tricks.com/misconceptions-about-png/

thanks for the correction

Thanks for the correction.  I never knew that and I started making web pages in 1995.

ImageMagick is a bit cleverer than you're giving it credit ...

To convert an entire directory of .png files, you don't need to sed filenames or loop around the files at all.  ImageMagick does it for you without touching your original files:

mogrify -format jpg *.png

Liraz Siri's picture

Neat!

Thanks for the feedback, I didn't realize ImageMagick had built-in support for that. OTOH, for one-off jobs I often find it easier to just re-use what I know (inelegantly) than spend more time going through a manual...

Converters

An excellent,powerful and free rename/resize/resample/refomat non-command line batch converter can be found in IrfanView.

Yes, IrfanView can be used

Yes, IrfanView can be used from the command line: http://bit.ly/hkcMfr

Albeit also looping, the

Albeit also looping, the original idea can be easily turned into a bash one-liner:

for f in *.png; do convert $f ${f%png}jpg; done

It's not imagemagick, it's the shell

I believe it's actually the shell that does the expansion from *.jpg to the list of jpeg files so imagemagick sees a list like file1.jpg file2.jpg etc.

Because of this fact this approach also works with other commands besides imagemagick.

Rule of thumb

For many years a I have an online shop.
My experience with images are as follows:

For UI elements that need transparent backgrounds (because it needs to be shown on different colors/gradients or moving backgrounds) choose png.
Also choose png when you need to show UI elements that them selfs use gradients or colorful stuff.

For simple UI elements that are shown always on the same static background color use gif.

For even simpler UI elements like simple square buttons use CSS. (soon when the round corners and such come in CSS 3 you can even make more complex UI elements in CSS)

For photo's always use jpg as it's compression is optimized to show random content very well without showing much degradation, most photo's have pretty much random content and can be compressed far before showing that degradation.

So yes, every of the 3 formats has it's use on websites.

png or jpeg

rule of thumb:

jpg for photos and images with lots of gradients. jpeg loves gradients!

png for graphs, charts, plans, whatever - images with lines, hard edges, areas with a single colour.

NEWS FLASH: Re-invention Results In Fantastic Octagonal Wheel!

We were doing this sort of thing back in the 90s before all you damned kids leapt out of AOL.  Y'know, back when 33.6bps was blazingly fast.  Is there any particular reason you're not looking at GIF for your pixel-ey line art?  Why not investigate the term "web palette" and learn how 8-bit color and dithering can make files quite small -- we measured in bytes back then, not kilobytes.  Why not dimensionalize your IMG tags?  If you do, the browswer knows how much space to reserve for an image still-to-come, and it doesn't have to rejigger all the page elements as they arrive.  Ever considered interlaced images, which become progressively sharper as they load?  Or LOWSRC?  You know it's possible to do image maps without ridiculous amounts of javascript, too.

I wasn't even an actual web designer back then, and I know about this stuff.  Y'all can your JavaScript and your CSS and your AJAX and Flash and shove 'em.  This may shock you, but very smart people were doing this sort of thing long before you came around.  Why not crack open a book and learn from them? 

Shove CSS?

This whole article is definitely old news, but sometimes people need to be reminded of these things.  People for a long time have used the concept that internet connections are getting faster, so therefore you don't need to optimize your images and code.  Fact is, with mobile internet we're now back to having to optimize for slower internet connections.

If you turn a blind eye to CSS you're an idiot.  There are so many things that can be optimized to keep your code lean in CSS.  If you're not using it in 2010 as a web designer or developer then you probably shouldn't be a designer or developer for the web.

Codehead's picture

GIF is bad (Urban Myth)

I think many people avoid GIF due to the bunfight that kicked off between Compuserve and Unisys. A general misunderstanding of the licencing with regard to websites drove the development of PNG and the misconception still exists today (the patents exired in 2004 IIRC).

Like you I do remember the dial-up days, I also remember how many pointless animated GIFs where around back then sucking up valuable bandwidth, so perhaps things haven't changed so much after all.

Anyway, I applaud Liraz for his efforts in optimising the site and sharing his findings, even if he isn't pleasing everyone.

Lastly, dithering is a valid point,  think those colour gradients wouldn't be quite as badly stepped in limited palettes if the images had some dithering applied.


Wow...

My great-grandfather rode a horse to school. It never needed gasoline, it's pollution was completely biodegradable, it was pretty to look at, and you could even make friends with it to some degree.

...and yet, I drive a car to work. I don't ride a horse.

Condescension is cheap, online. I use the techniques every day that you wrote about, but I certainly don't limit myself to them. I started writing websites in '93 for Mosaic. I, for one, am heartily grateful I'm not stuck writing the interfaces I'm called upon to write using 90's tech.

javascript/Ajax, CSS, techniques and technologies invented by the very people you're holding up as examples...you might crack open a website and learn from them.

Liraz Siri's picture

Get off my lawn!

Ah yes. The 90s. Who can forget the Internet back in 1994 when the World Wide Web with its newfangled hypertextual links was still competing with Gopher. The excitement of being the first in my gang of ex-BBS budies to figure out how to setup SLIRP on the local university SUNOS to interface with my Windows 3.11 PC and get Mosaic running. Trying to explain the web to dial-up buddies as sort of an International BBS with nice fonts and pictures. Realizing this was going to change everything. Ransacking RFC archives for l33t knowledge on IP protocols and learning how to multiplex sockets.

Those were the days. Rough and tumbling on the Wild Wild Web. AND WE LIKED IT!

Best optimization for speed

With that background, you should know that the question of "when to use PNG" is pointless, as all graphics should be converted to ANSI art.  Beat that for speedy page downloads!  And I'm sure nobody will notice...  (Speaking of BBS/Web comparisons, I recently wrote up a Facebook/BBS comparison as a much-belated continuation of a conversation from the mid-90s; you might find it interesting.)

Liraz Siri's picture

Facebook vs BBSes - insightful comparison

I enjoyed your Facebook vs BBS comparison. Insightful. Everything old is new again. Perhaps that shouldn't surprise us. Technology marches forward but human nature stays the same.

Funny you should mention ASCII art. I used to dabble in that myself as a kid. Here's an example from 1996:

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::""`````""::::::""`````""::"```":::'"```'.g$$S$' `````````"":::::::::
:::::'.g#S$$"$$S#n. .g#S$$"$$S#n. $$$S#s s#S$$$ $$$$S". $$$$$$"$$S#n.`::::::
::::: $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$ .g#S$$$ $$$$$$ $$$$$$ ::::::
::::: $$$$$$ gggggg $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$$ $$$$$$ $$$$$$ ::::::
::::: $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$$ $$$$$$ $$$$$$ ::::::
::::: $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$$ $$$$$$ $$$$$$ ::::::
::::: $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$ $$$$$$$ $$$$$$ $$$$$$ ::::::
::::::`S$$$$s$$$$S' `S$$$$s$$$$S' `S$$$$s$$$$S' $$$$$$$ $$$$$$ $$$$$$ ::::::
:::::::...........:::...........:::...........::.......:......:.......::::::
:::::::::::::::::::::::::::::::::::::::::::::::;::::::::::::::::::::::::::::
Trusty old Google. Never fails me. For bonus points, see if you can find where this was from.

On a floppy disk.... I am root!

/* Mount Exploit for Linux, Jul 30 1996

< ascii art here >

Discovered and Coded by Bloodmask & Vio
Covin Security 1996
*/
Liraz Siri's picture

My past has finally caught up with me...

That was the first security vulnerability I discovered and wrote an exploit for. Brings back memories. Apparently for some reason as a 15 year old my hobbies included writing shellcodes in assembler. I think that and the ASCII art explains why I was so popular with the ladies. Good times. Well at least nobody here has exposed which of those nicks I used to go by as a kid. Since it's 50/50 a guess doesn't count. You have to find proof. :)

Just my observation

You Sir, are an angry man. Learn some manners before your next post.

Shove CSS?

Please.

The Internet would completely suck without it.

JPG is great for photos

A general rule is that if you are dealing with photos - then JPG is the best format. Trying to save them as GIF or PNG will create very large files.

Flash em

I usually import png into flash, this way you get jpg compression with alpha channel saves lot's of kb's

Hope this helps someone...

DD_belatedPNG

DD_belatedPNG will (usually) solve all of your IE6 transaprency headaches with a little javascript:  http://www.dillerdesign.com/experiment/DD_belatedPNG/

It may slow down the page a little in IE6 (make sure you use conditional statements to prevent loading in other browsers), but it's much better than horrible grey blocks.

 

Good information overall in this article; however the easiest way to choose whether to use PNG/JPG or even GIF is:

Is the image a photograph?  Yes = JPG

Must it use transparency?  Yes = PNG

Does the image contain predominately blocks of colour?   Yes = PNG or GIF,  No = JPG

Is the PNG/GIF image very small (less than 10px x 10px)?  Yes = GIF,  No = PNG

Does the PNG/GIF image use >256 colours?  Yes = PNG,  No = 8-bit PNG/GIF

 

Even though GIF is an old format, it still seems to produce smaller filesizes when images are very very small.  Also, it's a lossless format too so if your image contains less than 256 colours, then you won't lose any image details.

On a side note; it is a very good idea to store originals in a lossless format such as PNG.  However, when storing photo originals, you'll achieve a better lossless compression using the TIFF file format, rather than PNG.  This is because TIFFs are specialised for storage of photos without losing data, whereas PNG files are specialised for storing block colour graphics.

dispelling png problems

PNG is a lossless compression format: that means it compresses images without loosing any quality.

It doesn't lose any quality either.

Someone else already mentioned GIFs as a compromise.

Though my first question would be what are you doing that requires that amount of graphical busy work? At some point you should just put up one big flash app.

There are few sites where I go to be entertained. Few bother even using typefaces or font attributes to direct attention, but will spend hours creating a huge landscape which even if it loaded in a half-second, I'd have to spend minutes scrolling around on my netbook.

Web design ought to be more like architecture where the first thing is functionality, but it must work with and in an aesthetic.

Amazon is a good example - everything is there but manages to fit well whatever browser.

Liraz Siri's picture

Thanks for catching that typo

As a non-native English speaker these mistakes have a way of slipping through...

FWIW I tend to agree with your perspective on web design. OTOH, I'm just an amateur - TurnKey is the only web site I've ever put much thought into. In general I'm more of a back-end guy...

BTW, if anyone's interested in the work that went into making the TurnKey web site, take a look at my showcase write-up on drupal.org.

Jeremy's picture

As a native English speaker they still slip through :)

But seriously that is one of the complaints I have of the TKL forums - the Firefox spellcheck doesn't work inside the WYSIWYG post/reply box. Apparently its pretty easy to set up the spellcheck in CKEditor, perhaps worthy of consideration?

Small simple icons are

Small simple icons are generally done with png's, especially if they are of one main color - in my experience even a highly compressed jpg would barely compress to a smaller size than a png of the same icon.

Also for those saying that gif's are a great replacement for png's with transparency - like others have said, you have a 256 color limit, but also, only one choice on the alpha.... on or off. There is no fading transparency that you can create with png's. With gif you have to go from fully transparent to fully opaque, which can lead to some ugly results.

Very helpful

Had an debate with a web developer about png vs jpg when he said he only ever used jpgs. Forwarded to him. Thanks

I rarely ... very rarely...

I rarely ... very rarely... ever see a gif beat out a 8bit png  (not 24) in file size. jpg vs png can be debated for complex images perhaps, but for simple vector-y images? png is always smaller, pretty sure this has been the case for several years now.

png gamma correction

If you're considering using PNG, then you should be aware that certain browsers may not display the image colors the same way.  This can cause problems if you're trying to exactly match an image to a color specified in CSS.

http://hsivonen.iki.fi/png-gamma/

In my situation, the following incantation removed all my problems, but your mileage may vary:

pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png

Surprisingly true

In my early webdev days I was advised *always* to go witn png! (I don't remember who it was that gave me the advice.) I knew all along that photos of real-life looked far better in jpgs, but I proceeded with the advice. Then, I saw an article which prodded me simply to check file sizes, and lo and behold, images of the same dimensions were vastly smaller as jpgs! How quickly I converted.

I proceed strictly by comparing filesizes, carefully left as close to raw as possible on the advice of a pro photographer instructor I had; pngs for a very few gradients and icons; and gifs for a couple cheap-looking animations (soon to be trashed).

PNG8 as a workaround in IE6

A format I've found useful in the past is PNG8, in browsers that support semi-transparency you will see it, but in IE6 you would not. Results can vary but it can be useful to escape the gray backgrounds or multiple formats.

You can create these from Fireworks or convert existing PNGs by using pngquant.

don't sacrifice a 32-bit color palette for IE6

Thankfully, IE6 will soon be going the way of the dodo. Even Microsoft wants to kill it! In my opinion, at this point if you are creating new content for a web site, you shouldn't spend any time or energy on IE6 specific optimizations, especially if you have to degrade the experience for everyone else, which is exactly you can expect with reduced color depths.

Image compression vs CSS sprites for load speeds?

So obviously JPG is better when there isnt a strict requirement for PNG, but if youre loading a lot of small PNG's (icons, buttons, etc) wouldnt the advantage of using sprites outweight the benefit of compression (if converted to JPG) when we talk about page load times?

I might save 50k off the page size but I go from 40 requests to 1.

Thoughts? Im finishing up my new page design but this is something Im currently debating. Check my page and tell me what you think would be better in this case (www.livingcontemporary.com)

Liraz Siri's picture

CSS sprites can be a major optimization but they take work

I think you're right in the sense that it's not just all about the size of a web page. The number of requests is also an important consideration and anything you can do to reduce may result in a noticeable improvement. Or not. You need to test.

OTOH, CSS sprites are relatively complex and can be a PITA to maintain. It's not a technique you use casually. Personally I would mostly consider CSS sprites for mouseover effects, but if you have the resources to throw at this and the performance improvement is worth it to you... by all means go for it.

You should have mentioned JPG quality

You should have mentioned that JPG can be compressed with various quality settings. At 100%, it is lossless, but it is rarely practical to use because you mostly get much bigger filesizes than with PNG (it only beats really uncompressed formats like BMP in size). If you are ready to sacrifice a few %s, you can get much smaller sizes than in PNG case. But basically you can choose yourself how low can you go. You can play with the compression setting to find the right balance of quality and size that suits your needs. In PNG you don't have that luxury, but at the same time you know that if a file comes in PNG, it most likely wasn't messed with. That's why I second that PNG is good for storing master copies of graphics: the format (file extension) itself sends an extra signal that it wasn't compressed.

These are all kind of obvious things to me, but once you started talking about it, I'm surprized that you didn't talk in deeper detail about optimization of graphics wor the web, especially because your site features such nice graphic design and nice icons whereas it is not expected.

Gimp , save for web ?

Gimp , save for web ?

IE6 is a bottleneck…

... for each project I have to reinvent the wheel. For PNG24 I'm using a jquery plugin that hacks the stupid IE6 behaviours. Unfortunately you can't use all background-position features regarding the limited features of the applied filters ... but for the most it's an don't-think-about-task --> http://jquery.andreaseberhard.de/pngFix/

Saving for designers?

Great tips. I have a lot of high rez stock to get resized and uploaded on my site to offer designers (giving back to our community). They'd prefer png however, the files are often times 4 - 8 meg files. I'm seeking solutions for image reduction of these files without losing quality.

Terrific discussion here for web graphics, etc.

Thanks guys.

Consider your audience

One of the most important questions when designing a website is always who are your target audience. More often than not if you are developing a website to sell luxary million dollar homes then you would not expect the majority of your traffic to be coming from out dated computers running IE 6.

As a webdeveloper I think the days of supporting IE 6 are over and if you are still using it then that's unlucky. If your forced to use it because of an outdated applicaiton at work then wait until you get home to browse the net, you should probably be working anyway ;)

Thanks for the comments about optimising images, I myself am a big believer in putting the extra work into making jpgs work in the design rather than filling my page with transparent pngs.

When PNG is better than JPG and vice versa

I agree, it depends on what the image is being used for. I have also been taught that PNG's are more for vectors and JPG's for images such as photographs. Thanks for all the great information.
 

JPG versus PNG

I agree with my local WA colleague that I would rather use a jpg than a png file. IE6 is just not good enough and I am sick of people using it.

I send them an update link for microsoft and then ask them to view it. It is 10 years old after all.

jpg or png

I always take into consideration the audience which means corporate websites should still support IE6. When IE6 support is not needed, jpg or png usage depends on filesize. The day IE6 will finally disappear I'll open a bottle of champagne :)

About IE6 apps.

I'd like to hear some solid argumentation as to why this is beng done.  It's been a long time since DOM allowed to develop browser-neutral web applications.  Also, in light of recent advances in Flash technology, there really is no excuse not to use Flex or something  like that to build fully portable applications.  Having Adobe AIR installed also opens some doors.  Whatever happened to Java?  Wasn't it the whole idea of portability that got it so popular in its day?  Either Flash or Java seem like valid choices to avoid browser-bound application development.

So, what gives?

There are certain things you

There are certain things you have to sacrfice....and in the time of high speed internet, i tend to use png's when needed even if they are a little bigger in size...the quality is usually much better.

png & jpg

I agree, it depends on what the image is being used for. I have also been taught that PNG's are more for vectors and JPG's for images such as photographs. Thanks for  the great article.

Better PNG lossless optimisers

I do agree with most of this article, and it matches what my experience has taught me. However, I do think you're using the wrong PNG optimisers. PNG still really can't beat JPG for medium sized, detailed and non-transparent images, but can be improved when needed.

I recommend you check out advancecomp, pngout, and DeflOpt. It takes some fiddling to workout a good PNG optimiser chain, but once done, you should have something that can reliably and reasonably quickly shave decent amounts of PNG. Not as much as JPG, but enough to be worth the effort. Certainly enough so that GIF by comparison becomes redundant for all but a very small subset of image types.

Such a chain may need to be crafted to avoid producing IE6 incompatible images. However, I really recommend dropping IE6 altogether.

Liraz Siri's picture

Tried pngout but not DeflOpt and AdvanceCOMP

Thanks for chipping in. If memory serves I tested pngout extensively. Instead of fiddling with the PNG optimization at random I just tried all the options exhaustively and let that run for a few hours then came back to see the results. I didn't discuss the experiment in detail because I was disappointed to have so little to show for it. Perhaps with DeflOpt and AdvanceCOMP one might get better results. I'll have to try that sometime.

Try a GUI like PNGGauntlet

It doesn't sound like your testing with pngout was as extensive as you think. Trying all the options exhaustively isn't going to render a very compressed file. In order to use the command line app right, you need to consider the source content and set specific options for that. I.e, there is no "best" for everything options. A GUI like PNGGauntlet does a lot of the thinking for you. To give an actual test, I'd suggest just setting PNGGauntlet to extreme, then having it compress several different types of images (e.g., a screenshot of this webpage, something previously compressed as a gif, a photograph, a vector rendered to bmp, and an icon with a full alpha channel).

PNGs take longer to load

I will generally go with the jpeg to save on load time since the PNGs are usually larger files. If the quality is not really effected then I always go with better load time on the graphics. A factor that Search Engines weigh heavily on.

jpeg wins in my book

Not only do I encourage using jpegs, jpgs over png, I endorse it. After building countless websites, a learning process every time I start a new project, I've learned to test load times as an SEO characteristic. If you page is slow to load, bots will skip your page. They don't just hang out and wait on your server to load your page. Now I know, most web servers are capable of displaying data lightning fast but there are occurences. Might as well cover all of your bases. NDE only uses png images for logos and or important viewable medias that could qualify as being caterogized, "important". Earlier in the post, it was mentioned that the change in appearence from png to jpg when being compresses is so minute the human eye can't even tell the difference. Well I do have an issue with that statement. Yes, it's hard to tell but if you put them side by side...you could certainly tell which one is which. That also depends on the original size to the compressed size. The bigger to smaller you get, the more noticable it will be. There is still a time to use PNG images.

 

Great Article!

JPGs & PNGs vs WebP

What do you all think of WebP format, being developed by Google it would seem.

http://code.google.com/speed/webp/

"WebP is a method of lossy compression that can be used on photographic images. WebP offers compression that has shown 39.8% more byte-size efficiency than JPEG for the same quality in a large scale study of 900,000 images on the Web. The degree of compression is adjustable so a user can choose the trade-off between file size and image quality.

A WebP file consists of VP8 image data, and a container based on RIFF. Webmasters, web developers and browser developers can use the WebP format to create smaller, better looking images that can help make the web faster." 

Liraz Siri's picture

WebP looks impressive!

Thanks for sharing Patrick. I hadn't previously heard of WebP. 40% better compression for the same quality is nothing to sneeze at. Unfortunately, even if all the major web browsers add WebP support tomorrow it will probably be another 5 years at least before the typical web designer will be able to rely on its presence. OTOH, Google will probably have some super clever way of giving you WebP images if your browser supports it and JPGs otherwise.

We use .jpeg or .gifs for our site

I've heard that png images are the highest quality, but for the best load time jpegs then gifs are the ones to use. Our site loads pretty well with the jpegs so we haven't switched it up. I don't know, maybe we should test with PNGs and see what load times does. Good info guys.  - Mike

comparing apples to oranges?

Great post, and has some real valuable tips in there - not many people know about the -"small and simple images may actually compress better using PNG than JPG"

I have to say JPG and PNGs are vastly different and both have their uses, and arguably both just as important to websites. If you check out our Melbourne web designs you'll see alot of different uses of jpgs and pngs.

OH also check out this great use of both JPG and PNGs (and jQuery) for a scrolling vertical background website

Think why

Ask yourself what you want to accomplish: attract the eye? Use jpg to render photos nicely; gif and png to render graphic art. 

But if you want to transmit a fine, usable image, consider making the web image a button to download a tif copy. If they just want to look at a web sized/quality image, there it is. If they want a serious image (and you are willing to allow it) they can have that too, and with no hit to the load-time of the page.

png vs jpg web designer perspective

You should have mentioned that JPG can be compressed with various quality settings. At 100%, it is lossless, but it is rarely practical to use because you mostly get much bigger filesizes than with PNG (it only beats really uncompressed formats like BMP in size). If you are ready to sacrifice a few %s, you can get much smaller sizes than in PNG case. But basically you can choose yourself how low can you go. You can play with the compression setting to find the right balance of quality and size that suits your needs. In PNG you don't have that luxury, but at the same time you know that if a file comes in PNG, it most likely wasn't messed with. That's why I second that PNG is good for storing master copies of graphics: the format (file extension) itself sends an extra signal that it wasn't compressed.

These are all kind of obvious things to me, but once you started talking about it, I'm surprized that you didn't talk in deeper detail about optimization of graphics wor the web, especially because your site features such nice graphic design and nice icons whereas it is not expected.

 

Im a perth web designer

Both formats have advantages and disadvantages

I have read an article, what both formats have advantages and disadvantages. What about raw format? What is your opinion?

The Articles is here

Interesting debate

Interesting debate. Personally I prefer JPGs and use them on my website.

PNG or JPG

I used both on my website www.ntagas.com, the png allows the transparency, but if the picture has a high resolution .jpg is the better way because you can render the image size and the webpage is loads faster.

Has Anyone Considered...

...IE9 graphics hardware acceleration? It works with images to make them load faster. FF claims equal performance in it's newest versions...

Forgot to Mention...

...IE 9 supports Scalable Vector Graphics (SVG) both static and dynamic - interactive or animated.

I'm a web designer

Jeremy's picture

Please excuse my ignorance

But how does graphics hardware acceleration make images load faster in a web browser? I guess maybe it could render them faster but I'd imagine the network bandwidth would be the bottleneck, not the graphics rendering.

Also how many people are actually using IE9? Last I checked XP (no IE9) was still the dominant OS (by a significant margin) and there are still people using Win 98 & 2000 (no IE9). Mac (also no IE9) sales continue to be steady and although real numbers are hard to get (because it's free), there is a growing body of evidence to suggest that the Linux desktop market share is continuing its steady growth (again no IE9). So unless your market are Win Vista & 7 users only then taking advantage of features only in IE9 would seem to be business suicide.

Liraz Siri's picture

Depends what you're doing with the images

If you're just displaying a static image hardware acceleration shouldn't make a noticeable difference. But it might if you're web application does something fancy with images (e.g., CSS3 manipulations + Javascript). Javascript is usually only used for very basic stuff (e.g., form input validation before submit), but it's a turing complete language that can do pretty much anything you can do in any other language. The main issue is not capability but performance, in which case hardware acceleration integrated with the browser might actually come in handy...
Jeremy's picture

Thanks for the explanation Liraz

That makes perfect sense. And I guess really that's were it's all headed isn't it!? Lots of web/cloud apps that are far far more than just static pages...

Liraz Siri's picture

The old is new again, the network is the operating system, etc.

What's happening today is pretty much the original Netscape/Sun vision of the browser/network gradually eroding the relevance of the desktop computing paradigm. Your applications would run anywhere, on any device, over the network and it wouldn't matter what operating system happened to be running on the front-end device you were using at the moment. The visionaries were right, they just got the timing wrong.

Today, behind the scenes there are powerful interests at work (e.g., Google, Facebook that don't want to have to negotiate access to their users with companies like Microsoft/Apple who control the platform at the operating system level. This used to be a huge problem with Microsoft a decade ago. They were ruthless and people were scared. They were unstoppable! Funny how that turned out. You'd get really funny looks back then if you suggested that Apple would be resurrected from the brink to overthrow them as kings of evil (and eclipse their stock capitalization).

Anyhow, a decade or so late everything is gradually moving to the web/cloud now, regardless of concerns regarding the sensibility of this kind of centralization or the massive security issues. It's a necessary step before super cheap, ubiquitous, ever pervasive computing that follows you everywhere. Note that I'm not sure this is necessarily a good thing. Maybe I'm just paranoid/conservative but they'll take away the Personal Computer running under MY control when they pry it from my cold dead fingers. I actually like being offline.

Jeremy's picture

Yeah it's funny how that's happened...

I'm with you on the OS owership though. I don't think we have too much to worry about in the near future anyway. I'm not sure what it's like in your part of the world, but here in regional Australia mobile web access (3G) is still too unreliable and expensive for the dream of a mobile OS to really work (eg ChromeOS). Even if the issue of offline useage is circumvented, the perception of the average Joe will still be that it relies on internet access and will be turned off by that.

Preferences

I'm all about resolution and graphics, similar to video games and cpu games. Who wants images that are not clear on a porn site or pictures of family that include red eye or blurs?! I'd prefer slower time(reasonable dt) as opposed to poor quality- png>jpg.

Great

Website. If you are ready to sacrifice a few %s, you can get much smaller sizes than in PNG case. But basically you can choose yourself how low can you go. You can play with the compression setting to find the right balance of quality and size that suits your needs. In PNG you don't have that luxury, but at the same time you know that if a file comes in PNG, it most likely wasn't messed with.

Subir Volumen Muscular

PNG vs JPG

How about GIF?

 

PNG vs JPG vs GIF?

 

Which is better when in terms of Website Building and development? I have used some PNG and JPG to this website http://www.webmaxitsolutions.com/  and sometimes the image doesn't show up.

 

What might be the problem?