Improving website scalability: image sizes

One of non-trivial tricks involved in web site scalability is the optimization of all image files. One of the sites I am helping to take care of has a front page with more than 350KB in .jpeg images. And, obviously, it takes lots of time to load and, considering the number of accesses, the bandwidth is huge. Usually, those images can be optimized in photo editor, or saved with higher compression or lower quality, but sometimes there is not much else you can do. Or you think so.

One quick trick to improve this situation is by converting some images to png with ImageMagick and running pngcrush on them. A simple script can be used to do so:

    #!/bin/bash
    totalsize=0
    for file in *jpg; do
            # file.jpg becomes file.png
            newfile=${file/jpg/png}
            # convert to png
            convert $file 1.png
            # compact with pngcrush
            pngcrush -brute 1.png $newfile > /dev/null
            # calculate old and new sizes
            newsize=$(wc -c < $newfile)
            oldsize=$(wc -c < $file)
            if [ $newsize -lt $oldsize ]; then
                    echo "$file: reduced from $oldsize to $newsize bytes"
                    # remove old jpg file
                    rm -f $file
                    # replace all references to old file everywhere
                    sed -i -e "s/$file/$newfile/g" *
                    totalsize=$[$totalsize + $oldsize - $newsize]
            else
                    # old file is smaller, remove new file
                    rm -f $newfile
            fi
    done
    echo "total reduction: $totalsize"
    # remove temporary file
    rm -f 1.png

By running it on the website in question, it managed to shrink the front page by about 200KB of image data. Considering 10000 daily accesses, it would save about 2GB of network traffic per day.