Webページにダミー画像を表示する「place IMG」の使い方

Web制作途中では、ページに表示する写真や画像がまだ決まっていない場合もあります。そのようなときはダミー画像を用意し仮で表示しますが、「place IMG」はURLを指定するだけでダミー画像を表示するサービスを提供している便利なサイトです。

画像はサイズとカテゴリーを指定すると、「500px.com」および「flickr.com」で公開されているものから自動で選択されます。
画像ファイルをダウンロードすることもできますが、書式に従ってURLをリンクして使うのが便利です。

【コンテンツ】

  1. 画像リンクの書式
  2. HTMLにリンクコードを貼り付ける

画像リンクの書式

リンクコードを取得するには下記ページにアクセスします。
http://placeimg.com/

place IMG トップページ

条件としては、サイズ、カテゴリー、そしてオプションとしてフィルター(白黒 or セピア)が設定できます。条件を設定したら、表示されているリンクをコピーします。

リンクには決まった書式があり、それを覚えているとこのサイトにアクセスする必要はありません。

URL形式

http://placeimg.com/[画像の幅]/[画像の高さ]/[カテゴリー]/[フィルター]

カテゴリー

  • animals: 動物
  • arch: 建物
  • nature: 自然
  • people: 人物
  • tech: 技術
  • any: ランダムに抽出

フィルター

  • grayscale: 白黒
  • sepia: セピア
  • 省略時: 通常のカラー

例えば、640x480のサイズで人物を表示したいときは以下のリンクになります。

HTMLにリンクコードを貼り付ける

画像リンクをHTMLのimg要素に指定します。
ここでは例として、動物と人物の画像を並べてこの記事に表示してみます。

表示は以下になります。画像はアクセスするたびに変わります。

動物のダミー画像人物のダミー画像

このように自分で画像を用意する必要もなく、リンクに指定してある数字を変えればサイズも簡単に変更できるので、Web制作にとってかなり便利に活用できます。

スポンサーリンク

ページの先頭へ