raw code

There were times, in which table layouts and pixel-bungling was part of the daily life of a web developer. Fortunately, those days are past and nearly every layout can be implemented with XHTML or better HTML5 and CSS only. A nice side effect is that, indirectly, the loading speed of the complete site is reduced by lowering the number of HTTP requests.

Nevertheless, sometimes tiny graphics are still needed for any purpose. Okay, the only real application of such graphics, I can think of is, to deliver a small valid image to the client after user information were transfered to a web tracking software on the server. If you want to optimize the size of the transfered data, it would also be a good idea to optimize the HTTP headers, especially the cookie size. What use could it otherwise be, if the content is smaller than the header?

Whatever the case, I tried to create the smallest possible GIF image, which is valid and works in every browser. There are approaches to use even less bytes, but I had a greater focus on validity and compatibility. The result is a 1x1 pixel image that is 43byte with the transparent extension of GIF and 35byte in the non transparent mode. If the image is transparent, it does not matter what colors are used, but if the image is really used as tracking code, it's sureley not a bad idea to send the company color as little gimmick with every request :-)

Okay, let's come to the important part of this post. I have written the following function to generate the byte stream of the GIF image. The paremeters are the RGB values in the interval [0, 255] and an additional flag whether to use transparency or not:

<?php

function getSimpleGIF($r=0, $g=0, $b=0, $t=true) {

	if ($t) {
		$t = '21f90401000001002c00000000010001000002024c01003b';
	} else {
		$t = '2c00000000010001000002024c01003b';
	}

	return pack('H32CCCH*', '47494638396101000100900100ffffff', $r, $g, $b, $t);
}

?>

If you want to send the image directly to the client, you can use the following additional function:

<?php

function sendSimpleGIF($r=0, $g=0, $b=0, $t=true) {

	header('Content-Type: image/gif');
	header('Content-Length: ' . 8 * (4.375 + $t));

	echo getSimpleGIF($r, $g, $b, $t);
}

?>

You could also write the data into a file to let the webserver deliver the image directly:

file_put_contents('simple.gif', getSimpleGIF($r, $g, $b));

In order to obtain the greatest performance within the script, it would seem to send the data without hard drive access directly out of the memory. The following snippet can be used to generate the data needed to have a static string:

<?php

echo "\"\\x", wordwrap(bin2hex(getSimpleGIF($r, $g, $b)), 2, "\\x", true), "\"";

?>

The command creates a hex-string, which is held in memory direclty after the parsing of the script. For lazy people who only want to copy the result into their script, can use the following generated code:

# a red pixel image
echo "\x47\x49\x46\x38\x39\x61\x01\x00\x01\x00\x90\x01\x00\xff\xff\xff\xff\x00\x00\x2c\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02\x4c\x01\x00\x3b";

# a transparent pixel image
echo "\x47\x49\x46\x38\x39\x61\x01\x00\x01\x00\x90\x01\x00\xff\xff\xff\x00\x00\x00\x21\xf9\x04\x01\x00\x00\x01\x00\x2c\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02\x4c\x01\x00\x3b";

To make the image visible in the development setup, it can be certainly easy scaled up with HTML. Another possibility would be the favicon when viewing the image, because the pixel is also scaled to make it visible there.