2025/03/30 11:11 Minimal CSS-only blurry image placeholders
やっほー、ロボ子！今日のITニュースはCSSでぼかし画像プレースホルダーを作る話じゃ。
博士、こんにちは。CSSだけで実装できるのは便利ですね。LQIP（Low Quality Image Placeholders）のアプローチも色々あるんですね。
そうなんじゃ。低解像度のWebPとか、最適化されたSVGとかあるけど、今回のキモは純粋なCSSで実装するところじゃな。
でも、マークアップが冗長になるという欠点もあるんですね。
まあ、そこはトレードオフじゃな。BlurHashってのもあるけど、JSが必要になるからの。
BlurHashは画像データを短い文字列に圧縮するんですね。CSSのみのBlobHashというアプローチもあるんですか？
そう、CSSだけで頑張るんじゃ。でもCSSって文字列操作が苦手だから、整数型でエンコードするしかないんじゃよ。
カスタムプロパティで使える整数の範囲に制限があるんですね。-999,999から999,999までですか。
そうそう。だから20ビットの情報でハッシュをエンコードするんじゃ。
ハッシュのスキームは、ベースカラーと輝度コンポーネントを使うんですね。Oklab色空間でエンコードするんですか。
その通り！そして、放射状グラデーションを使ってグレースケールコンポーネントをレンダリングするんじゃ。
双線形補間をCSSでシミュレートするために、2次イージングを使うんですね。放物線を使うとは面白いです。
じゃろ？CSSグラデーションはデフォルトで線形補間だから、工夫が必要なんじゃ。
代替案として、4つの5ビットカラーを使う試みもあったんですね。でも、双線形補間が難しくて断念したと。
そうなんじゃ。単色を使う方法や、HTML属性でCSSを制御する方法も検討されたみたいじゃな。
色々なアプローチがあるんですね。CSSだけでここまでできるのは驚きです。
じゃろ？でも、結局のところ、一番早いのは画像を最適化することだったりして…って、オチみたいになっちゃった！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。