問題タブ [srcset]

次のlaravelコードがあります。

私がやろうとしているのは、幅 < 600px の場合は 600x600 の画像を表示し、幅 > 600px の場合は 410x620 の画像を表示することです。

上記のコードはデスクトップで動作します。ただし、iPhone (iOS 8.1.2、safari/chrome) では、代わりに 410x620 の画像が表示されます。IE9 - IE11 を除き、Picturefillが含まれていなくても (デスクトップとモバイルの両方で) 適切に動作します。

私がここに欠けているものはありますか？

解決策:

Chrome 40.0.2214.91 の img タグ (レスポンシブ画像) の srcset 属性に多くの矛盾が見られます

Chrome v40 に更新する前 (私は ~39 でした)、srcset 属性は正常に機能し、ブラウザーのサイズ変更時に画像を交換していました。現在、ブラウザを目的の幅に設定してからページを更新すると、画像の小さいバージョンが表示されることがあります。それ以外の場合は、まったく機能しません。

jsbin のテスト: http://jsbin.com/hulaconake/1/edit?html,output

私が持っている画像タグ：

<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">

また、これを Placehold.it 以外の画像を含む別の環境でテストし、Picturefill.js http://scottjehl.github.io/picturefill/を使用しています

FF または Safari (どちらもピクチャフィルを使用) で問題はありません。

iOS Chrome にも同様の問題があります。

私の構文は間違っていますか？私が知らない何かが起こっているのですか？

レスポンシブ イメージで Bootstrap を使用しています。ブラウザに複数の画像サイズを提供することで、読み込み時間を最適化したいと考えています。この記事によると、このような srcset を使用した単純なアプローチは、ブラウザーに最適な画像サイズを選択させるのに適しています。

私の問題は、これを Bootstrap img-responsiveクラスと組み合わせると、小さいサイズの画像だけが必要な場合でも大きなサイズの画像が読み込まれることです。

ここでのコード例: Bootply . テストには Chrome を使用してください。Chrome には srcset サポートのサポートが組み込まれています。(他の一部のブラウザでは、picturefill.js を認識する必要があります。)

画像のソースをコピーすると (または [ネットワーク] タブの Chrome 開発者ツールを見ると)、幅 750 のバージョンが読み込まれ、小さな画像にサイズ変更されていることがわかります。使用する。(picturefill JS が img srcset をサポートするためにロードされている場合、IE と Firefox でも同じことが起こります。)

私は何を間違っていますか？

次のマークアップを持つページに取り組んでいます。

最新のChromeとOperaでは、画面サイズが何であれ無視され、最後にリストされているファイルが出力されるようです(私の場合は1234x400.jpg)。

Picturefill を使用すると、Firefox と Safari の両方が小さな画面で正しい画像を表示します。

今日のテスト中に、しばらく開いていなかった Opera を起動しました。最初に起動したときは v25 で、小さい画面サイズでも正しい画像が表示されました。

その後、アップデートがダウンロードされたことに気づいたので、それを実行して v27 にアップデートすると、Opera は最新の Chrome と同じ問題を表示していました。

ということで、最近Blinkで何かが変わったようです。

他の誰かがこれを確認できますか、それとも私が間違っているだけですか?

私が何を意味するかを説明するためのCodepen。

sizesPictureFill 2.0ポリフィルで属性が正確に何のためにあるのかを理解しようとしています。以下にいくつかの基本的な例を示します。

ドキュメントによると：

構文は、sizesいくつかのブレークポイントで画像のサイズを定義するために使用されます。srcset次に、画像の配列とその固有のサイズを定義します。

したがって、sizes属性はブレークポイント全体の画像のサイズを定義します。それがCSSの目的ではありませんか？画像が HTML 属性でどのように表示されるかについて、CSS のようなルールを定義するのはなぜですか? ここで何が欠けていますか？

余談ですが、公式ドキュメントに次のように記載されているのはなぜですか。

新しい srcset および size 属性の使用方法について詳しく説明することは、このガイドの範囲を超えています...

なんだ？それは私を笑わせました。それはドキュメンテーションのためのものではありませんか？

次のHTMLを使用して、レスポンシブ画像に新しいsrcsetアプローチを実装しようとしています

私はchrome 40を使用していますが、取得できるのは最大の画像だけで、ブラウザのサイズを変更し、キャッシュをクリアしても何も起こりません。

ポリフィルが必要な場所を読んだので、ピクチャフィルプラグインを使用しましたが、クロムはそれをサポートする必要があります....それでも機能しません。

そのためのデモページをまとめました： http://www.darrencousins.com/lab/resp-img-srcset/

私は何が間違っている/得られないのですか?

どんな助けでも大歓迎です。

「img」の新しい「srcset」属性について理解しようとしています。簡単なテスト ページを作成しましたが、ブラウザーから見た動作は驚くべきものです。

まず、テストページは次のとおりです。

Retina Macbook Pro と Retina iPod、Chrome/40.0.2214.115 と Firefox 35.0 (Macbook Pro 上)、および Chrome/40.0.2214.73 と Safari/600.1.4 (iPod 上) でテストしています。Firefox で srcset サポートをオンにしました。高速接続でテストしています。

私が見ようとしているのは、さまざまなブラウザーが適切なサイズの画像をインテリジェントに取得できるかどうかです。しかし、彼らは私が期待するように振る舞っていません。

iOS ブラウザーの場合、'sizes' 属性のフォールバック値 '100vw' を使用すると予想されます。ポートレート モードの iPod のビューポート幅は 320px なので、288px または 420px の画像のいずれかになると思います。または、Retina デバイスの場合は、576px または 840px の画像を要求する可能性があります。代わりに、Safari と Chrome の両方が 1920px の画像を要求します。

デスクトップ Firefox ブラウザーは 2 つの要求を行います。1 つ目は、「src」属性で指定されたデフォルトの画像用です。2 つ目は 1920px の画像用です。現在のウィンドウ サイズに関係なく、常に最大の画像を要求します。

デスクトップ Chrome は、私が正しい動作と考えるものを実際に示すのに最も近いものですが、それも風変わりです。テスト ファイルがローカルの場合、ビューポートのサイズに関係なく、常に 1920px の画像が取得されます。テスト ファイルをリモート サーバーに置くと、一般的に 1152px の画像が優先されます (画像を 960px でレンダリングする必要がある場合でも、2x デバイスの論理的な選択は 1920px になります)。Chrome のキャッシュをクリアし、ウィンドウのサイズを変更してリロードすると、小さい画像が要求されることがあります。

私が見ているのがこれらのブラウザーの予想される動作である場合、各ブラウザーのサポートの現在の状態を考えると、おそらく高解像度の画像を提供するべきではないことは明らかです。おそらく遅い接続を介してモバイルデバイスに巨大なJPEGをダンプするよりも、2倍のディスプレイで完璧です. また、Firefox が常にデフォルトのイメージを取得する場合は、イメージを大きくするのではなく、小さくする必要があります。

これらの動作を引き起こしているコードに問題がありますか? そうでない場合、srcset を使用するための現在のベスト プラクティスはありますか?