ピクシブ株式会社とさくらインターネット株式会社が開発した画像変換配信サービス ImageFlux をimgタグに簡単に適用できるjQueryプラグインを作ってみました。
ImageFluxの仕組み
ImageFluxにはオリジンサーバを設定し、それに対応したドメインが割り当てられます。CDNに似てますね。
ImageFluxのドメインに対して変換パラメータ付きで画像のパスを指定することで、変換パラメータ通りに変換され、キャッシュされます。
最も簡単で効果的な使い方はWebPへの変換でしょう。
例えば、オリジンが https://www.example.com/、 対応するImageFluxのドメインが p1-XXXXXXXX.imageflux.jp の場合、imgタグを以下のようにすることで、WebPに対応したブラウザに対してWebPで画像を配信することができます。
<img src="https://www.example.com/images/some-image.jpg"/>
<img src="https://p1-XXXXXXXX.imageflux.jp/f=webp:auto/images/some-image.jpg"/>
ImageFluxではいろいろと変換パラメータを指定することができます。詳しくはドキュメントをご覧ください。
(フォーマット webp:auto は、ブラウザがWebPに対応している場合はWebP、対応していない場合はオリジナル画像のフォーマットで出力されるオプションです。)
jQuery ImageFlux Plugin
上記のようなパラメータをsrc属性に指定するのはめんどくさいので、まとめて指定できるjQueryプラグインを作りました。
github.com/chibiegg/jquery-imageflux
詳しい使い方はREADME.mdに書きましたが、簡単に紹介したいと思います。
imgタグの src 属性の代わりに、data-imgflx-src属性に画像へのパスを指定し、プラグインを実行するという形になります。
変換パラメータはプラグインへのオプション辞書として渡すか、imgタグのdata属性として渡すことができます。
例えばこんな感じの使い方になります。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imageflux.min.js"></script>
<script type="text/javascript">
$(function(){
$('img[data-imgflx-src]').imageflux({
host: 'p1-XXXXXXXX.imageflux.jp',
format: 'webp:auto',
allowUpscale: false,
width: 300
});
});
</script>
<img data-imgflx-src="/images/some-image.jpg" />
<img data-imgflx-src="/images/awsome-image.jpg" data-imgflx-width="500" data-imgflx-quality="60" />
この例では、オプション辞書により、フォーマットは webp:auto、拡大はしない、幅は300px、とし、2つめの画像では幅と品質をdata属性で上書きしています。
このようにすることで、以下のようなsrc属性と同様の効果が得られます。
<img src="https://p1-XXXXXXXX.imageflux.jp/f=webp:auto,u=0,w=300/images/some-image.jpg" />
<img src="https://p1-XXXXXXXX.imageflux.jp/f=webp:auto,u=0,w=500,q=60/images/awsome-image.jpg" />
さいごに
現在ImageFluxは問い合わせ対応によってサービス提供がされていますが、簡単に利用できるようにしたいですね。