How to apply Quartz filters in macOS when saving images in Preview

Core Graphics provides default image filters for quick special effects. Here's how to save image files in Preview for macOS with effects.

Apple's Core Graphics (Quartz) 2D imaging subsystem provides a high-performance, consistent API for creating, saving, and manipulating graphics. It's also responsible for drawing most text on Apple platforms (Core Text).

Text can be drawn by Quartz using subpixel precision, and anti-aliasing (smoothing) even if a particular display can't show the text at full computed resolution.

Quartz is vast and covers almost every aspect of 2D imaging on Apple operating systems including iOS and macOS. Quartz is one of Apple's oldest frameworks and debuted with Mac OS X itself.

The imaging model is based on compositing, in which several graphics layers can be combined with transparency (alpha), manipulated, transformed, saved, printed, or copied to a display.

The Quartz Compositor is responsible for image assembly and manipulation, combining images, and rotating, applying transforms, or shaping images. Once a final image is assembled, the display engine moves (or 'blits') the image to a display or printer.

In the case of macOS, the Window Server further handles culling and obscuring images to ensure display images destined for specific windows stay only in those windows.

The macOS Window Server itself uses the Quartz Compositor when assembling the content of windows.

For performance reasons, the Window Server knows how to clip images so that only the portions visible in windows are drawn. This is how, for example when you click between windows in macOS, parts of the windows are obscured behind other windows.

By clipping images at display time, the Window Server vastly improves rendering performance because it doesn't have to draw the entire contents of a window if part of it is obscured.

When Mac OS X was first released in 2000, the graphics engine and frameworks were the most advanced in the computer industry.

iOS devices work somewhat the same as Macs, except that they don't use a dedicated window server like macOS does. Both use the same Quartz framework and APIs.

Almost everything on the Mac and iOS devices gets drawn using Quartz. This includes individual images and image files, as well as most of macOS itself and the contents of its windows.

In Mac OS X Tiger 10.4, Apple introduced Quartz 2D Extreme that allows Quartz graphics to be offloaded to a dedicated GPU. In 10.5 Apple renamed Quartz Extreme to QuartzGL.

The Quartz Compositor also uses QuartzGL to speed up rendering if a dedicated GPU is available.

Apple previously shipped an app called Quartz Composer which has now been discontinued.

Apple's Quartz Composer app.

Based on geometry

What you see drawn onscreen or printed is only a close approximation of the graphics Quartz actually computes. Quartz uses mathematical models behind the scenes to actually calculate the graphics it is going to draw - unless the graphics are a bitmapped image that exists as a page of pre-rendered pixels.

Mathematical models of such graphics are sometimes called vector graphics because they are calculated using geometry first regardless of how they will be displayed or printed.

Vector graphics have the huge advantage of being scalable to any size. To make an image larger or smaller, simply recalculate the image at a different scale, or apply a scaling transform before the graphics are drawn.

Transforms are mathematical adjustments applied to images to change their size or shape. When you rotate or warp an image in an image editing program - or when you manipulate a 3D object in space you're applying a transform to the model which then gets redrawn.

Transforms can also be applied to bitmap images, although this usually results in some amount of distortion to the original image.

Bezier curves describe curved vector graphics, usually with a starting point, control points, one or more degrees of curvature, and shaping points or "handles" which can be used to alter the shape of curves. If you've ever used a vector drawing app such as Adobe Illustrator, you've probably used Bezier curves to change the shape of objects.

Fonts, for example, use Bezier curve geometry and vector drawing to describe their outlines (strokes) which draw each character individually. When you change a font or font size for text in a document in macOS, you're reapplying a new calculation for each character drawn.

Each font file in macOS contains instructions for how to draw each text character in a given typeface.

Quartz Display Services

Quartz contains a further subsystem called Quartz Display Services (QDS), which is mostly concerned with hardware displays themselves. Originally a very small API, QDS has now expanded to dozens of APIs handling:

1. Locating and ID'ing displays
2. Changing display properties
3. Setting all display configurations at once
4. Capturing a display
5. Streaming contents of displays
6. Using fade effects
7. Toggling display mirroring
8. Applying gamma and correction for color
9. Receiving updates of display changes

If you've ever changed the resolution of your displays or moved the main menu bar to another display in the System Settings app, you've used QDS.

macOS apps should include code to receive notifications of display changes so they can reconfigure their windows and window contents for the new display properties.

The connected display which contains the macOS menu bar is called the Main Display. Each display is assigned a DisplayID (a 32-bit CGDirectDisplayID) by macOS at startup.

Data types

Quartz defines its own set of drawing primitives for use in graphics calculations (which are described in the Core Graphics documentation). These primitives include everything from single integer and floating-point numbers, geometric shapes such as points, sizes, and rectangles, to paths, vectors, and transforms.

There are also display contexts, images (for bitmaps), layers, plus colors and fonts. A display context is defined as a graphics environment you can draw into.

Usually, each display has a drawing context, but there can be additional offscreen and composite contexts too.

You can also change the properties of drawing contexts to change the look of their contents when the context is redrawn.

Most of these data types are made up of simple individual types. For example, a CGPoint in Quartz is defined as a structure containing two double-precision floating point numbers: an X and a Y coordinate. A CGPoint describes any single point on a display or context.

