欲しいサイズの画像が必要な時に便利なサービス「unsplash.it」



URLに横×縦のサイズを指定するだけで、お目当ての大きさの画像が取得出来るサービス「unsplash.it」の紹介です。

Webサイトを作っていく上で、レイアウトの関係で開発中に画像が必要なケースは多々あります。
例えば、「ヘッダーのバックグラウンドは長方形、ニュース系ならTOP画像が入って、この部分に正方形の画像が入るはサムネイルを作成して、、」等、使う場所によって必要になる画像の形やサイズも変わってきます。

指定サイズ分の枠を取るだけなら「holder.js」という動的に画像を作成するjavascrip製のライブラリも存在しますが、マウスホバー時に画像上にテキストを表示するオーバーレイ等が噛んできたりすると、話しは変わってきます。

開発時に、上記の様なことを気にせずに使えそうなサービスが「unsplash.it」です。

このサービス「Unsplash」という画像投稿サービスと連携しており、URLにサイズを渡すと、指定したサイズの画像を取得できます。

* unsplash.itを使って実際に画像を取得してみました 


unsplash.itの使い方

" unsplash.it " はURLベースで画像を取得するので、専用のライブラリを読み込む必要もありません。
" https://unsplash.it/横幅/縦幅 " で画像を取得できます。
( * 画像の読み込みはサーバーに依存するので、時間が多少掛かる時もあります )

例えば 横500 × 縦300の画像を取得する時は下記のURLを叩けば取得できます

# 横500×縦300の画像の場合
https://unsplash.it/500/300
<!-- 300×500 の画像を取得 ( imgタグと併用 )  -->
<img src="https://unsplash.it/300/500" >

* 取得した"300×500"の画像

URLの帯に' ?random 'のオプションを与えれば、読み込み時に取得する画像がランダムに変わります

# randomで切り替え
https://unsplash.it/336/280/?random


また、取得する画像にblur( ぼかし )エフェクトをかけることも可能で、その場合は' ?blur 'オプションを使います。

# ぼかしが入った画像が取得できます
https://unsplash.it/336/280/?blur

* blur(ぼかし)が入った画像を取得

' gravity 'オプションで、切り抜きされた画像も取得できます。
その際は、north(上), east(右), south(下), west(左), center(中心)の5種類のパラメーターが用意されています。

# grvityオプション(eastパラメーター)を使っています
https://unsplash.it/200/300/?gravity=east

* east (右側)に切り抜かれた画像を取得

Summary

以上がunsplash.itの紹介でした。

Lightboxや、オーバーレイ等のエフェクトを利用する時に使うと便利そうです。

Webサービスをの開発途中に、間に合わせ画像が欲しい時に便利に使えるサービスなので、気になった人はゼヒ×2チェックしてみてください!

Unsplash It

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