Webサイトを制作する上で、クライアントにサイトの完成イメージを提示する際にページ内に「とりあえず表示しておきたいそれっぽい適当な画像」というのは、あると結構助かります。
しかし、製作段階のテスト環境を構築するたび、毎回ダミー画像を用意してアップロードしたりURLを指定するのは結構面倒なものです。
というわけで、そんなときに便利な固定のURLを指定しておくだけで、それっぽい「ダミー画像」を表示してくれる、とっても便利なオンラインサービスをご紹介します。
INDEX
Unsplash it
自然や風景中心のおしゃれで質の高いライセンスフリーの無料画像を提供している、人気の定番画像サイト「Unsplash」からランダムに画像をピックアップして画像URLを生成してくれます。
表示例
<img src="https://unsplash.it/630/400" alt="pplaceholder" />
URLの後に、幅と高さをピクセル数値でスラッシュ(/)で区切って指定するだけ。とっても簡単!
その他の指定方法
URLに/g/
を含めると、グレイスケールで画像を表示してくれます。
<img src="https://unsplash.it/g/630/400/" alt="placeholder" />
list
を付けて https://unsplash.it/list
にリクエストすると、なんと画像の一覧情報(撮影者、タイトル、サイズ)をまとめてjsonフォーマットで取得できます。
?blur
パラメータをつければ、画像にぼかしもかけることもできます。
<img src="https://unsplash.it/630/400/?blur" alt="placeholder" />
p-hold
Flickr上にあるクリエイティブコモンライセンスの画像を表示できるURLを生成してくれます。
URLに、幅、高さ、キーワード、Flickrのユーザー名が指定できるほか、フィルター(ぼかし、グレースケール)にも対応しています。
表示例
<img src="http://p-hold.com/630/400" alt="placeholder" />
<img src="http://p-hold.com/people/630/400/gray" alt="placeholder" />
PlaceIMG
幅と高さ、そして任意の画像のカテゴリーを指定すると、ダミー画像用のURLを生成してくれます。
表示例
<img src="http://placeimg.com/630/400/people" alt="placeholder" />
lorempixel
「PlaceIMG」と同じように、オンラインのジェネレーターで、幅、高さ、カテゴリーを指定してダミー画像用のURLを生成できます。
表示例
<img src="http://lorempixel.com/630/400/fashion/" alt="placeholder" />
placekitten
サイト名の通り、こちらは子猫の画像のみでダミー画像を生成してくれるサービス。
ドメインの後に、幅(width)、高さ(height)を指定することで画像サイズを指定します。さらに、URLに/g/
を追加することでグレースケールの画像になります。
表示例
<img src="https://placekitten.com/g/630/400" alt="placeholder" />
Placehold.jp
こちらは写真ではなく、指定サイズの単色画像として背景カラー、任意のテキストを反映したダミー画像用のURLを生成してくれるというサービス。
出力フォーマットはPNGとJPGから選べます。
表示例
<img src="http://placehold.jp/80/4cafe0/ffffff/630x400.png?text=Dummy%20Image" alt="placeholder" />
Fake images please?
URLに、縦、横のサイズや、背景カラー、表示したいテキスト、さらにフォントをパラメータで指定してダミー画像を生成してくれます。
表示例
<img src="http://fakeimg.pl/630x400/?text=Hello" alt="placeholder" />
Dynamic Dummy Image Generator
表示例
<img src="http://dummyimage.com/630x400/2b8294/ffffff.png&text=Dummy+Image" alt="placeholder" />
FPOImg.com
表示例
<img src="http://fpoimg.com/630x400?text=Dummy Image&bg_color=f495bb&text_color=ffffff" alt="placeholder" />
Dummy Image Generator
こちらはURLを指定するのではなく、サイズや画像のジャンルを選んで様々なサイズにクロップされた画像をまとめてzipアーカイブとしてダウンロードできるサービス。
いかがでしたか?
Webサイト制作の表示チェックやサンプル用にはとても役に立ちそうですね。