🏠 back to Observable

Feature request: Supply a fixed thumbnail


For graphics-based notebooks that make heavy use of random number generators / noise, or are slow to render, it would be cool if we could supply a link to a canned thumbnail (which does not display in the notebook itself), rather than relying on the thumbnail daemon (it would prevent needless repeated notebook updates in a futile attempt to appease the PRNG gods, and other shenanigans).


Totally. We’ve even occasionally resorted to directly overwriting our notebooks’ thumbnails in the database ourselves!

It’s on the wish list.


Sorry for the trouble—the thumbnail daemon isn’t as reliable (nor are the results as beautiful) as we’d like. We’ve got some improvements planned and we’ll keep you posted as we’re able to implement them.


One thing I’ve noticed is that some of the first-party notebooks use images at the top which are larger or differently shaped than ideal for readability of the notebook itself, I’m guessing to make the thumbnail work out properly. Some people’s notebooks seem to have been especially tweaked for the purpose of getting the thumbnail to look nice, and some notebooks where there was no explicit effort put in have quite bad thumbnails as a result.

Maybe if there’s a cell labeled “thumbnail” anywhere in the notebook (e.g. at the bottom) the thumbnail daemon could default to using that one? Then in problem cases (e.g. a notebook requiring expensive computation of its interesting drawings) a pre-rendered image can be stuck in there explicitly.


The thumbnail daemon selects the first image, SVG or Canvas element that is at least 320px wide and 200px tall. If there is no such element, then the top part of the notebook is used (immediately below the title). When we improve our publishing flow, we plan on offering greater control over the thumbnail, as well as the title and slug.

Fix notebook thumbnailer

Is there some context that allows to determine that the notebook is run by the thumbnail daemon?


Yup, the user agent string. I’ve created a demo here: https://beta.observablehq.com/@mootari/custom-notebook-thumbnail


@mootari Just saw your notebook -

That was smart workaround :slight_smile:


Unfortunately it relies on the (default) user agent string, which could change at any point.

@mike Please don’t change it? Pretty please? Or standardize it instead?


The user agent string will likely change in the next few months when we get better unicode support, better looking native inputs, and other improvements to thumbnails - but we’re also planning on making an explicit and reliable way to customize thumbnails and we’ll likely do both at the same time.


@mike The ‘first’ meaning the first rendered or the first cell from top to bottom?

I’ve got a map that I’d like to be the thumbnail – and it is first (top to bottom) but the (boring) bar chart gets thumbnailed for some reason. I’m guessing because it gets rendered first.


The first in document order, as in top-to-bottom.

I’m not sure why the bar chart is getting selected in that notebook. Our thumbnail daemon isn’t great with WebGL (and… many other non-trivial things), or it may be the thirty-second timeout.

We have plans to ship a better thumbnail daemon, and we also want you to be able to select a thumbnail explicitly when publishing. But neither of those features are our highest priority right now, so you might have to put a static hero image at the top of your notebook if you want to guide the thumbnailer in the right direction in the interim.


@mike I can understand that tweaking the thumbnail feature, which usually works great, is a lower priority. I’ll figure something out. Thanks for the quick response.