このツールについて
プレースホルダーとは、実際の画像の読み込みが完了する直前の一瞬にページが表示するもの——これから表示される写真をぼかしたような色合い、あるいは単なる単色の四角形——であり、レイアウトががたつかず、実際のコンテンツがすでに読み込まれつつあるように感じさせます。「ぼかし写真」スタイルはLQIP（Low-Quality Image Placeholder、低品質画像プレースホルダー）と呼ばれることが多く、元の写真をほんの数ピクセル——長辺で20〜40px程度で十分——まで縮小し、必要に応じて少しぼかしを加えて柔らかくし、その極小の結果を再エンコードします。ピクセル数が非常に少ないためエンコードするデータもごくわずかで、出力は通常数百バイトから数KB程度に収まり、別ファイルとして取得する代わりにbase64のData URIとして直接埋め込めるほど小さくなります。
プレースホルダーをData URIとして埋め込むということは、ページ自身のHTMLやCSSの中にそのまま含まれるということであり、実際の写真が届く前に何かを表示するためだけに追加のネットワーク通信を発生させる必要がありません。この極小でわずかにぼかした結果をCSSで実際の画像の表示サイズまで引き伸ばせば、これから届く写真の柔らかいプレビューのように見えます。これはMediumのようなサイトや多くの商品写真ギャラリーで使われているフェードイン読み込み効果そのものの仕組みです。まだ元となる写真がない場合——スケルトンスクリーンを作る、大まかなレイアウトのモックアップを作る、あるいはユーザーがまだアップロードしていないコンテンツのためのスペースを確保する場合など——は、代わりに2つ目のモードに切り替えて、任意のピクセルサイズの単色・グラデーション・ストライプのプレースホルダーを生成できます。ダウンロードとコピー可能なData URIの出力方法は同じです。すべてはブラウザ内でローカルに処理され、何もアップロードされることはありません。
よくある質問
LQIPデータURIの「小さい」とはどのくらい小さいのですか？
デフォルトの小さな寸法（長辺で50px未満）での典型的な出力は、base64文字列として数百バイトから約1〜2KB程度になります——ページに意味のある重さを追加することなく、HTML/CSS/JSに直接インラインで埋め込むのに十分小さいです。これがLQIP技術のポイント全体です：本物のフルサイズ画像がバックグラウンドで読み込まれる間、すぐに何かを表示すること。
「写真から」モードと「単色/グラデーション」モードのどちらを使うべきですか？
実際の画像がすでにあり、これから表示されるものを視覚的に示唆するプレースホルダー（実際のコンテンツのぼやけたプレビュー）が欲しい場合は「写真から」を使用してください——これによりユーザーはよりスムーズで情報量の多い読み込み体験を得られます。実際の画像がまだ分からない/準備できていない前に汎用的なプレースホルダーが必要な場合（例：まだ写真が選ばれていないギャラリーのスケルトンローディング状態）、またはLQIPよりもさらにシンプルで小さいものが欲しい場合は「単色/グラデーション」を使用してください。