Output Formats and Compositing

When you choose the output destination for your Visualizer pictures, you also have a choice of saved image formats: JPG, PNG, and -- OpenEXR? What's an OpenEXR?

This post will give you a quick heads-up on all the available formats, why you might like one better than another, and how to make the most of them in 2D image editing programs like Adobe Photoshop, Lightroom, even email or Twitter.

The three output formats give you a choice between optimal file size (JPG), web-compatible transparent details for common tasks (PNG), or high-precision professional color (OpenEXR). For common uses like email, web sites, and presentations, you'll probably use the first two -- we'll leave OpenEXR details for another day.

If you just want "everyday" pictures that look just like the Visualizer window, you'll probably want to use JPG format. JPG results in the smallest file size and JPG is understood by almost all email and web programs, like Twitter, Flickr, or Facebook. It's the same format as used in typical phone cameras or even many pro cameras.

PNG format is also understood by most email and web programs, and adds the option for images to be transparent, even when shown on the web. The picture shown below is a transparent PNG displayed over a green background -- the web browser provides the green background color via CSS, while the PNG provides the spacecraft.


The picture above is a PNG file with transparency turned on. This model of the SpaceX Dragon was created by HeliosLabs.

While not a common name for web and email use, OpenEXR is a genuine Big Deal in computer graphics -- a format that provides high-precision color for delicate control (it even won a Technical Oscar, back in 2007). OpenEXR isn't understood at all by email and web programs without an intermediate step using a tool like Photoshop, which is why we're skipping the details for today.

File Size Comparisons

JPG: 30KB
JPG: 30KB
PNG:53 KB
PNG: 53KB
OpenEXR: 163KB
EXR: 163KB

You might have already noticed, by the way, that the transparent PNG file not only displays hard edges -- it's also appropriately transparent through the windows and even the shadows on the ground -- very hand for web design!

Compositing (Overlaying) PNG's in Photoshop

If you want to overlay a Visualizer frame onto another image using Photoshop (or similar program) you'll need to use either PNG or OpenEXR formats. Just remember to check "Transparent Background" when selecting the format.

For most uses,  PNG works great. When you open a transparent PNG file from Photoshop, it will display with the transparency already set up:

Photoshop shows transparent areas in a gray checker

You can just use layers in the usual Photoshop way to combine images (here we've just dropped a gradient fill layer behind the car).

PNG Composited on a Gradient