Putting my blog on a diet

When ever I include images in a post I use the services of TinyPNG to compress these images. Still I noticed that from time to time loading a blog page took a (relative) long time.

Using the built-in developer tools from Safari I took a look at the Network tab to see that was taking a long time.

Safari Resources tab

Most of the resources are below 100 KB, but one really jumped out. The resource named 6xiafkuy0vuaputrk27fy0lh.jpg was a whopping 260 KB. Clicking on it (or just by reviewing the HTML code for the page) revealed that is particular resource is used within the heading of my blog and also as the favicon. Ouch…

Although I had been using TinyPNG to compress the image, I had neglected to change the dimensions of the image down to something more reasonable. Currently the image is 1000 by 1000 pixels.

The avatar image as favicon is being displayed (depending on the device visiting) using the dimensions 32 by 32 pixels up to 96 by 96 pixels. The image in the heading is roughly using the dimensions 58 by 58 pixels.

Changing the dimensions (scaled it down to 100 by 100) and running it through TinyPNG (despite their name they handle JPEG as well) resulted in a final size of 6 KB.

Sorry for wasting your bandwidth all this time.