ダミー画像生成の真打ちとも言える高性能がすごい!オンラインなのにオフラインでも利用できてしまう -satyr.io
Post on:2017年1月20日
ダミー画像の無料サービスはいくつかありますが、真打ちとも言える高性能なダミー画像が利用できる無料オンラインサービスがリリースされました。
ダミー画像はレスポンシブ対応、可変画像や高さが不揃いの画像にも対応しています。しかもオンラインなのにオフラインでも利用できてしまう優れものです。
satyr.ioの特徴
satyr.ioのダミー画像では、既存にはないさまざまな機能が用意されています。
ダミー画像はレスポンシブ対応で、サイズが変化する画像を設定できます。コードは下記のように記述します。
1 2 3 4 5 6 7 |
<picture> <source srcset="http://satyr.io/1200x16:9" media="(min-width: 1280px)"> <source srcset="http://satyr.io/980x16:9" media="(min-width: 992px)"> <source srcset="http://satyr.io/768x16:9" media="(min-width: 768px)"> <source srcset="http://satyr.io/480x4:3" media="(min-width: 480px)"> <img srcset="http://satyr.io/320x4:3" alt=""> </picture> |
画像の遅延ロードにも対応。遅延パラメータを追加し、低速度での読み込みもシミュレートします。
1 2 3 |
http://satyr.io/200x300?delay=3g http://satyr.io/200x300?delay=1000 http://satyr.io/200x300?delay=1000-3000 |
画像のサイズをランダムに設定することも可能。範囲を指定して、画像のランダムなサイズに合わせてレイアウトを準備します。
1 2 3 |
http://satyr.io/200-250x300 http://satyr.io/200x200-300 http://satyr.io/200-250x200-300 |
1つ目は幅200-250pxで高さ300px固定、2つ目は幅200px固定で高さ200-300pxです。
ダミー画像には99種類のテーマが用意されており、視覚的なフィードバックのために異なるイメージを利用できます。
1 2 3 |
http://satyr.io/200x300/1 http://satyr.io/200x300/2 http://satyr.io/200x300/3 |
最後に、satyr.ioの機能はすべてオンラインだけでなく、オフラインでも利用できます。オフラインの状態でもChromeの機能拡張でダミー画像の機能をすべて利用できます。
satyr.ioの使い方
ダミー画像は、URIにパラメータを記述して利用します。
ダミー画像の基本書式
サイズを指定した矩形の画像、指定した範囲でランダムにサイズが変わる画像、アスペクト比を維持した画像、クエリで指定した画像など、シンプルなダミー画像から、さまざまな高機能な画像まで簡単に利用できます。
画像のカラーを指定したり、99種類のテーマを利用したり、RGBA値でアルファ値を指定して画像を利用できます。
最近復活してきた遅延読み込み。国旗や各種Webサービスやブランドなどのアイコンも利用できます。
画像のフォーマットも選択できます。「.webp」フォーマットが利用できるかに使ってもいいですね。画像にクロスや方眼紙を適用することも可能です。
画像に文字を載せたり、httpsにも対応しています。
sponsors