【おすすめ】Webサイト構築の際に便利なダミー画像提供サイト
Webサイトを構築していく上で、画像などの素材が全て揃っていれば問題ないのですが、お客様によっては写真素材の提供が遅れてしまうこともあります。
そんなときはグレーの枠を入れておくなど、コーダーとしては色々とやりようがあるのですが、なんとなくそれだけでは味気ない。。。
そこで今回は、サイトの中にカンタンにダミー画像を表示できるサービスをご紹介します。
Lorem Picsum
Lorem Picsum
Lorem Ipsum… but for photos
こちらは、ダミー画像提供サービスの中でも、有名な方ではないでしょうか。
画像の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
Placehold.it
Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers
Contents1 What Is Placeholder.com?2 How To Use Our Placeholders3 How To Set Image Size4 How To Set Image Formats5 How To Set Custom Text6 How To Set Background & Text Color6.1 Popular Hex Color Codes7 New! WEBP Support8 New! HTTPS Support9 NEW! Placeholder Logos, Text & Banners Ads10 Any Questions? What Continue Reading
こちらもダミー画像提供サービスですが、先程の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サイト構築に欠かせない画像、その中でもダミー画像をカンタンに表示できるサービスをご紹介しました。
本番用の画像が来るまでのつなぎの画像として使用するのもよし、お客様への確認用に入れておくもよし、色々な使い方ができるかと思いますので、ぜひ一度使ってみてください。