Lossless image optimization — even for JPG!

As you may know, I run an arcade site. It is doing fairly well, but I’m always looking for ways to gain an edge that will put me ahead of the competition.

The most recent thing I am trying is image optimization. With the announcement by Google that they are adding site speed to their page ranking equation, it is more important than ever to have a fast site.

I get all my games and game thumbnails from Mochi, a free source for Flash games. I’ve written code to do this all automatically for me. The problem is, some game authors think it is okay to include a 200KB thumbnail (they are only 100x100px!). Alone this might not be the end of the world, but when you get a page of 50 thumbnails and each is 60KB to 200KB, then you have a problem.

The solution? Image optimization!

It is important to note that image optimization is not image compression. Compression generally results in degraded image quality. Optimization programs take the image file that already exists, and re-organizes the data in the image file so that the end result is the same, but it takes up less space. Optimization programs sometimes also remove data that isn’t relevant to the display of the image, like unused colors in a GIF color palette or EXIF data in a JPG.

I had a really hard time finding a JPG optimization program that didn’t reduce the quality of the picture, but finally found a 5 year old package that does the job great: littleutils. Note: The download link on that page is wrong, try this one instead.

This collection of little utilities includes 3 great image optimizers for Linux: opt-png, opt-jpg, opt-gif. These items do a brute-force style optimization of the image, trying many methods until it finds the method that produces the smallest file size for each individual image. Even though these tools are 5 years old, the opt-png utility produced smaller file sizes than the popular pngcrush and pngout utilities, and the punypng web service. Amazing!

By using these tools, I reduced the file size of my thumbnails by an average of 35%! That is a huge difference, and will make a huge difference to my visitors.

I’ve also updated my automated game downloading script to tie into these utilities, so the optimization happens without me having to ever touch it.

If you need help installing these utilities, let me know. There were a lot of optional dependencies that made a huge difference in the size of the optimized files, so make sure you install all of them before compiling littleutils.

Read More

Raphaël JavaScript Library

I’ve been playing with the Raphaël JavaScript library this weekend quite a bit, and I really like it. Raphaël lets you programmatically draw and animate vector graphics on the web.

What I really want to do with it is to dynamically generate avatars to be used on the Fake Name Generator. For example, the code would pick a skin color from a predetermined range of skin tones, a hair style, a hair color, lip style, lip color, eye shape, eye color, etc etc. It would then layer all these items together into an SVG graphic. Using a bit of JavaScript, I could even make the eyes blink every few seconds. If needed/desired, this SVG graphic could then be converted to a PNG image.

But that is a bigger task than I’m ready to really start at the moment, so instead I’m playing around making a simple matching game. The goal is to create a mix of PHP and Raphaël to allow the developer to define a list of images that are used to automatically create a matching game. Unlike most matching games available online, mine will allow the developer to specify two different images that match. For example, a picture of a person and an image with the person’s name would be a matching set. Or a picture of state and a picture of the state’s flag. Things like that.

I haven’t gotten very far yet. As of this writing, all it can do is generate 3 pairs of cards. Each pair of cards has a different color. The game lets you click cards and try to match them. Very basic.

Once it is finished, I plan on releasing the source code under a friendly license and then using it on an LDS gaming site I’m working on.

Anyways, check out the matching game or the demos at Raphaël.

Read More