Thursday, May 3, 2012

Open Image Annotation Initiative

Long story short: A tool to let you annotate any image and embed the drawings you made to that picture, while having the original file stay intact.

To senior artists, imagine you want to give critic or feedback to another artist's work. Perhaps the anatomy of his drawing is wrong. Perhaps you'd want to draw in red lines how things should be.

Normally you would open Photoshop for this, but what if you can sketch your notes for any image while in the browser, with pen tablet support?

To artists, imagine you are keeping a collection of files for visual reference, or visual peg, as they say, and you want to use your Wacom pen to sketch notes on your reference images, while keeping the sketch and the image separate from each other?

You could save it as a Photoshop .PSD file (because you need layers), but what if you want to annotate an animated .GIF file?

You could save the annotation sketches as a separate file, perhaps a transparent .PNG if you're clever. But that's messy.

What if you don't want extra files to manage? What if you could add "layers" to any image file type? "Layers" on a .JPG, "layers" on a .GIF, "layers" on a .PNG?

(I say layers in quotation marks because this proposed tool does not really add layers in a technical sense.)

The idea is to embed an archive to an image, with the archive containing your "layers" as separate, transparent images.

This hidden archive trick is not meant to be secretive; the file will be renamed to the extension of, for example, if the filename is picture.jpg.

To programmers, you can perhaps see that is not as efficient as true layers as in Photoshop .PSD files. Perhaps, who knows. (Note: the open-source equivalent of .PSD files, .ORA files, are actually just archives. Unfortunately, .ORA is still in a messy state right now to be usable.)

But this tool is not meant for heavy image editing like Photoshop, it is a tool for adding quick notes and annotations to any image.

If you are still not convinced, the annotations can be saved as vector graphics data, ensuring a very small bloat on the original file. Perhaps as 8-bit .PNG files, if need be.


There are two variations on how the tool can add sketches on top of the image.
  1. The sketches are saved as either .SVG or .PNG and stored in a zip file, embedded into the original image.
  2. Same as in no. 1, but the original file is included in the zip to be embedded. And instead, a new image, a mixdown of both the original image and the sketches will be the "front-facing" file.
Using the mixdown will add more file size, but ensure that the annotations can be seen in any web browser, in any image browser, without any special program, and yet the original file can still be extracted with any standard archive manager.

If file size is not an issue, the mixdown approach is more useful. To compensate, the mixdown image can be saved in a small file-size, low-quality .JPG if the user prefers.

Transparent Images


If the original image has transparency, the user can choose to use a background color to replace the transparent parts (for example, to add a white background on a black drawing to ensure it can be seen, even if it was posted to a forum that had a black background). A checkered square pattern will also be possible.

Pen Tablet Support


As noted, the tool promises pen tablet support, such as in Wacom pens. Pressure sensitivity is important, and attaining an, at least rudimentary, recreation of pen or pencil-esque quality is important for the tool to be artist-friendly.

Vector Graphics


Typed notes will also be possible, as well as simple shapes like a circle, perhaps an arrow, etc. The tool will allow you to edit the vector graphics (which means the SVG data needs to be embedded, so it can be recreated when editing annotations).

Target Platform

As for what the tool will be made in, I'm currently thinking between Python (as a standalone program), or Flex or HTML5 (as a web browser plugin). Perhaps create both standalone and browser versions.

Out of all of them, I am most familiar with Python, so for now, it will be a standalone program, made in Python, using numerous libraries such as wxPython, cgkit, PythonMagick, etc. Here are the plans for that.

Viewer Program

In the plans is also a lightweight tool to view these kinds of images, and allow toggling display of the annotation sketches. Preferably it would be a plugin to your favorite image browser and web browser. Among the two, a web browser plugin is the simplest path. So that will be given priority. As a start, a Firefox add-on for this is planned.

Open Source


I heavily prefer that this be released in an open-source license, but I am unsure which license to use. GPL is seen as restrictive for other people, and yet all my favorite digital content creation tools use GPL (Blender, GIMP, Inkscape, MyPaint, etc.).

I would not want there to be closed-source derivatives/modifications to the Open Image Annotation Initiative, because a tenet here is it should still be usable without any special or proprietary plugins (the original file can still be extracted using any standard archive manager).

The tool will use widespread and readily available data formats: Zip, PNG, SVG, and perhaps JSON or YAML for miscellaneous information.

For interested programmers:

Git repository of work-in-progress here: