【ダウンロード不要】URLを指定してとりあえずで画像を使う Lorem Picsum【無料】

【ダウンロード不要】URLを指定してとりあえずで画像を使う Lorem Picsum【無料】 PROGRAMMING

こんにちは、mickです。

Webのサンプルプログラムで使えるダミー画像を探してる
Webでダミー画像を使うのに毎回ダウンロードするのは嫌
Webページのレイアウトを整えるためとりあえず画像が欲しい

こんな要望に応えます。

ダウンロード不要でとりあず画像を使いたいなら Lorem Picsum がピッタリです。

ダウンロード不要でダミー画像を Lorem Picsum

商用利用可能で有名なフォトサービス「Unsplash」。ここの写真を利用した完全無料で利用できるWebサービス、それが「Lorem Picsum」。2人のエンジニアが作った無料のサービスということです。

出版やグラフィックデザインなどに用いられるダミーテキストのサービスに「Lorem Ipsum」があります。このダミー写真版が「Lorem Picsum」というわけですね。

Lorem Picsum のシステムを使うと、WebページにURLを埋め込むだけで、ダミー画像を使うことができます。

とりあえず画像を入れたいときに便利

Webページのテストページにデザインの体裁を整えるためにダミー画像を埋め込みたいときがあります。そんなときに使えるサービスです。

Lorem Picsum で埋め込んだダミー画像
Lorem Picsum で埋め込んだダミー画像

他には、Web上でHTMLやCSS、JavaScriptなどのサンプルプログラムに使う画像としても利用できます。

使い方は簡単でURLを埋め込むだけ

Lorem Picsum(https://picsum.photos/) のサービスを使うのは簡単。

画像のURLをWebページに埋め込むだけ

Lorem PicsumのWebサイトでも「Easy to use, stylish placeholders」と書いた下に使い方が書いてます。
一番シンプルな使い方が「画像はランダム」「縦横サイズを指定」する方法。

https://picsum.photos/200/300

https://picsum.photos/[横幅px]/[縦幅px]

次にシンプルな使い方が「画像はランダム」「正方形の画像を指定」する方法。

https://picsum.photos/200

https://picsum.photos/[縦横px]

いろいろなダミー画像の指定の仕方

Lorem Picsum で画像を指定して埋め込んだダミー画像
Lorem Picsum で画像を指定して埋め込んだダミー画像

Lorem Picsum にはいろいろな使い方があります。

  1. 画像を指定する
  2. モノクロ画像だけ指定する
  3. ぼかし画像だけを指定する
  4. これらの組み合わせもOK
  5. 画像のランダムパターンをずらす
  6. JPGファイルとして指定する
  7. 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ページの表示が遅くなるという欠点があります。

使い方のおさらい

  1. Lorem Picsum のURLを貼り付ける

これだけから使える Lorem Picsum。
ぜひ試して欲しいと思います。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/01/13

タイトルとURLをコピーしました