画面モックにいい感じのダミー画像を挿入するLorem Picsum
このブログを作る際、まずHTMLとCSSだけで画面モックを作成しました。
そのとき、画面に指定したサイズで「いい感じ」の画像を作成したく、Lorem Picsumというサービスを利用しました。
使い方
難しい設定は一切不要です。上記のURLに使い方が記載されていますが、基本的にはimgタグのsrcに下記のように指定するだけでOKです。
<img src="https://picsum.photos/200/300">
こちらは、横200px、縦300pxの画像をランダムに指定しており、ページをリロードするたびに異なる画像が表示されます。
また、URLのパラメータで、画像にぼかし（blur）をかけたり、白黒にしたりすることもできます。これにより、サイトの雰囲気に合わせたモック画像を表示することが可能です。
その他
今回は、imgタグを使ってダミー画像を表示させる方法をご紹介しましたが、画像のアップロードテストなどに重宝するのが https://placehold.jp/ です。
こちらのサイトでは、サイズを指定した画像を生成できるため、例えば1920×1080の画像アップロードのテストにも利用できます。
このように、Lorem PicsumやPlacehold.jpを利用することで、手軽にダミー画像を準備し、デザインモックやテストに活用できます。