On My Header Image

In what is probably the biggest visual change since I first created this theme back in ’05 — yes, it’s that old! — on June 2, 2011 I replaced the header image with a picture I took a month prior in the Keukenhof.

The opportunity presented itself to experiment slightly with decent JPEG compression, rather than simply depending on GIMP’s output, which unfortunately is virtually guaranteed to be suboptimal. Since all I did was crop and resize, I used PNG as my working format. I might’ve been able to use jpegcrop and jpegtran, but since I was going to re-encode in a lossy manner afterward that would have been nothing but needless extra effort.

First I tried cjpeg, which doesn’t support a lot of input filetypes, so I had to save a copy as BMP.

cjpeg -quality 80 -optimize -progressive -dct float -outfile test80.jpg head.bmp

Then I discovered that imagemagick can do the exact same thing, optimized by default and everything. It also uses libjpeg under the hood, so the resulting image is exactly the same.

convert -quality 80 -interlace plane head.png test80.jpg

That results in JPEGs that are about as small as they can get without enabling options that might not be readily supported by all viewers. I wrote a (very) simple shell script to aid with a quick overview of size versus quality.

#!/bin/bash
#jpegs.sh
filename=$1
extension=${filename##*.}
filename=${filename%.*}
convert -quality 30 -interlace plane $1 ${filename}30.jpg
convert -quality 40 -interlace plane $1 ${filename}40.jpg
convert -quality 50 -interlace plane $1 ${filename}50.jpg
convert -quality 60 -interlace plane $1 ${filename}60.jpg
convert -quality 70 -interlace plane $1 ${filename}70.jpg
convert -quality 80 -interlace plane $1 ${filename}80.jpg

My rationale is that any quality under 30 is most likely too ugly and anything over 80 will result in a file size that’s too large for my intended purpose of using lower quality — but not low quality — images on the Internet.

I also decided it was time to get rid of my half-hearted concessions to Internet Exporer. This in no way inhibits readability of the content.

1 Comment

  1. […] with lossless cropping first. After scaling down, check how long your quality can go (also see a little helper script I wrote). In any case, you should avoid introducing any unnecessary compression steps with associated […]

    March 25, 2017 @ 15:24Permalink
    Image Optimization Guide | The One with the Thoughts of Frans

RSS feed for comments on this post· TrackBack URI

Leave a Comment

You must be logged in to post a comment.