ステージ2：画像と方向
怠zyなsrcset、非常識な画像
マット・マルケス
そのため、スケーリングするだけの画像の場合、ソースとその幅をsrcsetにピクセル単位でリストし、サイズを使用して表示する画像の幅をブラウザに選択させ、すべてを制御したいという狂った欲望を手放します。 しかし！ スケーリングの範囲を超えて、画像を適応させたい場合があります。 この場合、ソースコードの選択を制御する小さな部分を返す必要があります。 写真を入力してください。
詳細画像のアスペクト比は16：9です。 大きな画面では見栄えはよくなりますが、電話では小さくなります。 詳細画像に表示する必要のあるステッチと刺繍は小さすぎて考慮できません。
小さい画面で画像を「拡大」して、より高密度で高い形式で表示できると便利です。
このようなこと-画像コンテンツを別々の環境に適合させること-は、「指示」と呼ばれます。 （すべてのサイズを変更するのではなく）コントロールポイントに一致するように画像をトリミングまたは変更するたびに、方向付けに取り組んでいます。
拡大されたトリミングされた画像をsrcsetに含めると、どこに収まるか、収まらないかはわかりません。 画像とソースメディアを使用すると、希望を実現できます。ウィンドウが36 emより広い場合にのみ、幅の広い長方形のフレームをロードします。 また、小さなウィンドウでは常に正方形の画像が読み込まれます。
<picture> <!-- 16:9 --> <source media="(min-width: 36em)" srcset="quilt_2/detail/large.jpg 1920w, quilt_2/detail/medium.jpg 960w, quilt_2/detail/small.jpg 480w" /> <!-- --> <source srcset="quilt_2/square/large.jpg 822w, quilt_2/square/medium.jpg 640w, quilt_2/square/small.jpg 320w" /> <img src="quilt_2/detail/medium.jpg" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." /> </picture>
picture要素には、任意の数のソース要素と1つのimgが含まれます。 ブラウザは、現在の環境に一致するメディア属性が見つかるまで、すべての画像ソースをスキャンします。 適切なソースのsrcsetをimgに送信します。これは、ページ上で「見る」要素のままです。
以下に簡単な例を示します。
<picture> <source media="(orientation: landscape)" srcset="landscape.jpg" /> <img src="portrait.jpg" alt="A rad wolf." /> </picture>
img landscape.jpgの横向きのウィンドウで移動します。 縦向きの場合（またはブラウザが画像をサポートしていない場合）、imgは変更されず、portrait.jpgがロードされます。
オーディオとビデオに慣れている場合、この動作は少し驚くかもしれません。 これらの要素とは異なり、画像は目に見えないカバーです。画像をsrcsetに設定する魔法のスパンです。
別の切り抜き方法：imgは後退しません。 imgを画像にラップすることで、徐々に改善しています。
実際には、これは、画面上の画像に適用するスタイルは、画像ではなくimgを考慮して調整する必要があることを意味します。 picture {width：100％}コードは何もしません。 コードpicture> img {width：100％}は必要なことを行います。
テンプレートが適用されたパッチワークキルトページを次に示します。 画像を使用する目的は、ユーザーに小さな（より便利な）ピクセルの画面を提供し、パフォーマンスがどのように発展するかを確認することでした。
悪くない！ 1xスクリーンでもう少しバイトを送信します。 ただし、元の画像のサイズに関連するいくつかの複雑な理由により、実際に2倍のパフォーマンス向上を感じる画面サイズの範囲を拡大しました。 ページ変更の最初の段階での保存は2画面で480ピクセルで停止しましたが、2番目の段階の後、最大700ピクセルまで拡大しました。
これで、ページの読み込みが速くなり、小さなデバイスでより見やすくなりました。 しかし、まだ完了していません。
第三段階：ソースタイプでいくつかのフォーマットを作成します
インターネットの25年の歴史を通じて、JPEGとGIFの2つのラスター形式が支配的でした。 PNGは、この排他的なクラブに参加するのに10年の苦労を要しました。 WebPやJPEG XRなどの新しい形式は、有望な開発者による優れた圧縮の準備が整っており、アルファチャネルやロスレスモードなどの便利な機能を提供しています。 しかし、srcイメージの孤独な属性のため、実装は非常に遅くなります-開発者はそれを使用する前にほぼ普遍的なフォーマットのサポートを必要とします。 しかし、今日ではありません。 pictureを使用すると、オーディオとビデオ用にインストールされている同じソースタイプモデルに従って、いくつかの形式を簡単に使用できます。
<picture> <source type="image/svg+xml" srcset="logo.svg" /> <img src="logo.png" alt="RadWolf, Inc." /> </picture>
ブラウザがソースのtype属性をサポートしている場合、ブラウザはそのソースのsrcsetをimgに送信します。
これは非常に単純な例ですが、既存のキルトページにソースタイプスイッチを重ねて、たとえばWebPサポートを追加すると、事態は複雑になります（繰り返しが発生します）。
<picture> <!-- 16:9 --> <source type="image/webp" media="(min-width: 36em)" srcset="quilt_2/detail/large.webp 1920w, quilt_2/detail/medium.webp 960w, quilt_2/detail/small.webp 480w" /> <source media="(min-width: 36em)" srcset="quilt_2/detail/large.jpg 1920w, quilt_2/detail/medium.jpg 960w, quilt_2/detail/small.jpg 480w" /> <!-- --> <source type="image/webp" srcset="quilt_2/square/large.webp 822w, quilt_2/square/medium.webp 640w, quilt_2/square/small.webp 320w" /> <source srcset="quilt_2/square/large.jpg 822w, quilt_2/square/medium.jpg 640w, quilt_2/square/small.jpg 320w" /> <img src="quilt_2/detail/medium.jpg" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." /> </picture>
1つの画像に対してコードが多すぎることが判明しました。 さらに、今では12ものファイルが大量にあります！ 各画像の3つの解像度、2つの形式、2種類のトリミング-これは本当にたくさんあります。 パフォーマンスと機能の面で私たちが達成したすべては、困難と予備的な遭遇とメンテナンスのさらなる可能性のために得られます。
オートメーションはあなたの友達です。 ページに多数の異なるバージョンの画像にリンクする大量のコードブロックが含まれることを意図している場合は、すべてを手動で行わないことをお勧めします。
少し良いことがあるはずだという理解で同じこと。 この例の仕様のすべてのツールを使用しました。 それはほとんど合理的ではありません。 効率を大幅に向上させるには、新しい関数を個別に使用します。必要なものや不要なものをすべて保存して実行する前に、レイヤー化のすべての問題を慎重に検討する必要があります。
それでも、毛布のためにWebPができることを見てみましょう。
既に達成しているものよりさらに25〜30％の節約-下端だけでなく、全範囲で-これは間違いなく冗談ではありません！ ここでの私の方法論は決して正確ではありません。 WebPでのパフォーマンスは異なる場合があります。 一番下の行は、JPEG / GIF / PNGの現在の位置よりも大きな利点を提供する新しい形式が既に存在し、引き続き表示されるということです。 画像とソースタイプの属性により、アクセスの障壁が低くなり、画像フォーマットの革新への道が永遠に開かれます。
今日はサイズを使用しています
長年にわたり、レスポンシブページの重要な要素である画像を知っています。 全員に送信した巨大な画面用に特別に作成された巨大な画像。 また、この問題を解決する方法も知っていました。異なるソースを異なるクライアントに送信します。 新しいマークアップにより、まさにそれが可能になります。 srcsetを使用すると、複数のバージョンの画像をブラウザに提供できます。ブラウザは、sizes属性を使用して、バンドルから最適なソースを選択し、ロードします。 写真とソースの属性により、メディアクエリまたはファイルタイプのサポートに基づいて一部のソースが選択されるように、ステップインしてもう少し制御することができます。
これらの機能を組み合わせることで、レスポンシブで柔軟かつレスポンシブな画像を作成できます。 これにより、各ユーザーにデバイス用に特別に作成されたソースコードを送信できるため、生産性が大幅に向上します。 優れたポリフィルと将来への理解を備えた開発者は、今すぐこのマークアップを使用する必要があります！
Habré読者向けの便利なPaystoソリューション：