Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@chibiegg

imgタグにImageFluxを適用するjQueryプラグインを作った

ピクシブ株式会社とさくらインターネット株式会社が開発した画像変換配信サービス 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属性として渡すことができます。

例えばこんな感じの使い方になります。

JavaScript
<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>
HTML
<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は問い合わせ対応によってサービス提供がされていますが、簡単に利用できるようにしたいですね。

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
chibiegg
技術執行役員 兼 CISO。ホスティングサービスの開発や、社内のシステム開発をしています。 (ネットワーク|情報セキュリティ|データベース)スペシャリスト。 得意分野は Python+Django、Golangでのサーバサイド、サーバインフラ、ネットワーク、電子回路設計や組み込みソフトウエア開発。 AS59105所属。写真と旅行♨️が趣味の18歳情報系女子。
sakura_internet
さくらレンタルサーバ、さくらのVPS、 さくらのクラウド、さくらの専用サーバなどのインターネットサービス・ITプラットフォームを提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?