[2014-08-26] Control Image Opacity with CSS

We’ve just deployed an update to DocRaptor that adds support for the opacity property on image elements, support for 16-bit TIFF images and a bug fix for SVG image elements.

Hungry for more details? Keep reading!

Image Opacity Support

You can now set opacity levels on images in your generated PDFs using CSS. No more relying on PNG images with an alpha channel set to your desired transparency level!

Some sample CSS might look like:

.myimage { opacity: 0.5; }

Here’s a screenshot showing this in action:

You can check out the input HTML for this PDF here, as well.

Support for 16-bit TIFF Files

You can now add 16-bit TIFF files to your input HTML document. An 8-bit TIFF file supports up to 256 distinct tones to represent a color at each pixel position, whereas a 16-bit TIFF file supports up to 65,536 tones.

This difference in tonal ranges is most obvious in large areas with gradually changing tones, such as blue skies. You’ll notice banding issues more quickly when working with 8-bit TIFF files, but the greater tonal range of 16-bit TIFFs makes these transitions much smoother.

16-bit TIFFs are larger files, but also print better than 8-bit images. Pretty handy if you’re creating PDFs containing images with a lot of subtle gradations.

SVG Fill-Opacity Bug Fix

Last but not least, this update also fixes a small bug with SVG images. The fill-opacity property on paths was being incorrectly applied to subsequent images, but no longer! Fill-opacity will now respect your wishes.

We’ve got a lot of cool updates on the way. Some of our users have contacted us with interesting use cases, and we’re working on some neat tutorial posts for further customizing your generated PDFs using DocRaptor with third-party libraries and tools. Stay tuned!