こんにちは、mickです。
Webのサンプルプログラムで使えるダミー画像を探してる
Webでダミー画像を使うのに毎回ダウンロードするのは嫌
Webページのレイアウトを整えるためとりあえず画像が欲しい
こんな要望に応えます。
ダウンロード不要でとりあず画像を使いたいなら Lorem Picsum がピッタリです。
ダウンロード不要でダミー画像を Lorem Picsum
商用利用可能で有名なフォトサービス「Unsplash」。ここの写真を利用した完全無料で利用できるWebサービス、それが「Lorem Picsum」。2人のエンジニアが作った無料のサービスということです。
出版やグラフィックデザインなどに用いられるダミーテキストのサービスに「Lorem Ipsum」があります。このダミー写真版が「Lorem Picsum」というわけですね。
Lorem Picsum のシステムを使うと、WebページにURLを埋め込むだけで、ダミー画像を使うことができます。
とりあえず画像を入れたいときに便利
Webページのテストページにデザインの体裁を整えるためにダミー画像を埋め込みたいときがあります。そんなときに使えるサービスです。
他には、Web上でHTMLやCSS、JavaScriptなどのサンプルプログラムに使う画像としても利用できます。
使い方は簡単でURLを埋め込むだけ
Lorem Picsum（https://picsum.photos/） のサービスを使うのは簡単。
画像のURLをWebページに埋め込むだけ
Lorem PicsumのWebサイトでも「Easy to use, stylish placeholders」と書いた下に使い方が書いてます。
一番シンプルな使い方が「画像はランダム」「縦横サイズを指定」する方法。
https://picsum.photos/[横幅px]/[縦幅px]
次にシンプルな使い方が「画像はランダム」「正方形の画像を指定」する方法。
https://picsum.photos/[縦横px]
いろいろなダミー画像の指定の仕方
Lorem Picsum にはいろいろな使い方があります。
- 画像を指定する
- モノクロ画像だけ指定する
- ぼかし画像だけを指定する
- これらの組み合わせもOK
- 画像のランダムパターンをずらす
- JPGファイルとして指定する
- WebPファイルとして指定する
それぞれ使い方を説明していきますね。
画像を指定する
ギャラリーからあらかじめ画像を探して、/id/[画像のID] IDを使って指定することができます。
https://picsum.photos/id/237/200/300
モノクロ画像だけ指定する
URLの最後に ?grayscale を付ければモノクロ画像だけ表示することができます。
https://picsum.photos/200/300?grayscale
ぼかし画像だけを指定する
URLの最後に ?blur を付ければモノクロ画像だけ表示することができます。
https://picsum.photos/200/300/?blur
?blue=1 のように後ろに数字を付けると、ぼかし具合を調整できます。
指定できるのは 1 から 10 。10がもっともぼやけた画像になります。
https://picsum.photos/200/300/?blur=2
これらの組み合わせもOK
次のように、「画像を指定」「サイズを指定」「モノクロ画像」「ぼけた画像」を一度に指定することもOK。
https://picsum.photos/id/870/200/300?grayscale&blur=2
画像のランダムパターンをずらす
同じサイズの画像を複数使うとき、 random を指定することでキャッシュが使われるのを防ぐことができます（結果的に、同じ画像がでるのを防ぐ）。
<img src=”https://picsum.photos/200/300?random=1″>
<img src=”https://picsum.photos/200/300?random=2″>
JPGファイルとして指定する
ファイルの拡張子が必要なときは、 .jpg を後ろに付ければOK。
https://picsum.photos/200/300.jpg
WebPファイルとして指定する
ファイルの拡張子には、WebPも指定OK。 .webp を後ろに付けます。
https://picsum.photos/200/300.webp
まとめ。欠点は表示が遅いことがあること
ダウンロード不要でダミー画像をWebページに埋め込む Lorem Picsum を紹介しました。
ダウンロードしないでいろんな画像が使えるのは便利。
ただ、画像を毎回ダウンロードするため、Webページの表示が遅くなるという欠点があります。
使い方のおさらい
- Lorem Picsum のURLを貼り付ける
これだけから使える Lorem Picsum。
ぜひ試して欲しいと思います。
記事を読んでくれて嬉しいです。
今日もありがとうございました。
初稿 2021/01/13
