expexp.jp

未分類

【制作補助】いい感じのダミー写真ならLorem Picsumがおすすめ!

モックを作る時や記事のサムネイルをダミーで入れておきたい時、グレーのシンプルなボックスだと味気ないですよね。

そこでいい感じのお洒落な写真が使えるサイト、 Lorem Picsumhttps://picsum.photos/)がおすすめです。

サイトの紹介でも「写真のLorem Ipsumです。」と謳っています。

使い方

サイトに書いてある通りですが、さらっと紹介します。

基本的には、https://picsum.photos/ のURLに表示したい画像の幅(width)と高さ(height)を指定してあげるだけです。

https://picsum.photos/画像の幅/画像の高さ

で、実際に幅と高さを指定したリンクを開くと、いい感じの写真がランダムで表示されます。

https://picsum.photos/200/300

開くたびに画像が変わります(一度開いてパラメータが付いた状態でリロードすると同じ画像)。

幅と高さが同じ正方形であれば幅の指定だけです。

https://picsum.photos/200

下記はHTML内で使用している例。

<img src="https://picsum.photos/200/300" alt="dummy image">

また、こちらのImage Galleryに乗っているIDを指定することで、特定の画像だけを表示することもできる。

/id/{image}

https://picsum.photos/id/1025/200/300

グレースケールやぼかしもパラメーターで設定できます。

https://picsum.photos/200/300?grayscale
https://picsum.photos/200/300/?blur

ぼかしは1〜10で強さを変更できます。

https://picsum.photos/200/300/?blur=2

他にも.jpgや.webpの指定や、キャッシュの設定などパラメーターで細かく調整できます。

あとはなんと言ってもAPIがあること!

https://picsum.photos/v2/list

JSON大好きなのでVue.jsなどと組み合わせて使うと便利だなと思ってます。

ぜひ!