Web開発
Placeholder Image Generator
レイアウトやデザイン用に指定サイズのプレースホルダー画像を生成します。
A placeholder of the right size lets you check a layout before real images are ready — with correct proportions and dimensions labeled right on the image, so you can orient yourself in the mockup.
How to use it
- Enter a width and height in pixels and a placeholder image is generated instantly with its dimensions labeled.
- Optionally set the background and text color to match the mockup's theme.
- Download the finished image or copy a link to use directly in a src attribute.
Common uses
- Laying out a page before real photos or illustrations arrive from a designer.
- Testing a responsive image grid with various aspect ratios and sizes.
- Demoing a prototype to a client with clear dimensions instead of empty boxes.
Things to keep in mind
SVG placeholders weigh just a handful of bytes regardless of the size you set — the format choice affects how much real weight they add to a page during development.
A placeholder is meant purely for temporary use in development — it must be swapped for a real image before launch.
よくある質問
画像のサイズと見た目をどうコントロールしますか?
ピクセル単位で幅と高さ、さらに背景色とテキストの色を設定します。カスタムテキストを入力しない場合、ツールはデフォルトで600x400のように寸法自体を表示します。
このツールは何に役立ちますか?
モックアップやレイアウトのプロトタイピング向けです — プレースホルダー画像を配置することで、実際の画像が用意される前に間隔、アスペクト比、デザインを確認できます。
ファイルをダウンロードせずに画像を使用できますか?
はい、ダウンロードのほかに、画像をData URIとしてコピーし、HTMLやCSSに直接貼り付けることができます。
SVG形式とPNG形式のプレースホルダーの違いは何ですか?
SVGのプレースホルダーはベクター形式なので、品質を落とさずに拡大縮小でき、サイズに関わらず通常わずか数キロバイトしかありません。一方PNGはラスター形式で、画像サイズが大きくなるほどファイルサイズも増加するため、ページのパフォーマンスをテストする際に実際の写真の挙動をより忠実にシミュレートできます。
開発中、プレースホルダーのサイズは実際のページ読み込み速度に影響しますか?
SVGのプレースホルダーは指定したサイズに関わらずわずか数バイトしかないため、速度にほとんど影響しません。一方、大きなラスター形式のプレースホルダーはページに目に見える重さを加えることがあります——パフォーマンステストのためには、将来使う実際の画像に近い形式を選ぶとよいでしょう。