商用可！Unsplashをダミー画像でつかう使い方
Unsplashは、クオリティが高い写真が揃っているフリー素材のサイトの一つです。
https://unsplash.com/ - 商用フリー
- 使用許可は不要で、著作権明記は必須ではない
- ログインも不要ですぐにダウンロードすることが可能
と、使いやすくとてもお世話になっています。
Unsplashの画像を、Webデザインのダミー画像として使用する際の使い方を調べたので、
備忘録をメモしておきたいと思います。
基本的な使い方
[width]/[height]で指定した場合、unsplashの中から自動的に選ばれた画像が
サイズに合わせてトリミングされ、表示されます。
フリー素材サイトの中でも、全体的にどれもクオリティが高いものが多い印象なので、
画像に特に指定がなくサイズがあってさえいれば良い場合、
デフォルトで毎回異なる画像が出るこちらで良いかと思います。
<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の拡張子をつけて使うこともできます。
画像の指定方法
毎回同じ画像にしたい時
上記の設定だと、読み込むたびに画像が入れ替わる設定になります。
毎回同じ画像にしたいときは、数値の前に/seed/を追加します。
<img src="https://picsum.photos/seed/picsum/500/420"> 画像を指定したい時
/id/[番号] 番号はこちらのサイト https://picsum.photos/images で確認可能です。
<img src="https://picsum.photos/id/〇〇/500/420"> そのほかの設定
白黒画像で使いたいとき
グレースケールにするためには、?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">
