高品質なUnsplashの画像をダミーとして使う方法

Unsplashは、クオリティが高い写真が揃っているフリー素材のサイトの一つです。

  • 商用フリー
  • 使用許可は不要で、著作権明記は必須ではない
  • ログインも不要ですぐにダウンロードすることが可能

と、使いやすくとてもお世話になっています。

Webデザインのダミー画像として使うときのコードを調べたので、
Unsplashの画像を使ったhttps://picsum.photos/からのサイトの備忘録をついでにメモしておきたいと思います。

  1. 基本的な使い方
  2. 画像の指定方法
  3. そのほかの設定

1 基本的な使い方

[width]/[height]で指定すると、サイズに合わせつつ、自動的に選んで表示されます。
フリー素材サイトの中でも、全体的にどれもクオリティが高いものが多い印象なので、
画像に特に指定がなくサイズがあっていれば良い場合、デフォルトで毎回異なる画像が出るこちらで良いかと思います。

<img src="https://picsum.photos/500/420"> 

一つだけ数値を書くと、正方形に。

<img src="https://picsum.photos/400">  

同じサイズ&複数の画像を使いたい時は、同じものがダブらないよう、下記のような設定が必要のようです。

<img src="https://picsum.photos/500/420?random=1">
<img src="https://picsum.photos/500/420?random=2">

また、必要な場合は 「/width/height.jpg」 のように、.jpgや.webpをつけて使うこともできます。

2 画像の指定方法

毎回同じ画像にしたい時

上記の設定だと、読み込むたびに画像が入れ替わるので、毎回同じ画像にしたいときは、
数値の前に/seed/を追加します。


 <img src="https://picsum.photos/seed/picsum/500/420"> 

画像を指定したい時

/id/[番号] 番号はこちらのサイト https://picsum.photos/images で確認可能です。


 <img src="https://picsum.photos/id/〇〇/500/420"> 

キーワードに沿った画像にしたい時

?[keyword],[keyword] で、設定したキーワードに関連した画像を表示可能です。

 
<img src="https://unsplash.it/500/420?fashion,woman"> 

3 そのほかの設定

白黒画像で使いとき

グレースケールにするためには、?grayscaleのパラメータを追加します。

 
<img src="https://picsum.photos/500/420?grayscale"> 

ボカしを入れたい時

?blurのパラメータを追加します。

 
<img src="https://picsum.photos//500/420?blur"> 

?blur=3など、ボカし具合を1-10までで指定可能です。

どちらも使いたい場合は…

下記のように、2つのパラメータを&でつなぎます。

 
<img src="https://picsum.photos/500/420?grayscale&blur=8">