I recently saw a video on “The royal game of ur”, this is a 4500 years old board game that was rediscovered in the 20th century. The rules of the game were not clear at first, but later on, in the 80s, a tablet containing the instructions was translated.
I thought it would be nice to recreate this game online. So I did.
When a user enters a website his browser loads multiple files. In my site it includes the HTML file, a few audio files and a few images. There are three main reasons why the files size should be kept to a minimum:
- This reduces the load on my server (I cheapen out and got me a shared server).
- This takes a smaller bite out of bandwidth allocation.
- This reduce the user load time which rewards me with smaller abandonment rate.
In this post I will be focusing on reducing the size of the background image as it is by far the larges asset on my site.
Let start with establishing a baseline, the artist provided me with an Adobe illustrator file which I opened using Photoshop. I saved the image as a 1024X1024 BMP file making, as expected, 3.00MB file. using the same dimensions, saving the file as GIF produced 606KB and saving the file as PNG gave 1.84MB. so far the GIF is a clear winner amoug the lossless compression formats. This is do to the fact, that although GIF is a lossless compression format, it is limited to 256 colors, so in realty it does act as a lossy compression for the (much) more then 256 colors background image. Converting from BMP using an online tool did better for the PNG (but not for GIF) making a 1.53MB file.
Time to bring the heavy guns: JPEG. Photoshop provides 13 different quality levels for saving in JPEG so I made 13 JPEG files, one at each level for comparison. If I was doing this in the future I would probably use one of the new lossy compression formats as they give a better compression-quality ratio. But at the moment many users browsers don’t support these newer formats.
Even with side by side comparison I struggle to see differences between the original image and the image saved as JPEG at quality 4. Zooming in made it easier to distinguish at that quality level but not so much at the quality level 6. I ended up using the file saved as quality 7 which is just 300 bytes larger than 6, reducing the image to 189KB.
Cutting the image to 189KB it’s a great improvement but we can do better.
Each of the board squares is decorated by 1 of 7 patterns. By leaving just a single pattern of each, we will smooth the surface. This I expect will cause the JPEG compression to be more effective and indeed I achieve a much better JPEG compression at the same quality level (138KB).
Since I’m using the canvas, I will use the drawImage() method to copy the patterns and paste them on the empty areas. This is increasing my code by 1.5KB so in total this technique saved an additional (189 – 138 – 1.5 =) 49KB. Awesome!
A close inspection will reveal that the patterns themselves are made from patterns, a property that could be exploited to shed even more bytes. This beginning to feel like over-engineering so I will add a low resolution image for small screens and stop here.
Be First to Comment