商用可!Unsplashをダミー画像でつかう使い方

unsplash img
Advertisements

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

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

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

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の拡張子をつけて使うこともできます。

画像の指定方法

Advertisements

毎回同じ画像にしたい時

上記の設定だと、読み込むたびに画像が入れ替わる設定になります。

毎回同じ画像にしたいときは、数値の前に/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"> 

そのほかの設定

Advertisements

白黒画像で使いたいとき

グレースケールにするためには、?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"> 
Advertisements