必要なサイズぴったりのプレースホルダー画像
幅と高さを入力すると、そのサイズの単色画像が中央にサイズを書き込んだ状態で作られます。本物の写真が届く前にレイアウトで必要になる仮の画像です。色を変えたり、好きなテキストを書いたりして、PNG・JPEG・WebP・SVGでダウンロードするか、data URIとしてコピーしてHTMLやCSSにそのまま貼り付けられます。すべてブラウザー内で描画されます。
プレースホルダー画像の作り方
- 1幅と高さをピクセルで入力するか、300 × 250や1920 × 1080などのよく使うサイズを選びます。
- 2テキストを空欄にするとサイズが表示されます。好きなテキストを入力することもでき、改行すると2行目になります。
- 3背景色と文字色、フォント、文字サイズを選びます。
- 4PNG・JPEG・WebP・SVGでダウンロードするか、画像をコピーするか、
<img src>用のSVG data URIをコピーします。
ラスターかベクターか
- PNG, JPEG, WebP
- 入力した幅と高さぴったりのビットマップ画像です。アップロードフォームやデザインファイルなど、実際の画像ファイルが必要な場面に使えます。
- SVG
- 数百バイトのマークアップで、どのサイズに拡大してもぼやけません。インラインで貼り付けるか、data URIを使えばファイルがまったく不要になります。
ちょうど収まるテキスト
テキストは画像に合わせて自動でサイズ調整されます。大きなバナーでは大きく、リーダーボード広告では小さく、端からはみ出すことはありません。そこから文字サイズのスライダーで拡大・縮小できます。
SVGのテキストは表示する端末のフォントで描画されるため、別のパソコンでは少し違って見えることがあります。ビットマップ形式はどこでも同じに見えます。
プレースホルダーサービスは不要
オンラインのプレースホルダーサービスは、停止したり、追加のリクエストでページを遅くしたりすることがあります。ダウンロードしたファイルやdata URIならオフラインでも動作し、内容が変わることもありません。
本物の写真をプラットフォームに合わせたサイズにするにはSNS画像リサイズツールを、レイアウトをダミーテキストで埋めるにはLorem Ipsum ジェネレーターを使ってください。
よくある質問
- 作れるプレースホルダーの最大サイズは？
- 各辺8000ピクセルまでです。非常に大きなビットマップは、ブラウザーによってはcanvasの上限を超えることがあります。SVGにはそのような制限はありません。
- 画像のテキストは変更できますか？
- はい。テキスト欄に何でも入力できます。空欄にするとサイズが表示されます。Enterキーで2行目になります。
- ファイルなしでプレースホルダーを使うには？
- data URIをコピーして、画像のsrcやCSSのbackground-imageのurl()として使います。画像全体がそのテキストの中に含まれています。
- 何かアップロードされますか？
- いいえ。画像はブラウザー内で描画され、端末の外に出ることはありません。