【おすすめ】Webサイト構築の際に便利なダミー画像提供サイト

2020年2月26日2021年12月6日

Webサイトを構築していく上で、画像などの素材が全て揃っていれば問題ないのですが、お客様によっては写真素材の提供が遅れてしまうこともあります。

そんなときはグレーの枠を入れておくなど、コーダーとしては色々とやりようがあるのですが、なんとなくそれだけでは味気ない。。。

そこで今回は、サイトの中にカンタンにダミー画像を表示できるサービスをご紹介します。

リンク

Lorem Picsum

こちらは、ダミー画像提供サービスの中でも、有名な方ではないでしょうか。

画像のURLに横幅、高さを指定するだけで、ダミー画像を参照できるようになります。

<img src="https://picsum.photos/200/300">
<!-- 横幅200px　高さ300pxの画像が表示されます。 -->

See the Pen
mdJWmwz by TAKASHI (@takashi1107)
on CodePen.

このように、picsum.photos/ の後ろに「横幅」「高さ」の順に指定するとそのサイズの画像が表示されるようになります。

どんな画像が表示されるかはランダムとなっていますが、指定することも出来ます。

<img src="https://picsum.photos/id/237/200/300">
<!-- id237の横幅200px　高さ300pxの画像が表示される -->

See the Pen
KKpWmvp by TAKASHI (@takashi1107)
on CodePen.

このようにid/XXX　と指定すると、その指定したidの画像が指定したサイズで表示されます。

idと画像の対応は、下記のページから確認することが出来ます。
https://picsum.photos/images

こちらもダミー画像提供サービスですが、先程のLorem Picsumと異なるのは、写真ではなく、色付きの枠で表示されるというところです。

<img src="http://placehold.it/200">
<!-- 横幅200px　高さ200pxのグレーのダミー画像が表示される -->

See the Pen
XWbMRaM by TAKASHI (@takashi1107)
on CodePen.

このように、写真ではなくグレーのいかにもダミーという画像が表示されます。

パっと見でダミー画像と分かるので、公開時にチェック漏れがなくて済みそうです。

また、背景色はグレーだけではなく、自分の好きな色を指定することも出来ます。

<img src="http://placehold.it/200x300/00ff00/fff">
<!-- 横幅200px　高さ300px　背景色#00ff00　文字色#fffのダミー画像が表示される -->

See the Pen
qBdrmXp by TAKASHI (@takashi1107)
on CodePen.

このように、自分の指定した色でダミー画像が表示されます。

今回は、Webサイト構築に欠かせない画像、その中でもダミー画像をカンタンに表示できるサービスをご紹介しました。

本番用の画像が来るまでのつなぎの画像として使用するのもよし、お客様への確認用に入れておくもよし、色々な使い方ができるかと思いますので、ぜひ一度使ってみてください。

リンク