A CGRect is made up of two other Quartz types: a CGPoint (starting point) and a CGSize (dimensions). The drawing starting point in most 2D computer graphics systems is called the origin.

Some 2D systems measure distances from the upper left corner and to the right and down, others from the lower left corner and to the right and upwards.

Quartz also defines layers (CGLayer) which can each be drawn into individually, combined, and animated.

Another Apple framework called Core Animation can use layers (CALayer) to animate several graphics layers together at once smoothly.

Adobe PDF portable document file.

PDFs

PDF files are handled separately from Quartz on Apple platforms - except for their final rendering to display or print. This is because PDF was originally an Adobe standard that used PostScript for rendering.

NeXT computers had a similar system based on PostScript called Display Postscript which used the Adobe technology for display as well as print rendering. PostScript also used vector graphics in its graphics calculations to provide smooth drawing at any scale.

Although PDF isn't an Apple technology, Quartz provides a data type for PDFs called CGPDFDocument. This data type gets its contents from another Quartz type called CGDataProvider.

Using these two data types you can create a representation of a PDF document for display or print. You can also initialize a CGPDFDocument directly from a file or URL.

CGPSConverter is a Quartz type that can be used to convert to and from PDFs and legacy PostScript code directly. Older printers have PostScript embedded in their ROMs so they can receive and print PostScript and PDF files.

Apple has several other frameworks for image and file manipulation including ImageKit, PDFKit, Quartz Composer (now largely deprecated), and Quick Look.

Quartz and Preview

macOS's Preview app is essentially a Quartz and PDF rendering app, which also knows how to display bitmapped images.

Preview uses Quartz to composite and display files and images the same way macOS does. It can perform all the drawing commands and transforms any other Quartz app can do.

It also knows how to render PDF and PostScript files directly into windows - and how to send them to laser or inkjet printers. When you open a PDF file in Preview, it uses the Quartz API to render the PDF drawing commands to be drawn onscreen in Apple's native system.

Quartz and Filters

Once everything is ready for display, Quartz Filters (CIFilter) can be applied to use special effects when displaying, saving, or printing graphics and image files. PDFs can also have image filters applied using Apple's ColorSync technology.

Quartz provides a predefined standard set of filters, which essentially apply familiar photographic-type effects to images - but custom filters can also be defined and applied. macOS also includes a Filter Manager which is used to add, remove, and manage image filters.

CIFilters can be complex but rely on just two Quartz data types: CIImage and CIContext. A CIImage is essentially an image generator that either takes an existing image as an input or draws it into a CIContext to produce a new image.

You don't have to worry about how the images are modified using CIFilter - Apple has all that code built-in: you simply select the filter you want to use, and indicate either an existing image or drawing context to modify and Quartz does its thing.

This also standardizes filter effects so they're consistent across software for Mac platforms as long as the Quartz API is used.

After the selected filter is applied, a new CIImage is output ready for use. You can also apply a CIColor to an image to change its overall color cast.

Apple also provides built-in filters for geometry changes, compositing, gradients, lens effects, and more. All the built-in filters are grouped by category using constants starting with "CI". One group called CICategoryStylize provides several dozen ways to make images look like photos, newsprint, comics, and stained glass.

You've probably seen these types of effects in apps such as Adobe Photoshop.

There are now hundreds of Apple-defined Quartz filters, which are detailed in the Apple SDK header file CIFilterBuiltins.h. But a better way to view all filter types is to visit the third-party Core Image Filter Reference documentation project by Noah Gilmore.

Gilmore also offers a five-star Core Image reference app for iPad on the App Store called CIFIlter.io ($5) which details the Apple built-in filters for you. Both the site and app display which versions of iOS and macOS each filter is available on.

Apple's CIThermal filter in the CIFilter.io app by Noah Gilmore.

Applying Filters in Preview

Unfortunately, macOS's Preview app still isn't a full-featured image editor yet. While you can do some rudimentary operations such as sizing and rotating, it doesn't currently support general filter effects.

This is too bad since Apple already supplies all the filters in the OS. Currently, all you can do in Preview is draw basic lines and shapes, adjust colors, and add text.

What you can do however in Preview is apply a filter when saving a file - but only for a small select set of predefined filters. In fact, this set is a predefined set of ColorSync Core Image filters that live in /Library/ColorSync/Profiles and ship with macOS.

To do so, do a File->Save or Save As, and then from the Quartz Filter menu, select one of the available filters (if the file format supports it):

Select a file name, location, Format, and Quartz Filter, if the format supports it.

Click the Save button to save the file.

Preview doesn't yet support applying filters to all file types when saving - including .PNG files. Most of the provided filters in the Preview Save sheet are for converting to black and white, grayscale, sepia, changing lightness, and optimizing file size.

For PDFs, there's also a custom filter for saving files as a PDFX-3 document, which is mainly used for professional printing.

While this set is limited, it is a quick and easy way to modify image files when saving. Hopefully, Apple will extend the set to include more predefined filters and more file types.

Core Image is a fascinating subject and is incredibly easy and useful. If Apple chooses to extend support for it in macOS and iOS in the future it will be even more so.

If you're interested in Quartz programming on Apple platforms, see the legacy document Quartz 2D Programming Guide. There's also a great third-party book titled Programming with Quartz: 2D and PDF Graphics in Mac OS X.