Josh (the blog)

Hey there. I’m Josh, a SydneyCanberra-based maker of Internets. I don’t update this very often.


8 bit PNGs with alpha transparency

To some developers, the title of this post might well read “Unicorns exist! News at 11!”. Exciting stuff, but not widely known in my experience. Not that unicorns exist in my experience. I digress.

The colours below are the palette generated with indexed transparency (left) vs. true alpha transparency (right) in a 256 colour 8 bit PNG by a lovely piece of software called Fireworks. Let me explain.

I’ve joined a new UI development team this past week that require pretty broad-based browser support for a bunch of sites (i.e. IE6 experience needs to not suck) and their process includes a PNG quantization step before hitting a live environment. This is cool, but the IE6 support necessitates not using alpha. Or so I’m told.

This prompted me to look up something that I discovered probably around a year ago but never got around to writing it up, nor particularly practicing!

I can’t remember where, exactly, though suspect Dave Shea might’ve had a pointer or an article that presumed knowledge of the technique. In the process of writing this article, I’ve also rediscovered a SitePoint article on the issue that’s quite helpful.

The bottom line is PNG-24 is great but impractical in older browsers for a host of reasons. While 8 bit PNG is not without its limitations (c’mon, 256 colours ought to be enough for anyone!), it’s clear that for graceful degradation and marginal improvements in file size it’s stil worth considering.

In terms of creating images there are a few challenges. First and foremost, everyone uses Photoshop but Photoshop sucks at save-for-web’ing 8 bit PNGs: you just don’t get the options you need. Fireworks hands you this in spades. I’m no Fireworks pro insofar as workflows and just getting designs done goes, so typically I’ll save for web to a 24bit PNG from Photoshop and then open that in Fireworks to export the alpha 8 bit image.

The Sitepoint article linked above suggests that [some] quantizers will give you the chance to do the same thing, but the issue is if you’re exporting an 8 bit PNG in the first place you’ve already lost the chance to create an image with alpha. Most front end devs will want to preview things like dithers, colour banding, etc., so handing control over to a CLI tool just isn’t going to fly. I’d contend that Fireworks is really the only viable solution in that it balances image optimisation and control. Of course, you’re welcome to run the PNG Fireworks outputs through a quantiser: it’s already 8 bit so your palette is locked in, and the quantiser is unlikely to mess with the alpha if it purports to support this.

The reasons are broader than just browser support: in my (limited) testing, PNG24 files could easily weigh in at twice the size of their RGBA 8 bit alternatives. On a 500x500px test that generated the paletts shown above, file sizes were as follows:

  • 8 bit PNG indexed: 7KB
  • 8 bit PNG transparency: 7.5KB
  • 24 bit PNG: 15KB

I’m going to make sure I actually take advantage of this feature in the future, as there are clear filesize benefits to be had as well as support for crappy, dwindling browsers. Sorry, IE6.

Quicktime X into Final Cut Pro errors

If you’ve made a screen recording using Quicktime X, you’ll likely have difficulty importing it into Final Cut Pro 7 because of its variable framerate.

The easiest way to resolve this is to take the file through Compressor first – ProRes 422 Progressive will be great. Frustrating, but whatever.

RTA: Damned if you do, etc.

Dear RTA, I know you just spent a lot of money finding out exactly how unpopular you are – now I’m telling you why. This one’s on the house.

Think of this as an (il)logic puzzle. Want to renew? Go get a green slip. Got a greenslip? Go get another safety check. Want to just give us money and do the others out of order? Nope, sorry, you can’t do that.

N/A in the Safety Check column actually means “you’re covered for now, don’t sweat it” – but you wouldn’t know it from the form. There’s a vicious red X if you’re not covered, but nary a tick if you are. Also, what’s with the grotesquely antialiased “i” rollovers?

Apply for a DUNS number? Nah.

DUNS numbers (Duns and Bradstreet) are needed for a few things business-related but you run your own business you’ve probably never got around to applying for one.

If you’ve registered a company in Australia, chances are you’ve already got a DUNS number. Surprising, huh?

Search for your business and a DUNS number will be available top left, just above the company name or ABN.

DUNS search

I discovered this while trying to register for Apple’s iOS Enterprise program, which requires a DUNS number as part of the application process. You can sign up for the developer program without one (and it’s cheaper), but to privately manage and distribute apps you need enterprise access.

As we prepare to launch our Equip Mobile program into schools, the ability to roll out software to all users in an organisation is something we need to be across!

Equip iOS Screenshot

MAMP’s MySQL status red & not starting

MAMP is a good way to setup a low-maintenance dev environment for OS X in very little time, but its handling of MySQL is quite annoying.

When you suspend/sleep a computer, often when you resume MAMP has lost track of the MySQL instance it started and can no longer connect to it. Not sure if this is a problem with the MySQL build being used, but as the problem has existed since 2009, I don’t have high hopes for it being fixed anytime soon.

The quickest solution is to kill off the process it had started previously and then hit “Start Servers” again – it just takes one line on the terminal.

killall -9 mysqld

Be aware that this will kill all running MySQL processes (including those outside of MAMP’s control) – this is normally fine, as no-one actually hosts websites on OS X!