レスポンシブ画像は現代のWebサイトの重要な要素ですが、フロントエンド開発者にとっては導入と管理に時間がかかることもあります。これまで、開発者はさまざまなデバイス解像度に対応するために、各画像のサイズを複数作成する必要がありました。幸いなことに、 srcset 属性は、利用可能なオプションに基づいて最適な画像サイズを識別するようにブラウザに指示することで、その必要性を軽減します。
ザの srcset 属性は、サイトの画像、ひいてはパフォーマンスを最適化するための最適なツールの1つです。この投稿では、imgix がどのように使い方を簡素化するのかについて説明します srcset アトリビューションと最新情報をお伝えします srcset 能力: すべてのコアライブラリの自動生成。
srcset を使用する際の課題
その方法については前に説明しました srcset サポートに役立ちます デバイスのピクセル比が異なるただし、属性を正しく使用するのはいくつかの理由で難しい場合があります。
- 各画像を手動で変換して保存する必要があるワークフローを使用すると、労力と時間がかかります。
- 変換が完了した後でも、変更を加えたり、間違いを修正したりするためのコストは高くなる可能性があります。
imgix のオンザフライ画像変換および最適化サービスは、まさにこれらの問題を軽減できる独自の立場にあります。各イメージのサイズを手動で変更してローカルまたはクラウドストレージに保存する代わりに、各イメージ内でそれらの変換をすばやく指定できます。 srcset imgix レンダリングパラメータを使用したエントリ。
しかし、使用を検討している人には、いくつかの疑問が残ります srcset 属性:指定するブレークポイントのサイズを正確に知るにはどうすればよいですか?そして、いくつの異なる画像バリエーションを指定すべきでしょうか？お客様がどのようにカスタムを作成できるかを考え始めたとき、私たちはこれらのニーズを念頭に置いていました。 srcset imgix を使用したアトリビュート。
[マニュアル] srcset 生成は imgix で自動的に生成するよりも複雑です。
自動 srcset 世代
これまでのところ、imgix のコアライブラリにおける主な焦点は、ユーザーが imgix URL をすばやく簡単に生成できるようにすることでした。昨年、私たちはサイトでレスポンシブな画像をサポートしたいと考えているユーザーに価値を提供できる他の方法について考え始めました。その結果、自動サポートが追加されました。 srcset すべてのコアライブラリへの生成
自動 srcset 世代には2つの形態があります 流体幅 または 固定幅:
- 流体幅、幅記述子とも呼ばれます
srcset、ブラウザーのビューポートの幅に基づいてさまざまなサイズの画像を表示するために使用できます。 - 固定幅、ピクセル密度記述子とも呼ばれます
srcset、同じサイズの画像をさまざまな解像度で提供するために使用できます。
ユースケースによっては、次のようなものを生成したいと思うでしょう srcset これら 2 つの方法のいずれかを使用します。幸いなことに、当社の SDK のインターフェースでは、生成するフォームを簡単に指定し、希望するレンダー API パラメーターを使用して作成することができます。
使用方法 srcset ジェネレーション・ウィズ・イムギックス
imgix を使って srcset を自動的に生成する方法を見てみましょう。開始するには、次のページに移動してください。 図書館 ページで、選択した言語のコアライブラリを選択します。この例では、JavaScript ライブラリ () を使用して srcset を生成する方法を説明します。imgix-core-js)。
ライブラリは新しい関数を公開します SrcSet をビルドこれにより、流体幅が生成されます srcset デフォルトで。この関数は以下のようになります。
var imgixClient = 必要 ('imgix-core-js');
var クライアント = 新しい imgixClient ({
ドメイン:'テスト.imgix.net',
ライブラリパラメータを含める: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=7400 7400w、
https://testing.imgix.net/image.jpg?w=8192 8192w
お気づきかもしれませんが、 SrcSet をビルド 関数は約 31 の文字列を返します srcset エントリ。これらの 31 個のエントリにより、ページ上の目的のイメージ幅と imgix から配信されるイメージ幅との間に最大 8% の差 (「幅許容値」とも呼ばれる) があることが保証されます。さまざまな画面サイズ、画像、解像度でさまざまな幅の許容値をテストしました。
幅の許容値を大きくすると、画像の派生バージョンが少なくなり、ユーザーがすでにキャッシュされている画像をリクエストする可能性が高くなるため、キャッシュヒットが改善されます。欠点は、画像のスケーリングによって視覚的なパフォーマンスが低下し、許容範囲が大きくなると帯域幅が指数関数的に増加することです。キャッシュは画像の読み込み時間を大きく左右する可能性があるため、通常は画像サイズよりもキャッシュの方が重要です。
16パーセントでもビジュアルパフォーマンスに違いは見られませんでしたが、優れた画質へのこだわりを維持するために、控えめにすることを決め、8パーセントの許容範囲を選択しました。これにより、顧客が使用しているデバイスに関係なく、100 px から 8192 px まで、どの解像度でも画像が自動的に美しく表示されます。
固定幅が必要な場合 srcset 代わりに、呼び出し時に特定のレンダリング API パラメーターを指定する必要があります SrcSet をビルド。固定幅パラメータになる特定のパラメータは以下のとおりです。 w (幅)、または h (高さ) と 戦争 (アスペクト比) を合わせて。これらの寸法パラメータを考慮すると、ブラウザはユーザーの端末の解像度に基づいて最適なサイズの画像を表示できるようになります。
//`w` (幅) を渡すか
//または
//`h` (高さ) と `ar` (縦横比) は
var srcset = Client.buildSrcSet ('image.jpg', {
w: 800
});
console.log (アークセット);
これにより固定幅が生成されます srcset imgix レンダリング API がサポートするのと同じ数のデバイスピクセル幅の組み合わせで構築されます。
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
これにはいくつかの点にも気付くでしょう srcset 属性:
- A
dpr(デバイスピクセル比) パラメータは、各ピクセル密度に対応する各エントリに追加されます - 変数
q（品質）は各エントリに含まれています。高DPR 画像はデバイス上で高いピクセル密度で表示されるため、画質を下げてファイル全体のサイズを小さくしても、体感の画質は損なわれません。
ほとんどのユーザーにとって、これら 2 つのルートのうちの 1 つでニーズの大部分をカバーできるだけでなく、時間や帯域幅を節約するデフォルトの動作も用意されています。
結論
この投稿では、レスポンシブなサイズ切り替えを自動で提供する方法を説明しました srcset generationでは、この関数がコアライブラリの1つで実際に動作している例を紹介しました。この SDK インターフェースへの拡張により、構成を気にすることなく imgix を使用してレスポンシブ画像を簡単に構築できる利便性がさらに高まります。
今後も、お客様にユーティリティを自動的に提供できる他の方法を検討していきます。この機能強化やその他のアイデアについてフィードバックがありましたら、ぜひお聞かせください。サポートチームに support@imgix.com までメールでお問い合わせください。
