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.

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.}