#Handsumとは何か?LQIPをさらに軽量にした超軽量プレースホルダー画像フォーマット #七12
Handsum は、従来の LQIP(Low-Quality Image Placeholder) をさらに小さくした 超軽量プレースホルダー画像フォーマット です。https://nigeltao.github.io/blog/2026/handsum.html 従来のLQIPが「ぼやけた小さなJPEGやWebP画像」を送るのに対し、Handsumは 画像全体を数十ビット程度の数値へ圧縮し、CSSやJavaScriptだけで元の雰囲気を再構成する という発想です。( Gist ) LQIPとは LQIP(Low-Quality Image Placeholder)は、 ページ表示 ↓ 小さい画像を即表示 ↓ 本物の画像へ置換 という仕組みです。 例えば 20×20 JPEG 16×16 WebP Base64画像 などを使います。 ユーザーは真っ白な画面ではなく、 ぼやけた画像を先に見られるため、 体感速度が向上します。( Cloudinary ) Handsumとは Handsumは 画像そのものを保存するのではなく、画像の特徴だけを保存する という方式です。 イメージとしては 元画像 ↓ 3×2程度まで縮小 ↓ 色空間へ変換 ↓ 数十ビットへ圧縮 ↓ 整数値 になります。( Gist ) つまり JPEG ↓ 画素を保存 ではなく Handsum ↓ 画像の特徴だけ保存 です。 BlurHashとの違い よく比較されるのがBlurHashです。 方式 保存内容 サイズ LQIP 小さい画像 数百B~数KB BlurHash 周波数係数 約20~40文字 ThumbHash 色+周波数 約20~30B Handsum 超圧縮特徴量 数十ビット~数十B程度 Handsumは BlurHashよりさらに情報量を削る 方向を目指しています。( Gist ) なぜ作られたのか 最近のWebでは 画像100枚 ↓ LQIP100枚 となります。 すると LQIPだけでも 数百KB になることがあります。 Handsumなら 例えば 画像100枚 ↓ 100個の整数 だけ送れば済みます。 つまり HTML自体が軽くなる のです。 どのように復元するのか ブラウザ側で 整数 ↓ 色 ↓ 3×2セル ↓ CSS ...