Screenshot of Page Speed in Firebug
I find the Page Speed tool from Google extremely helpful for optimising my websites. I have a tip which can save time if your website is failing the “Optimize Images” test. Using the in-built Smush.it is one option but if most of your images are jpegs, you can achieve the same result and save time using a command line tool called jpegtran with the -optimise parameter to do lossless compression and the -copy none parameter to strip out image meta-data.

Disclaimer: As with any image processing always keep a copy of the original images.

To install jpegtran in Ubuntu, do:
sudo apt-get install libjpeg-progs

  • To optimise a single jpeg image:
    jpegtran -copy none -optimise -outfile image.jpg image.jpg
  • To optimise all jpegs in the current directory:
    for img in `ls *.jpg`; do jpegtran -copy none -optimise -outfile $img $img; done
  • To optimise all jpegs in the current directory and all child directories:
    find . -name “*.jpg” -print0 | xargs -0 -I filename jpegtran -copy none -optimise -outfile filename filename

If you need to optimise various image formats, there is a PHP CLI tool called smusher which uses Smush.it and can work recursively on directories. Might be worth a look. It would be nice if Smush.it had a API – their FAQ mentions they are working on it.

In a previous tutorial we went through some tedious steps to generate 3 images that could be used to create a page shadow. The great thing about the GIMP is that anything you can do with a mouse and keyboard, you can also do via script.

We will generate the following images automatically:

Demo of what we will generate

Why script it?

  • It allows us to tweak settings and quickly re-generate the image to see the results. For example, we can ask ourselves, “I wonder what it’d look like if the shadow was a bit bluer?”
  • We can automatically generate multiple images (including, for example, a image suitable for a CSS sprite).
  • We can can adapt and re-use the scripts for different websites. For example, one website might use square angular edges, but another might use rounded corners – so you can adapt to use rounded corners in the background image by changing 1 line of the generation script.
  • Mice are evil – why involve a mouse when all we need is a keyboard?

Read on…

Ubuntu Logo 200x52

If you have a font file with a “ttf” extension you can easily install it in Ubuntu (v9.04) and use it in applications such as the Gimp. Essentially, all you have to do is drop it in the correct folder:

  1. cd /usr/local/share/fonts
  2. If the truetype/custom directory doesn’t exist already: sudo mkdir truetype sudo mkdir truetype/custom
  3. sudo cp where_you_downloaded_the_new_font/fontname.ttf /usr/local/share/fonts/truetype/custom
  4. sudo chown root.root /usr/local/share/fonts/truetype/custom/fontname.ttf
  5. fc-cache – Otherwise, the font will disappear at the next reboot.

The following text was created in the Gimp: It uses 3 free fonts, the “B” is Heavy Data, the “it” is Sans Bold and the “volution” is Ballpark:

ttf font demo