FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

レスポンシブ用の画像を複数のサイズで自動生成

   

01

Responsive Image Breakpoints Generator

レスポンシブWebデザインで、マルチデバイスに対応させる際、読み込む画像のサイズを複数設定したい場合があります。

そんな時に便利なのが、「Responsive Image Breakpoints Generator」です。

画像をアップするだけで、ブレイクポイントにあわせた複数のサイズの画像を生成してくれます。

Responsive Image Breakpoints Generator

03

ブレイクポイントなどを設定します。

02

「UPLOAD FILE」をクリックし、上記の画面へ画像をドラッグしアップします。

04

書き出されたサンプルが表示されます。

05

ダウンロードをクリックすると画像がダウンロードされます。
タグも表示されるので、コピペで済むのが便利ですね!

Responsive Image Breakpoints Generator

 - コーディング