Flutterby™! : ThumbHash

ThumbHash

2023-03-24 16:56:55.245438+01 by Dan Lyke 3 comments

A very compact representation of an image placeholder. Store it inline with your data and show it while the real image is loading for a smoother loading experience.

[ related topics: Skating ]

comments in ascending chronological order (reverse):

#Comment Re: ThumbHash made: 2023-03-24 17:50:16.513325+01 by: markd

I've always disliked stuff like that (and progressive jpegs, and the aol ART format, and...). Having bad vision, whenever I see something blurry, my eyes itch - is there some goop on my eyes? is there something on my lens? Is my retina tearing? Oh. Just a slowly loading picture of a wombat.

#Comment Re: ThumbHash made: 2023-03-24 20:07:01.385581+01 by: Dan Lyke

Interesting. Thank you, that helps me think about accessibility!

#Comment Re: ThumbHash made: 2023-03-26 13:00:50.445325+02 by: DaveP

I’ve been on mastodon (using the web ui on iPad) with “all” images off for a few months now (avatars still load, as do movie previews for some types of movies), and it’s interesting watching what fails in ways I’m pretty sure nobody considered. For example, there are big empty spaces in the ui with a little bit of text in the middle saying “media hidden” but the space for the media (as defined by the 16:9 ratio for images, also in the prefs to try and make things less busy) is still allocated. Avatars, as I said, load. T often slowly enough that I watch them loading as I’m scrolling down the page to get to where I left off when I went to sleep last night.

And yeah, similar to markd, loading a blurry preview just makes me think my vision is fuzzy.

I really wish though, that a bunch of my web-developer friends would come for a visit. We’ve got “broadband” here, but we’re the last house on the segment from Comcast, and when it rains that gets flaky. Switching to cellular happens in the ends of the (long, linear) house farthest from the base station. Some evenings, watching the network indicator flip from cellular to WiFi is almost seizure-inducing. Anyway, it’s a different internet, and a lot more similar to a decade ago, but with today’s JavaScript bloatware that won’t allow some things to even show until the ads have been fetched from yet another server with high latency, or worse, having to wait for that request to time out.

Add your own comment:

(If anyone ever actually uses Webmention/indie-action to post here, please email me)

Format with:

(You should probably use "Text" mode: URLs will be mostly recognized and linked, _underscore quoted_ text is looked up in a glossary, _underscore quoted_ (http://xyz.pdq) becomes a link, without the link in the parenthesis it becomes a <cite> tag. All <cite>ed text will point to the Flutterby knowledge base. Two enters (ie: a blank line) gets you a new paragraph, special treatment for paragraphs that are manually indented or start with "#" (as in "#include" or "#!/usr/bin/perl"), "/* " or ">" (as in a quoted message) or look like lists, or within a paragraph you can use a number of HTML tags:

p, img, br, hr, a, sub, sup, tt, i, b, h1, h2, h3, h4, h5, h6, cite, em, strong, code, samp, kbd, pre, blockquote, address, ol, dl, ul, dt, dd, li, dir, menu, table, tr, td, th

Comment policy

We will not edit your comments. However, we may delete your comments, or cause them to be hidden behind another link, if we feel they detract from the conversation. Commercial plugs are fine, if they are relevant to the conversation, and if you don't try to pretend to be a consumer. Annoying endorsements will be deleted if you're lucky, if you're not a whole bunch of people smarter and more articulate than you will ridicule you, and we will leave such ridicule in place.

Flutterby™ is a trademark claimed by

Dan Lyke

for the web publications at www.flutterby.com and www.flutterby.net.