MacでBlurHashプレースホルダを生成
画像の遅延読み込み中に表示するBlurHash文字列、小さなぼかしサムネール、平均色を作成します。
Macでプレースホルダ画像作成
サンプルファイルを使ったアプリのスクリーンショット。
プレースホルダ画像作成の使い方
- 1
画像をドロップ
サイトやアプリで遅延読み込みする画像を、1枚または複数追加します。
- 2
詳細度を選択
ほとんどの画像には4 × 3が合います。詳細度を上げると元に近いぼかしになりますが、文字列は長くなります。
- 3
追加オプションを選択
BlurHashに加えて小さなBase64サムネールと平均色も必要な場合は、それらをオンにします。
- 4
「生成」をクリック
すべての値がアプリに一覧表示され、デコードした各BlurHashのプレビューとともに、Placeholders.txtとして「ダウンロード › OneMacTools」内の日付付きフォルダに保存されます。
- 5
値を画像と一緒に保存
各文字列をデータベースやコンテンツファイルの画像アドレスの横に保存し、実際の画像が読み込まれるまでの間に表示しましょう。
プレースホルダ画像作成でできること
各画像のBlurHash文字列（詳細度は選択可能）、小さなBase64サムネール、平均色を取得し、画像のアドレスと一緒に保存して、本来の画像の読み込み中に表示できます。デコードした各BlurHashのプレビューも一緒に保存されます。
こんなときに
- Webアプリやモバイルアプリで画像を遅延読み込みする
- 写真の読み込み中に空白のボックスが出るのを防ぐ
- 画像ごとに背景色を選ぶ
オプションの説明
- BlurHashの詳細度
- 4 × 3（推奨）、3 × 3、5 × 4、6 × 4、9 × 9から選べます。横方向と縦方向の色成分の数です。値を大きくすると画像の形をより多く捉えられます。4 × 3では28文字の文字列になります。
- 小さなぼかしサムネール（Base64）
- デフォルトはオン。長辺が最大16 pxの小さなJPEGをデータURIとして作成します。<img>タグやCSSにそのまま入れ、ぼかしをかけて引き伸ばして使えます。
- 平均色
- デフォルトはオン。画像全体の平均から求めた16進カラーを画像ごとに1つ作成し、読み込み中の無地の背景に使えます。
おすすめの使い方
- 画像の形に合わせて詳細度を選びましょう。横長の写真には4 × 3または5 × 4、正方形や縦長の写真には3 × 3。
- 平均色を画像のコンテナの背景に使いましょう。最も軽いプレースホルダで、デコードも不要です。
- ページが読み込み時にずれないよう、画像ボックスの幅と高さを実際の画像に合わせて設定しましょう。
- 詳細度を選ぶ前に、保存されたプレビューを見て、実際にどう見えるかを確認しましょう。
- 画像を差し替えたら、そのたびにプレースホルダを作り直してください。そうしないと、ぼかしが合わなくなります。
対応形式
- 入力
- JPEG、PNG、HEIC、WebPなど、Macで開ける画像。
- 出力
- 各画像のBlurHash、任意のサムネールのデータURI、色を記載したPlaceholders.txtと、デコードした各BlurHashの幅400 pxのPNGプレビュー。
- 値はアプリにも表示され、すぐにコピーできます。
プレースホルダ画像作成についての質問
BlurHashとは何ですか？
画像のぼかしたバージョンを表す短いテキスト文字列。本物の画像をダウンロードしている間、アプリがこれをデコードして、やわらかくカラフルなプレースホルダを表示します。
画像のBlurHashを生成するには？
「プレースホルダ画像作成」にドロップし、「生成」をクリックします。各画像のBlurHash文字列がアプリとPlaceholders.txtに表示されます。
BlurHashの詳細度はどれを使えばいいですか？
4 × 3が使いやすいデフォルトで、28文字の文字列になります。成分を増やすと形をより細かく表現できますが、文字列は長くなります。
BlurHashと小さなサムネール、どちらを使うべき？
BlurHashは短い文字列ですが、アプリに小さなデコーダが必要です。小さなサムネールはブラウザでそのまま表示できるデータURIですが、文字列は長くなります。両方を生成してから選ぶこともできます。
平均色はどのように使いますか？
画像のコンテナの背景色に設定しましょう。すぐに表示され、画像全体の色合いになじみます。
そもそもなぜプレースホルダを使うのですか？
画像の読み込み中に空のボックスが表示されたりレイアウトがずれたりするのを防ぐので、ページやアプリが速く感じられます。
プレースホルダ画像作成はファイルをアップロードしますか？
いいえ。プレースホルダ画像作成はすべてMac上で動作するので、ファイルが外に出ることはなく、オフラインでも使えます。
プレースホルダ画像作成は元のファイルを変更しますか？
いいえ。結果は「ダウンロード › OneMacTools」内の日付つきフォルダに新しいファイルとして保存され、元のファイルは、そうする旨のオプションをオンにしない限り、そのまま残ります。
プレースホルダ画像作成に必要なものは？
macOS 26以降を搭載したMacだけ。ほかにインストールするものはありません。
次にすること
関連する画像ツール
PNG、JPEG、HEIC、AVIF、TIFFを相互に変換します。WebP、RAWなども読み込めます。
画像のサイズを変更長辺、正確なピクセル、割合、または必要なDPIでのcm・mm・インチの印刷サイズでサイズを変更します。
画像を切り取る縦横比や正確な範囲で切り取ったり、単色の余白を自動でトリミングしたり。写真1枚でもフォルダ全体でも。
画像を回転・反転写真をまとめて回転・反転します。
スクリーンショットを美しくスクリーンショットを余白、角丸、やわらかい影付きでグラデーションの上に配置します。
画像に透かしを入れる写真に名前、©表記、ロゴを入れられます。隅に入れることも、画像全体にタイル状に入れることもできます。
