log

February 20, 2009

Graphic Improvements

A long stand­ing prob­lem with graph­ic files on the web is that there’s no lossy for­mat with trans­paren­cy options. Three options are incom­ing, all real­is­ti­cal­ly long-term if you’re devel­op­ing for the entire web and not one par­tic­u­lar platform.

JPEG + SVG Fil­ters in HTML = masked lossy images. Allows for both raster and vec­tor mask­ing, but only for Fire­fox 3.1 for now. This brings the addi­tion­al ben­e­fits of the entire SVG fil­ter line­up avail­able any­where in HTML.

Webkit’s CSS Masks applic­a­ble to any visu­al ele­ment entire­ly using CSS pro­ter­ties. Allows for a raster mask or ref­er­enc­ing an SVG. Isn’t as exten­sive as the SVG Bling approach — it’s intend­ed pure­ly for mask­ing — but has low­er bar­ri­er for entry.

JPEG-XR, a new JPEG for­mat seem­ing­ly unre­lat­ed to the orig­i­nal bar the name. High­er qual­i­ty, small­er file­size, options for loss­less encod­ing, and an alpha chan­nel. Con­spir­acists may ques­tion Microsoft­’s involve­ment after the OpenXML trav­es­ty but as long as licenc­ing is free and adop­tion high­er than the wavelet-encod­ed JPEG stan­dard from a few years back, I’m happy.

That which rates a last men­tion is Microsoft­’s Com­pos­i­tor fil­ter. The doc­u­men­ta­tion hints at being able to per­form cal­cu­la­tions using an alpha chan­nel, but I’ve no idea if that trans­lates to final ren­dered trans­paren­cy since the exam­ples are too com­plex for me to spend time decyphering.

A while back I cre­at­ed a test design called Sans & Serif that need­ed a large high-colour trans­par­ent image with alpha blend­ing (the leaves). PNG 32 did the job, but it’s non-lossy so the file size was ~210k. I end­ed up con­vert­ing the leaves to 8‑bit with some visu­al trick­ery to hide the aliased edges. I’m look­ing for­ward to doing this properly.