Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

For, say, a subtle background gradient to a web page, what are the advantages and disadvantages of saving it as a 16bit/channel png?

Are the colours represented by >8bits displayed in the intended detail in all browsers?

share|improve this question
    
There aren't too many 8-bit machines out there any more, so the answer to your 2nd question is probably 'yes'. However, your first question is much more important. –  Dan Pichelman Jun 14 '13 at 17:29
1  
@DanPichelman: This has nothing to do with the CPU architecture and everything to do with display depth. There are lots of devices out there that have eight or fewer planes. The Amazon Kindle, for example, only has four, which makes the answer to the "all browsers" question a resounding "no." –  Blrfl Jun 15 '13 at 11:56
    
@Blrfl - thanks, I didn't know that. I was under the mistaken impression that all browsers were above that. –  Dan Pichelman Jun 15 '13 at 17:03
    
@DanPichelman: This is where I put in my teeth and tell you that 30 years ago we only had one plane, up hill both ways in the snow. Of course, browsers were still almost a decade away... –  Blrfl Jun 15 '13 at 21:31
    
@Blrfl: I meant all browsers today. I clearly remember 8 bit microprocessors and Gopher. –  Dan Pichelman Jun 16 '13 at 1:09
add comment

2 Answers

up vote 2 down vote accepted

Advantages

  • Below 1/256th improvement in gradient display quality

Disadvantages

  • Not all browsers have implemented 48bpp PNG decoding
  • Most displays can't render the full 8bit/channel gamut as well as they claim to, let alone 16
  • Increased file size

You have to make a value judgement - is it warranted for a background element? Probably not.

share|improve this answer
    
When you say "Not all browsers have implemented 48bpp PNG decoding", do those that haven't fail to display the image entirely, or do they fall back to just rendering 24bpp? –  Alec Jun 15 '13 at 12:55
    
IIRC they can't display it at all. Just like a corrupted file. I'm trying to remember which one it was now. –  James Snell Jun 15 '13 at 14:12
add comment

The advantage of a 8 bits per channel indexed PNG is its size.

The disadvantage is that if the image contains more than 256 colors, the graphics editing program will try to adapt the palette, meaning that some colors will slightly vary. Some programs are smart to pick a well-adapted palette. Some are retarded. Don't use the last ones.

For a subtle gradient, this disadvantage doesn't exist, since subtle gradients would hardly use more than 256 colors. To reduce the size of the image even more, you can restrict PNG 8 to use less than 256 colors: for example only 16.

Note about gradients in general:

  • If this is an horizontal or a vertical gradient, ensure the image is one pixel large or one pixel high. This seems obvious, and still, I've seen a huge number of designers, programmers and persons specializing in HTML and CSS putting a 1000×150 pixels image in order to have a 150 pixels top-bottom gradient.

  • Unless you should support legacy browsers, consider CSS 3 gradients instead of images. For the browser, the best image in terms of size is no image at all.

  • When you should support legacy browsers, consider CSS 3 gradients anyway. People who are still using Internet Explorer 8 or earlier probably don't care too much about pretty gradients, shadows or rounded corners. For them, your website will be monotonous, flat and square, but still usable.

Note about graphics editing programs:

  • Using a professional graphics editing program helps. For example in Photoshop, you can instantly see how the image will be rendered with a set of settings, say Perceptual, Diffusion, Colors 16. This enables to quickly try different options and pick the one which is just above the level below which image quality visually decrease.

  • If you don't have one, you can still save multiple variants of the same image, and then compare it in a viewer side by side.

Note about size of images:

Most users won't be disgusted by minor JPEG artifacts or PNGs with sub-optimal palette, especially on mobile devices. Speed, on the other hand, matters, especially on mobile devices. If a website is nice but every image takes ages to load because of its size, nobody will use the website. Consider this bias when choosing the appropriate format and settings. In other words, look more at the size of the image and less at the visual quality.

Some other hints:

Playing around with the images and especially PNG 8, you may discover the following:

  • Sometimes, combining several images into one (i.e. create a CSS sprite) is beneficial in terms of performance: not only browsers are requesting one image instead of doing multiple requests, but also this one image is not much larger (and sometimes even smaller¹) than multiple original ones.

  • Also, splitting one image into multiple ones can reduce a lot the overall size when working with PNG 8. I remember going from 200 KB monolithic CSS sprite down to 40 KB by splitting it into ten images. According to the metrics, this effectively had a positive impact on the server, despite the fact that the browser was forced to do ten requests instead of one.


¹ I don't remember the case when I've seen it. If somebody knows such a case, feel free to edit the answer.

share|improve this answer
    
+1 Oh well, better answer than mine, gonna delete mine :-) –  Jalayn Jun 14 '13 at 17:24
1  
Great answer but just FYI the OP asked about 8/16 bits per channel, not 8-bit indexed PNG. Clever use of indexed PNG and "blocking" the images will help to reduce bandwidth at the cost of extra hits. In the case of 1px wide/high there is a strong argument for being larger than that (not by much, just 8 or 16px) as Photoshop (for example) will introduce a small amount of noise in the gradient to compensate for banding that would otherwise be visible. –  James Snell Jun 15 '13 at 10:20
    
@JamesSnell "there is a strong argument for being larger than that (not by much, just 8 or 16px) as Photoshop (for example) will introduce a small amount of noise in the gradient to compensate for banding that would otherwise be visible" Great point, I'd never considered that. –  Alec Jun 15 '13 at 12:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.