🏠 back to Observable

Use optimized favicon


#1

So out of curiousity I checked how much stuff is cached when I refresh a notebook:

Only 25.4 KiB, not bad! And 21.5 KiB of that is the favicon.

So I downloaded that and threw it through ImageOptimizer, now it’s 8,5 KiB. Woohoo!

(Yes, I know that this topic and that screenshot up there alone means this won’t pay back for itself in terms of savings before the heat death of the universe happens. I’m just having some fun :P)


#2

Nice catch :slight_smile: that was a quick little performance win - we’ll ship optimized favicons in the next mini-release. Thanks!


#3

8kb is still a lot. Here’s a 4kb image (and the diff using imagemagick’s compare tool). I suspect you can still go even smaller!


.


#4

Sorry @tom, I’m switching the solution to this one :stuck_out_tongue:


#5

Squeezing your image through Trimage (which is more aggressive than ImageOptimizer) made it go from 4.83 KiB down to 4.5 KiB, but I don’t know for sure if Trimage does or does not remove some technically-mandatory metadata so there is a risk no longer is accepted as a valid favicon:


#6

So, pushing this to its natural endpoint:

3-bit colorspace (5 colors + transparency) with pngquant + trimage = 3.3 KiB

2-bit colorspace (3 colors + transparency) + trimage = 2.8 KiB:

1 bit colorspace (black + transparent) + trimage = 1.8 KiB, but very visible edges: