<img src="placeholder.png" width="800" height="400" alt="Placeholder">Use width and height attributes to prevent layout shift (CLS)
background: #ccc url('placeholder.svg') center/cover;SVG placeholders are ideal for CSS backgrounds — infinitely scalable
<Image src="/placeholder.png" width={800} height={400} alt="..." />Use Next.js Image component for automatic optimization
<img src="data:image/png;base64,..." alt="Placeholder">Embed small placeholders directly in HTML — no extra HTTP request
| ユースケース | サイズ | アスペクト比 |
|---|---|---|
| Favicon / Icon | 64 × 64 | 1:1 |
| Avatar / Profile | 150 × 150 | 1:1 |
| Thumbnail | 300 × 200 | 3:2 |
| Blog Feature Image | 1200 × 630 | ~1.9:1 |
| Social Media OG | 1200 × 630 | ~1.9:1 |
| Hero Banner | 1920 × 600 | 16:5 |
| Full HD | 1920 × 1080 | 16:9 |
| Product Photo | 800 × 800 | 1:1 |
プレースホルダー画像はWebデザインにおいて、最終的な画像が準備できる前のプロトタイピング、ワイヤーフレーム作成、開発中に画像スペースを埋めるために使用されます。レイアウトの可視化やレスポンシブデザインのテストに役立ちます。
はい、このツールで生成されたすべてのプレースホルダー画像はブラウザ内でローカルに作成され、商用プロジェクトを含むあらゆる目的に無料で使用できます。
PNGはすべてのブラウザとアプリケーションでサポートされているピクセルベースのラスター画像フォーマットです。SVGは品質を損なわずにスケールできるベクターベースのフォーマットで、高解像度ディスプレイに最適です。Webデザインのモックアップにはsvgを、ユニバーサル互換性にはPNGを使用してください。
はい！ピクセル単位で任意の幅と高さを入力できます。このツールは1×1から非常に大きな値まで任意の寸法をサポートします。標準的なWebサイズについては、アバター、サムネイル、バナー、ソーシャルOG、HDなどのプリセットをご利用ください。