プレースホルダー画像は、素材が完成する前に配置の問題を見つけるために使います。必要な縦横比の長方形を置くと、写真の内容に気を取られず、切り抜きや位置、余白を比べられます。
用途に合わせて形式を選ぶ
| 形式 | 向いている用途 | 注意する点 |
|---|---|---|
| SVG | 単純な図形、ラベル、拡大して使う背景。 | 写真の圧縮や、大きな写真ファイルの読み込みまでは再現しません。 |
| PNG | 劣化させたくない画像や、透明な部分を含む画像。 | 細かい画像ではJPEG・WebPより容量が大きくなる場合があります。 |
| JPEG | 透明部分が不要な画像や、JPEGの配信を試す場合。 | 透過には対応せず、圧縮によって小さな文字や境界がぼやける場合があります。 |
| WebP | 透過にも対応した画像形式を試す場合。 | 自分のブラウザだけでなく、取り込むアプリでも表示できるかを試します。 |
読み込み前に表示領域を確保する
widthとheight属性で画像の縦横比を伝え、CSSで画面の幅に合わせます。画像が届いてから表示領域を作る場合に比べ、周囲の内容が移動しにくくなります。本番の画像が意味を持つ場合は、画像に合った代替テキストへ置き換えてください。
<img
src="https://anyplaceholder.com/placeholder?width=1200&height=800&format=svg&text=Photo"
width="1200" height="800" alt=""
style="max-width: 100%; height: auto;"
>縦横比を3通り試す
- 横長の16:9：ページ上部の画像、動画用の枠、短い説明を持つカードを試します。
- 正方形の1:1：商品一覧、アバターの周囲、高さをそろえたグリッドを試します。
- 縦長の2:3：ポスターや表紙、画像が長いと操作ボタンが画面外へ出るカードを試します。
固定サイズの枠にobject-fit: coverで表示すると画像が切り抜かれます。画像本来の縦横比で表示すると全体が見えますが、ページの高さが変わります。用途に合う方式を選び、長いタイトルと狭い画面でも試してください。
繰り返すテストでは素材を保存する
公開URLは、短時間で試作する場合に便利です。画面の差分を繰り返し調べるテストでは、画像をテスト用のフォルダーに保存してください。ネットワークやサービスの変更に左右されずに使えます。product-card-600x400.pngのように、用途と寸法が分かる名前にすると整理しやすくなります。
単純な背景だけで足りる場合
装飾用の領域なら、薄い模様やグラデーションで余白を試せます。SVG背景ツールでは、ドット・グリッド・ストライプ・グラデーションをブラウザ内で生成できます。CSSと設定リンクを使えば、別の人も同じ背景を再現できます。
本番の画面に置き換える前に
- 仮のラベルを置き換え、本番画像の切り抜かれ方を調べます。
- 意味を持つ画像には内容を伝える代替テキストを付け、装飾画像のaltは空にします。
- 本番画像の容量と読み込みを測ります。小さなプレースホルダーだけでは本番の性能を判断できません。
例で使っているブラウザの動作については、 MDNのimg要素の説明をご覧ください。