I did some research at work for PNG image optimization, to find out what are the best tools to compress PNG RGBA to paletted png with alpha channel, that would also fit into a good workflow.
In previous projects it was common to compress each picture individually and that, of course, was a long and repeating process. Screen’s often change during development and if you need to do a task over and over again, you might end up finding a solution that shortens the process.

My goal was find a solution and tools that would cover the following things:

• Tools that are available on linux and OSX from commandline, to execute them via script
• a good compression ratio in a short amount of time
• Tools that transcode from rgba to paletted images with alpha cannel
• Tools that can read, modify (optional) and delete Header-Chunks
• Tools have to be opensourced or must be at least for free

For comparsion I’ve choose the following tools:

• pngcrush [ http://pmt.sourceforge.net/pngcrush/ ]
• pngrewrite [ http://entropymine.com/jason/pngrewrite/ ]
• imagemagic (convert binary) [ http://www.imagemagick.org/script/convert.php ]
• pngnq [ http://pngnq.sourceforge.net/ ]
• pngout [ http://www.jonof.id.au/kenutils ]
• optipng [ http://optipng.sourceforge.net/ ]

Tested Tools

Here is a brief overview of what matters: Short description + usage example. When I mention quantize, i mean the reductions of colors from rgba to a paletted color map with alpha channel.

Pngcrush

Can not quantize as described above but processes fast when optimizing the IDAT Stream.
Usage: pngcrush -reduce alpha24.png alpha24-crushed.png

Pngrewrite

Can handle only paletted images but the result then is very good.
Usage: pngrewrite alpha24.png alpha24-pngrewrite.png

ImageMagick

Comes with a hugh amount of features but is no good choice for compression, it produces partial bigger file sizes than the original. I was not able to archive any good results – thus I’m just mention it here for the completeness, but do not enlist it in the charts.

Pngnq

Can not quantize as described above but works very well for all other purposes.
Usage: pngnq -s1 -e"-nq256.png" -v alpha24.png

PNGOUT

The main feature is quantisation as we want it and it does the job very well. It “Quantizes a 32-bit RGBA PNG image to an 8 bit RGBA palette PNG using the neuquant algorithm”.
Usage: pngout alpha24.png alpha24-pngout-default.png

OptiPNG

Is seems to be very similar to Pngcrush (the Author states that OptiPNG is inspired by Pngcrush) but the results are a little bit better and the arguments differs.
Usage: optipng -full alpha24.png -out alpha24-optipng-full.png

Feature Overview

Benchmark and Comparsion

I’ve taken one RGBA TrueColor image with a dimension of 300×300, with lossless compression. The arguments used, are those in the usage examples described earlier.

Original file size in Bytes “4739″

As you can see, pngnq had the best results and therefor I’ll use it for the next step.

That means I’ve saved 2135 bytes and the optimised image is only 45,05% of the original file size. In comparsion to ImageOptim, that is a GUI App for OSX and only can save up to 25,5% (74,5% of original file size), the result ist pretty impressing. It is worth to mention, that none of the Adobe Products, besides Fireworks, can produce 8bit-paletted-with-alpha images.

Note:
The optimisation is meant for UI-images. Sprites, buttons, etc – not for user generated content or similar.

Buildprocess

If you need to do a task over and over again: automate it

My idea is to have a source image in full quality, that gets processed via a script and then gets stored into a destination folder. However, some images needs a special treatment and therefore it makes sense to have a configuration file.

In order to not process images twice, you could modify the iTxt for instance, to mark it as processed and if the image has such header chunk – do not process it. If you drop a new image into the source folder, the image doesn’t have the chunk, thus it gets processed. But that’s just micro-tuning, because pngnq and pngrewrite are fast enough … IMHO … because you shouldn’t have more than 10 – 20 images to process.

Problem: When you render the form as a whole (i.e: <?php echo $this->form ?>), everything works fine, but when you render each element separate, the zendDijit {"id":"yourFormId","params":{"dojoType":"dijit.form.Form"}} is missing. This causes to break the validation/xhr process, because dijit.byId() returns only an ‘undefined’ value.

Solution: Go to your View, where you render your form and add the following:

$form = $this->form;
$this->dojo()->setDijit($form->getId(), array('dojoType' => 'dijit.form.Form')); 

// add form tag ...
// add elements ...

It took me nearly 3 hours to figure this out
Hope this helps someone.

In this post I’ll show you the one and only correct way to use sprites and the very little benefit if you use sprites the wrong way.

It’s in everyones mouth but a lot of people do not understand fully what sprites are supposed to optimize. Well we want so badly to reduce the HTTP requests but as I’ll show you, a lot of people do not understand how to write efficient selectors for sprites.

Here’s a meaningfull chart I’m going to explain a few pixel down.

The first “wrong way” uses multiple images and no sprites and show you what you might except. For each image a request gets done. 22ms were used.

The second wrong way shows you something, a lot of people wouldn’t have guessed. For each CSS selector a request is made! The reason is, that the Browser does not know that the image has been already requested and requests it again. The browser then, when it does it’s pre-processing understands, that tghe ressource has been already requested and grabs it ideally from the browser-cache. However that’s just 4ms faster than without sprites.

.icon-mail 			{ background: transparent url(images/sprite.png) 0 0 no-repeat }
.icon-mail-add 		{ background: transparent url(images/sprite.png) 0 -40px no-repeat }
.icon-mail-attach 		{ background: transparent url(images/sprite.png) 0 -80px no-repeat }
.icon-mail-delete 		{ background: transparent url(images/sprite.png) 0 -120px no-repeat }
.icon-mail-edit 		{ background: transparent url(images/sprite.png) 0 -160px no-repeat }
.icon-mail-error 		{ background: transparent url(images/sprite.png) 0 -200px no-repeat }
.icon-mail-go 			{ background: transparent url(images/sprite.png) 0 -240px no-repeat }
.icon-mail-link 		{ background: transparent url(images/sprite.png) 0 -280px no-repeat }
.icon-nail-open 		{ background: transparent url(images/sprite.png) 0 -320px no-repeat }
.icon-mail-open-image 	{ background: transparent url(images/sprite.png) 0 -360px no-repeat }

The third and correct way uses one selector containing the sprite and a few others to change only the position of the sprite. As you can see in my fancy chart, the benefit is: 4ms for the whole test document. Thats 5.5 times faster than the first example and unbelievable 4 times faster than the second example, which uses the very same sprite!

.icons { background-image: url(images/sprite.png); background-repeat: none }
.icon-mail 			{ background-position: 0 0 }
.icon-mail-add 		{ background-position: 0 -40px }
.icon-mail-attach 		{ background-position: 0 -80px }
.icon-mail-delete 		{ background-position: 0 -120px }
.icon-mail-edit 		{ background-position: 0 -160px }
.icon-mail-error 		{ background-position: 0 -200px }
.icon-mail-go 			{ background-position: 0 -240px }
.icon-mail-link 		{ background-position: 0 -280px }
.icon-nail-open 		{ background-position: 0 -320px }
.icon-mail-open-image 	{ background-position: 0 -360px }

ps: You need something like firebug or httpwatch to check it for yourself.

if you install apache/php and get the following error:
Warning: Unknown: failed to open stream: Permission denied in Unknown on line 0
Then consider to check the permissions.

What user/group has the apache?
ps -ef | grep apache

Who owns the files in your htdocs?

…

Because it is most likely that you need to chown your htdocs, and or add a user to the correct group.

Yesterday I ran into a problem with zend form and zend validate which was quite confusing. I wanted to check if a multiCheckbox has less or equal 2 selections. I really thought there would be some “shipped” validator but there isn’t. Then I’ve tried to write my own validator for that purpose, but Zend Validate didn’t pass the MultiCheckbox values as an array but as strings and I wasnt in the mood to hack the Zend “core” itself. Then I tried to use addError(), markAsError() or set _errorsExists explicit but that didn’t work either, as described here. Maybe I am blind and there is an much easier way … but the following works quite fine for me.

1. Create an Validator which always fails.
2. Check right after the isPost() condition if “your condition” matches.
3. Assign the “will-always-fail” validator to your element and you’re done.

// save as 'Zend/Validate/CustomError.php
require_once 'Zend/Validate/Abstract.php';

class Zend_Validate_CustomError extends Zend_Validate_Abstract  {

    const SOME_ERROR = 'someError';

	// configure to whatever you like, or override it with setMessage()
    protected $_messageTemplates = array(
        self::SOME_ERROR => "is not valid"
    );

	// sets the element as invalid
    public function isValid($value)
    {
        $valueString = (string) $value;
        $this->_setValue($valueString);
		$this->_error();
        return false;
    }

}

And in your form controller add right after the isPost() condition:

if(sizeof($_POST['yourelement'])>2) {
	$customError = new Zend_Validate_CustomError();
	$customError->setMessage('You must select less than 2');
	self::getElement('yourelement')->addValidator($customError);
}

If you try to get a serialized array (php_serial) from the flicker api from a group (flickr.groups.pools.getPhotos), you may find your self a little bit lost, because you do not get the photos you want, only the amount of how many. You double check if everything is set to public, your account is ok and even try to upgrade it – but that’s not it. You used the usefull API querybuilder from flicker and then it works in that case and you wonder why it doesn’t in your application. The simple solution is, it doesn’t work with the php_serial format. Skip this parameter and you get your set as XML response. The only thing you need to do is, use the XMLReader and iterate through the result set.

It took me quite a while to figure this out – like 1,5 hours – so eventually this post is usefull for someone

There are some selector hacks out there, but I don’t like them – ie: (@media screen and (-webkit-min-device-pixel-ratio:0) {}). My personal favourite is done with Prototype because I use it a lot and it is pretty simple:

<link rel="stylesheet" type="text/css" media="none" href="/css/safari.css" id="safari" />
<script type="text/javascript">
	// matches all safari/chrome versions
	if(Prototype.Browser.WebKit) {
		$('safari').media="all";
	}
</script>

If you set the media attribute to none – no media device will display it. By adding the little if statement, you can check if the Browser is WebKit, which is the engine name of safari or chrome and alter the media value to all.

If you do not use prototype, you can do it like this:

<script type="text/javascript">
	// targets safari 3 - not 2!
	if(window.devicePixelRatio) {
		document.getElementById('safari')media="all";
	}

	// targets all safari or better said webKit engines
	if(navigator.userAgent.indexOf('AppleWebKit/') > -1) {
		document.getElementById('safari')media="all";
	}

	// prototype way + targeting old and new webKit with two stylesheets
	if(Prototype.Browser.WebKit) {
		var mySafari = (window.devicePixelRatio) ? 'safari3' : 'safari2';
		document.getElementById(mySafari)media="all";
	}
</script>

Note, this method shouldn’t be used for “accessible” Websites, because it relies on javascript. You can do it then serverside as well by “sniffing” the UserAgent from the HTTP Request and add your little switch there – whereas this isn’t a 100% safe method though, because some people alter their UserAgent strings and there are tons of vendors/versions thus your detection may fail from time to time.

An alternative to this way is to load the needed script on the fly, so you can reduce a HTTP Request, by writing the link tag dynamically to your document. However – the describe method above is shorter

it was time for a change – so I’ve made a new theme for my blog. Nothing special but it looks quite ok (haven’t tested it in IE, I don’t care bout it – but in safari, firefox, chrome and opera it looks good). At least YSlow say it has Grade B and if only the google syntax highlighter plugin would produce valid xhtml, then it would be valid …

just in time. One of our clients requested it (minified + packed) last week and today I found an updated version and it seems t work fine: http://code.google.com/p/protosafe/

It is fairy a common task to cut a string – ie when a teaser text should not be longer than n characters. A lot of people use substring() or substr(), depending on their favourite language. However with regex it is really easy and you do not need to cut a word:

// in php it would be:
preg_match("/(.{1,15}(\s))/", $yourString, $matches);

// or in java something like this - maybe ; )
Pattern myPattern = Pattern.compile((.{1,15}(\\s)));
Matcher myMatch = myPattern.matcher(yourString);

To put it in plain english:
* get the first 15 characters (same as substring)
* BUT – and here goes the magic: match less until you find a whitespace character and cut the rest.

So it could look like this in php:

<?php
// you could check the length of the string but actually you don't need to ...
$myString = "People seem to enjoy things more when they know a lot of other people have been left out of the pleasure.";

preg_match("/(.{1,15}(\s))/", $yourString, $matches);
echo $matches[0]." ...";

// would print:
// People seem to ...
// and with {1,27}
// People seem to enjoy things ...
?>

beer o’clock! cheers