問題タブ [srcset]

私はsrcsetについて読んでいます。

残念ながら、すべてのブラウザと完全に互換性があるわけではありません。それをサポートしていないブラウザーではどうなりますか? すべての画像がダウンロードされますか? この場合、使用する画像を指定できますか?

モバイルに移行したときにレスポンシブ画像を切り替えようとしています。現時点では、picturefill.js と srcset とサイズを使用して切り替えを行っていますが、画像は以下で使用されるコードから切り替えられません。

現在、自分のサイトでよりレスポンシブな画像を作成しようとしています。いくつかの調査の後、私はsrcsetとsizes属性を見つけました。

ここでの私の目標は次のとおりです。

• 画面サイズが 600px 以上または 300px 以下の場合、250x250 の画像を配信したい
• これら2つの値の間にある場合、350x350の画像を提供したい
• また、ピクセル比率が高い画面には、より解像度の高い画像が必要です

これが私が思いついたものです。しかし、それは私のようには機能していません。小さな 250x250 は常に配信されています。

追加の質問が 1 つあります
。私のテストでは、別の画像を提供するためにウィンドウのサイズを変更すると、ブラウザーが新しい画像を読み込まないことがわかりました。それは可能ですか？

古いブラウザー用の JavaScript パッチを作成しようとしています。通常、次のような機能検出コードから始めます。

しかし、この機能を部分的に実装しているブラウザーには問題があります。

具体的には、srcset 属性にパッチを適用しようとしています。最新のブラウザーのほとんどは、属性がサポートされていると報告しますが、すべてが完全にサポートしているわけではありません (x プロパティはサポートしていますが、w プロパティはサポートしていません)。

これを検出する JavaScript メソッドはありますか?

ありがとう

HTML5 では、画像にsrcsetおよびsizes属性を含めることができます。width画像に属性と属性の両方がある場合にブラウザーがどのように反応するかについて、私は何も読んだことがありませんsizes。

私の推測では、sizes(それに付随するものがあるsrcset場合) が優先されるべきです。公式の言葉がどこにあるのか誰か教えてもらえますか?

ありがとう

私は、タグを使用srcsetしsizesて頭を包み込もうとしているところです。img

主にこの記事のおかげで、基本は理解できたと思いますが、sizes属性の実際の適用には苦労しています。

私が見つけることができるすべての例では、物事は大幅に単純化されており、サイズ属性は、各ブレークポイントで画像の幅がビューポートの幅の正確な比率になるように宣言されており、vm単位を使用できます。例えば：

もちろん、実生活では、画像自体が他のコンテナー内にあることが多い他のコンテナー内にあり、それぞれに独自のマージン、パディング、または配置があります。

最も単純なケース (画像の幅が流動的で、ビューポートの正確なパーセンテージではない場合) を除いて、calc使用する必要があると言っても過言ではありません。ビューポートの幅から、コンテナを介して画像まで計算されますか? たとえば、メイン ページ コンテナーの 25% であるサイドバーの内側にある 15px の余白を持つコンテナーの 45% のコンテナー内にある 7px のパディングを持つコンテナーにある画像の正しいサイズをどのように計算しますか? 15px のパディングと 1220px の最小幅がありますか?

サイズ属性でこれを計算しようとするのはばかげているように思えます。特に、これらすべてが各ブレークポイントで変更される可能性があることを考えると。この非常に複雑な計算を CSS の変更と同期させなければならないことは、狂気のように思えます。そして、パッチのブラウザサポートがありcalcます.

明らかな何かが欠けているように感じますが、それは何ですか?

注: 属性を使用してサイズの計算を行うAlexander Farkas の優れたLazy Sizesdataは知っていますが、標準的な使用方法に興味があります。

多くの画面サイズで全幅で表示するバナーが必要です。これを達成するために、バナー画像の 4 つのバージョンがあります。

1. banner-long@2x.jpg (2880x640)
2. バナー-long.jpg (1440x320)
3. banner-short@2x.jpg (1440x640)
4. バナーショート.jpg (720x320)

srcset属性を使用しています。

ただし、長いバージョンが読み込まれるように幅の広いブラウザーで開始し、ブラウザーの幅を縮小すると、長いバージョンがキャッシュされるため、短いバージョンは読み込まれません。ブラウザー (Chrome) は、既に高解像度バージョンをダウンロードしていると認識しているため、小さいバージョンを読み込む必要はありません。ただし、小さいバージョンを使用することの要点は、アスペクト比がモバイル デバイスにより適している (つまり、アスペクト比が小さい) ことです。小さい画像アセットを強制的に読み込みたい

これを行う方法はありますか？

基本的に画像と付随するテキストであるページに記事をレンダリングする部分的なテンプレートがあります。ランディング ページでは、さまざまなクラスの複数の記事をページに表示します。先頭の記事は全幅、2 番目の記事は 2 番目の幅、3 番目の幅は 3 番目の記事になります。また、サイドバー記事の幅が非常に狭い場合もあります。ビューポートによっては、画像がテキストの上または左にレンダリングされる場合があります。

要約すると、同じ記事の HTML は、コンテキストに応じてさまざまな方法でレンダリングされます。

最新の srcset 仕様でこれを説明する方法はありますか?

私が言えることから、コンテキストごとに異なるサイズ属性が必要であり、本質的にレイアウト/ブレークポイントをマークアップに結合する必要があります。これは、非常に多くのコンテキストを持つ私の実装では、サーバー側のロジックを恐ろしくします。

タイトルが示すように、でそれを行う方法はありgulpますか? picture複数のimg srcset属性に複数の画像を含める必要があります。そして、これはサイト上のアセット専用です (つまり、ユーザーがアップロードした写真ではありません)。

を使用して、タブレット用とモバイル用の 2 つの画像を作成したいのですgulp-copyが、おそらくお勧めしません。モバイル ディスプレイは 320px-500px (幅)、タブレットは 500-1000px (幅) になると想定しています。

私の戦略は、最初に画像を最適化し、その画像をマスターとして作成し、次に 2 つの他の画像を生成することです。そのため、ソース画像は常にデスクトップ用 (表示幅 > 1000px) であると想定しています。<-- 他のディスプレイであると仮定してパラメータを渡すことができるタスクがあれば、さらに良い

私のもう 1 つの課題はheight画像です。各ディスプレイの基準はありません (基準を作成するのは非常に困難です)。したがって、100px x 800px の画像がデスクトップの画像であると仮定すると、モバイルとタブレットの計算方法がわかりません。

これまでにこれをやったことがある人はいますか？gulpで画像解像度のサイズを変更しますか?

解決済み: とgulp-responsive-images