自動 srcset 生成の発表
レスポンシブ画像は、現代のウェブサイトにおいて不可欠な要素ですが、フロントエンド開発者にとっては管理や実装に手間がかかることもあります。従来、開発者は各デバイスの解像度に対応するために、複数サイズの画像を用意する必要がありました。しかし、srcset 属性を活用すれば、ブラウザが適切な画像サイズを自動的に選択するため、手動のサイズ作成が不要になります。
本記事では、imgixがどのように srcset 属性の活用を簡単にし、すべてのCore Libraryで 自動 srcset 生成 をサポートするようになったかを紹介します。
srcset を活用する際の課題
srcset はデバイスのピクセル比率に応じた最適な画像を提供する優れた手法ですが、正しく使用するにはいくつかの課題があります。
- 各画像を手作業で変換・保存するワークフローは、時間と労力を要する
- 変換後の修正や変更にコストがかかる
imgixのリアルタイム画像変換・最適化 サービスを活用することで、これらの課題を解決できます。手動で画像をリサイズして保存するのではなく、imgixのレンダリングパラメータを指定するだけで、各 srcset エントリの画像を最適化できます。
それでも、srcset を使用する際の疑問として「どのブレイクポイントを指定すればよいのか？」「いくつの画像バリエーションを用意すべきか？」という問題が残ります。これらのニーズに応えるため、imgixは カスタム srcset 属性を自動生成 できる機能を追加しました。
自動 srcset 生成の仕組み
imgix Core Libraries の主な目的は、開発者が迅速かつ簡単に imgix のURLを生成できるようにすることでした。しかし、レスポンシブ画像のサポートをさらに強化するため、自動 srcset 生成 をすべてのCore Librariesに追加しました。
この機能は、以下の2種類の srcset 生成をサポートしています。
- 可変幅（fluid-width）
srcset：ブラウザのビューポート幅に応じた異なるサイズの画像を提供 - 固定幅（fixed-width）
srcset：同じサイズの画像を異なる解像度（DPR）で提供
それぞれのユースケースに応じて、適切な srcset を選択できます。imgix SDKのインターフェースでは、簡単にどちらの形式を生成するかを指定し、希望のレンダリングAPIパラメータと共に構築できます。
srcset 生成の活用方法
imgix で srcset を自動生成する方法を見ていきましょう。まず、ライブラリ一覧 から、使用するプログラミング言語のCore Libraryを選択してください。
JavaScript（imgix-core-js）を使用した srcset 生成
以下のコードで、デフォルトの 可変幅 srcset を生成できます。
var ImgixClient = require('imgix-core-js');
var client = new ImgixClient({
domain:'testing.imgix.net',
includeLibraryParam:false
});
var srcset = client.buildSrcSet('image.jpg');
この関数は、次のような srcset を自動生成します。
https://testing.imgix.net/image.jpg?w=100 100w,
https://testing.imgix.net/image.jpg?w=116 116w,
https://testing.imgix.net/image.jpg?w=135 135w,
...
https://testing.imgix.net/image.jpg?w=8192 8192w
この srcset には、約31のエントリ が含まれており、それぞれの画像サイズの差分（幅トレランス）は最大8%に抑えられています。
トレランスを増やすことでキャッシュヒット率を向上できますが、画像のスケーリングによる視覚的パフォーマンスが低下する可能性があるため、品質を維持するために8%のトレランスを採用 しました。
固定幅（fixed-width） srcset の生成
固定幅の srcset を使用する場合、w（幅）または h（高さ）と ar（アスペクト比）のパラメータを指定します。
var srcset = client.buildSrcSet('image.jpg', {
w: 800
});
console.log(srcset);
このコードは、次のような DPR（デバイスピクセル比）ベースの srcset を生成します。
https://testing.imgix.net/image.jpg?dpr=1&q=75&w=800 1x,
https://testing.imgix.net/image.jpg?dpr=2&q=50&w=800 2x,
https://testing.imgix.net/image.jpg?dpr=3&q=35&w=800 3x,
https://testing.imgix.net/image.jpg?dpr=4&q=23&w=800 4x,
https://testing.imgix.net/image.jpg?dpr=5&q=20&w=800 5x
dpr パラメータは各エントリに追加され、それに応じた q（画質）パラメータも最適化されます。DPRが高い画像はより高解像度のデバイスで表示されるため、視覚品質を損なわずに q を調整することでファイルサイズを削減できます。
まとめ
本記事では、imgix の 自動 srcset 生成 によるレスポンシブ画像対応の強化について紹介しました。
この機能を活用すれば、開発者は 手作業なしで最適な srcset を提供でき、ページのパフォーマンスを向上させることができます。
今後も、開発者の皆様にとって価値のある機能を追加していきます。ご意見やフィードバックがありましたら、サポートチームまでお知らせください。
