空の画像・プレースホルダー画像ジェネレーター

プレースホルダー画像は、Webページやスライド、広告のレイアウトを作る間、本物の画像の代わりに場所を埋める画像です。空の画像は、ぴったりのサイズのファイルが必要な枠を埋めるのに使います。このジェネレーターは、好きなサイズの画像を、背景色（または透明）、任意のサイズラベル、ワイヤーフレーム用のバツ印や枠線付きで、PNG・JPG・WebP・ベクターのSVGとして描きます。HTMLやCSSにそのまま貼れるSVGマークアップとデータURIも得られ、複数のサイズを一度に作ることもできます。

使い方

1. 幅と高さを入力し、必要なら300x250や728x90のような追加サイズも入力します。
2. 背景色を選ぶか、透明にチェックを入れます。
3. 無地・バツ印・枠線から選び、サイズラベルをそのままにするか、自分で入力します。
4. 形式を選んでファイルをダウンロードするか、SVGマークアップまたはデータURIをコピーします。

計算式

自動の文字サイズ = min(0.22 × 高さ, 0.16 × 幅)、ラベルが幅の85%以内になるまで縮小

文字サイズは整数のピクセルに丸められ、6 pxより小さくなるラベルや画像より高くなるラベルは入れません。線の太さは max(1, round(短辺 ÷ 200)) px です。SVGのデータURIはマークアップをencodeURIComponentに通したもの、ラスター画像のデータURIはbase64でファイルの約4/3の大きさになるため、150 KB以下のファイルでのみ表示します。

計算例

初期値の1200 × 630（SNS共有画像でよく使われるサイズ）では、ラベル「1200 × 630」が min(0.22 × 630, 0.16 × 1200) = 138.6、四捨五入して139 pxの太字で、#cccccc の背景の中央に入ります。このサイズの無地のグレーのPNGは数キロバイトしかなく、データURIはファイルのバイト数より約3分の1長くなります。