今年の初め、imgix SDKチームは新機能をすべてに公開しました コアライブラリ ユーザーがレスポンシブ画像をより簡単に作成できるようにするため: 自動アークセット生成。ただし、この機能では、2 つのデフォルトの srcset アトリビュートのうち 1 つしか生成できませんでした。1 つは fluid-width 用です。1 画像、もう1つは固定幅用2 画像。これらのデフォルトの srcset は大半のユースケースに適合すると確信していましたが、開発者の経験は少し不足していると考えました。このことがきっかけで、SDK の srcset 構築インターフェースを拡張して srcset の生成方法をより柔軟に行えるようにしようと考えました。
流体幅のsrcsetの自動生成
オリジナルのデフォルト動作
私たちからのリコール 以前の投稿 srcset ビルダーは次の方法で呼び出せるということです。
//imgix-core-js (https://github.com/imgix/imgix-core-js) を使う
var srcset = 新しい ImgixClient ({
ドメイン:'test.imgix.net',
}) .buildSrcSet ('image.jpg');
これにより、31 個のエントリから成る以下の流体幅の srcset アトリビュートが生成されます (簡潔にするために切り捨てられています)。
https://test.imgix.net/image.jpg?w=100 100w、
https://test.imgix.net/image.jpg?w=116 116w、
...
https://test.imgix.net/image.jpg?w=7400 7400w、
https://test.imgix.net/image.jpg?w=8192 8192w
31の潜在的な画像バリアントを提供するのは大変だと思っているかもしれません。しかし、心配はいりません。imgix には無制限のデリバティブが含まれているので、srcset エントリがこれだけ多くても、毎月の請求額は発生しません。これを念頭に置くと、箱から出してすぐにさまざまなサイズの画像が生成されるので、これは素晴らしいデフォルト動作です。
ただし、誰もがこれらのデフォルト幅を望んでいるわけではなく、場合によってはそれほどの大きさの画像を提供したいとも思わないかもしれません。 8192 ピクセル。したがって、ほとんどの imgix ユーザーはデフォルトの出力ですぐに利益が得られると考えていますが (適切な使用を前提としています) サイズ）、ユーザーが構成を通じてより多くの発言権を行えるようにしたいと考えています。
最新の更新により、srcsets を次の 5 つの新しい方法でカスタマイズできるようになりました。
- を割り当てる 幅範囲 (経由
最小幅そして最大幅) をクリックして、生成時に表示される画像の最小幅と最大幅を指定しますsrcset - を割り当てる 幅許容値 画像のダウンロードサイズとレンダリングされたサイズの最大許容サイズ差を指定します
- 特定の配列を割り当てる 幅 直接
- 変数出力を無効にする 品質
- 出力の上書き 品質 完全に
この投稿では、上記の各機能の機能、カスタマイズが必要な理由、および改善されたインターフェイスを使用してこれらの構成を指定する方法について説明します。
幅範囲のカスタマイズ
新しい 幅範囲 オプションを使用すると、開発者は srcset の最小幅と最大幅を指定できます。これにより、幅が指定した値で開始および終了するようになります。たとえば、幅が 320 ピクセルから 880px の srcset を作成するには、次のように設定します。 最小幅 そして 最大幅 値:
var srcset = 新しい ImgixClient ({
ドメイン:'test.imgix.net'
}) .buildsrcSet (
'image.jpg',
{},//imgix パラメーターを追加しないでください
{最小幅:320、最大幅:880}//最小幅と最大幅を指定
);
これにより、次の srcset が生成されます。
https://test.imgix.net/image.jpg?w=320 320w、
https://test.imgix.net/image.jpg?w=372 372w、
https://test.imgix.net/image.jpg?w=430 430w、
https://test.imgix.net/image.jpg?w=500 500w、
https://test.imgix.net/image.jpg?w=580 580w、
https://test.imgix.net/image.jpg?w=672 672w、
https://test.imgix.net/image.jpg?w=780 780w、
https://test.imgix.net/image.jpg?w=880 880w
幅許容値のカスタマイズ
新しい 幅公差 修飾子により、開発者は最大値を指定できます 許容幅公差 ダウンロードしたイメージとレンダリングされたイメージの間に:
var srcset = 新しい ImgixClient ({
ドメイン:'test.imgix.net'
}) .buildsrcSet (
'image.jpg',
{},//imgix パラメーターを追加しないでください
{
最小幅:320,
最大幅:880,
幅の許容差:.20
}//20% の幅許容値と最小/最大幅を割り当てます
);
これにより、次の結果が返されます。
https://test.imgix.net/image.jpg?w=320 320w、
https://test.imgix.net/image.jpg?w=448 448w、
https://test.imgix.net/image.jpg?w=628 628w、
https://test.imgix.net/image.jpg?w=878 878w、
https://test.imgix.net/image.jpg?w=880 880w
幅の許容値を以下に設定すると .20 （または20％）、srcsetをさらに微調整できます。ここでは、リクエストされた画像のサイズとブラウザでレンダリングされる画像のサイズとの間の許容範囲を広げました。要するに、この結果、デフォルトの動作と比較して、属性内の画像エントリが少なくなります。
幅許容値修飾子を使用すると、キャッシュヒットを最大化するか、ダウンロードしたイメージとレンダリングされたイメージのサイズ差を最小化するかという 2 つの選択肢の間でスケールをスライドさせることができます。(前の例のように) 幅の許容値を大きくすると、キャッシュヒット数は最大になりますが、コンテナに合わせてイメージのサイズが大きくなるため、画質が犠牲になる可能性があります。逆に、幅の許容範囲を小さく指定すると、エンドユーザーは正しいサイズの画像を取得できる可能性が高くなりますが、CDN キャッシュにヒットする可能性は低くなります。
範囲はで指定されたことに注意してください 最小幅 そして 最大幅 結果は閉じた区間 (左と右の両方を含む) になります。つまり、上記の srcset は最小幅と最大幅で開始および終了しますが、「間隔」または幅の許容値のみが変更されています。
画像幅の指定
ここで、これらのsrcsetの幅の値が、私たちが望む値に本当に近いが、正確にはそうではないとしましょう。ユーザーが希望する画像の幅が正確にわかっている場合は、以下を使用して指定できます。 幅:
var srcset = 新しい ImgixClient ({
ドメイン:'test.imgix.net'
}) .buildsrcSet (
'image.jpg',
{},//imgix パラメーターを追加しないでください
{幅:[320、448、572、600、647、878]} //幅を直接割り当てる
);
これにより、次の結果が返されます。
https://test.imgix.net/image.jpg?w=320 320w、
https://test.imgix.net/image.jpg?w=448 448w、
https://test.imgix.net/image.jpg?w=572 572w、
https://test.imgix.net/image.jpg?w=600 600w、
https://test.imgix.net/image.jpg?w=647 647w、
https://test.imgix.net/image.jpg?w=878 878w
固定幅の srcset を自動生成
オリジナルのデフォルト動作
この更新の前は、次のように固定幅の srcset を作成できました。
var srcset = 新しい ImgixClient ({
ドメイン:'test.imgix.net',
}) .buildsrcSet (
'image.jpg',
{w: 330}//幅を指定してください = 330
);
私たちからのリコール 最終投稿 これは、特定の次元レンダリングパラメータを指定することによって（幅 w または 高さ h そして アスペクト比 戦争 まとめて)、代わりに固定幅の srcset を出力します。
https://test.imgix.net/image.jpg?w=330&dpr=1&q=75 1x、
https://test.imgix.net/image.jpg?w=330&dpr=2&q=50 2x、
https://test.imgix.net/image.jpg?w=330&dpr=3&q=35 3x、
https://test.imgix.net/image.jpg?w=330&dpr=4&q=23 4x、
https://test.imgix.net/image.jpg?w=330&dpr=5&q=20 5x
上記の例では、次のことがわかります。 品質 q 次のように減少します デバイスピクセル比 dpr 増加する。画質を下げると、画質にほとんど違いを感じることなく、より明るい画像を提供できます。これは SDK が標準で提供している小さな最適化です。
ただし、ファイルサイズが問題にならない場合や、問題がある場合は dprニーズに合った品質比率に合わせて、可変品質を一括でオーバーライドまたは無効にできるようになりました。
可変品質を無効にするには、次のように設定できます 可変品質を無効にする に 本当:
var srcset = 新しい ImgixClient ({
ドメイン:'demo.imgix.net'
}) .buildsrcSet (
'image.jpg',
{w: 330}
{可変品質を無効にする:true}//可変品質を無効にする
);
結果は srcset その性質は明示的に取り除かれています。可変品質を無効にすると、デフォルトの品質がになることに注意してください。 q=75 暗黙的に適用されます。
https://demo.imgix.net/image.jpg?w=330&dpr=1 1x、
https://demo.imgix.net/image.jpg?w=330&dpr=2 2x、
https://demo.imgix.net/image.jpg?w=330&dpr=3 3x、
https://demo.imgix.net/image.jpg?w=330&dpr=4 4x、
https://demo.imgix.net/image.jpg?w=330&dpr=5 5x
品質が変動せず、品質が一定でない場合 75 ニーズに合わせて、割り当てることもできます カスタム品質。この品質は、次の中からいくつでもかまいません。 0 そして 100。
var srcset = 新しい ImgixClient ({
ドメイン:'demo.imgix.net'
}) .buildsrcSet (
'image.jpg',
{w: 330, q: 100}//デフォルトのクオリティ変数をオーバーライドする
);
https://demo.imgix.net/image.jpg?w=330&q=100&dpr=1 1x、
https://demo.imgix.net/image.jpg?w=330&q=100&dpr=2 2x、
https://demo.imgix.net/image.jpg?w=330&q=100&dpr=3 3x、
https://demo.imgix.net/image.jpg?w=330&q=100&dpr=4 4x、
https://demo.imgix.net/image.jpg?w=330&q=100&dpr=5 5x
サマリー
この投稿では、コアライブラリから返される srcset をユーザーが微調整できるさまざまな方法について説明しました。私たちは、ユーザーがより迅速にイメージを構築できるようにする強力なユーティリティを提供するだけでなく、ユーザーが希望する方法で柔軟に作成できるようにしたいと考えています。
ライブラリでのデベロッパーエクスペリエンスについて何か提案や質問がありますか？お気軽に課題を投稿してください GitHub または当社までご連絡ください サポートライン。
- 1Fluid-Width srcset: アトリビュートには、幅が異なる [画像候補文字列] (https://html.spec.whatwg.org/multipage/images.html#srcset-attributes) (URL) が含まれています。この種の srcset は、ブラウザーのビューポートに基づいてさまざまなサイズの画像を提供することが目的である場合に役立ちます。
- 2固定幅 srcset: 属性には、幅が固定されている [画像候補文字列] (https://html.spec.whatwg.org/multipage/images.html#srcset-attributes) (URL) が含まれていますが、解像度 (ピクセル密度) は異なります。この種の srcset は、同じサイズの画像をさまざまなデバイスで、異なる解像度 (ピクセル密度) で提供することが目的である場合に役立ちます。
