問題タブ [srcset]

calc(.333 * (100vw - 12em))HTML の次の行の意味を誰か説明してもらえませんか? 特に .333 値。それはどこから来たのですか？

http://ericportis.com/posts/2014/srcset-sizes/から取得

長さはいろいろあります！長さは、絶対 (例: 99px、16em) または相対 (この例のように 33.3vw) にすることができます。この例とは異なり、絶対単位と相対単位の両方を組み合わせたレイアウトがたくさんあることに気付くでしょう。そこで、驚くほどよくサポートされている calc() 関数の出番です。3 列のレイアウトに 12em のサイドバーを追加したとしましょう。次のようにサイズ属性を調整します。

私はこれをよく理解しています：

• (最小幅: 36em) = メディアクエリ
• calc(.333 * (100vw - 12em)) = レンダリングされた画像サイズ
• 100vw = デフォルトのレンダリング イメージの長さ

<img srcset=".." sizes=".."/>レスポンシブ画像のhtmlタグ+属性についての質問です。

• 3x Retina ディスプレイ (3 * 341 = 1023) では、srcset の w-descriptor はデバイス ピクセル (1023px) またはレイアウト/CSS ピクセル (341px) を参照しますか?
  編集: 明らかに、w-descriptor は画像解像度を指定します。これは、デバイス ピクセルまたは css ピクセルとは関係ありません。
  しかし問題は、提供された画像の 1 つをブラウザーがどのように選択するのかということです。デバイスのピクセルに基づいていますか、それとも css ピクセルに基づいていますか?
• サイズ属性のメディア クエリは、デバイス ピクセルまたはレイアウト ピクセルを参照していますか?
• サイズ属性の画像幅 px は、デバイス ピクセルまたはレイアウト ピクセルを参照していますか?

私自身の推測では、サイズは常にレイアウト ピクセルを指します。しかし、これが確認できれば望ましいです。

(理想的には、デバイスのピクセル密度に応じて異なる jpg 品質を提供したいと考えています。Retina = 低品質、高解像度。しかし、これはおそらく別の質問です)

完全なシナリオはこちら: Responsive img/srcset/sizes: デバイスのピクセル密度によって jpg の品質が異なりますか?

編集:「デバイス ピクセル」と言うとき、実際にはデバイス上の物理ピクセルを意味します。

デバイスのピクセル密度に基づいてさまざまな jpg 品質を提供できるレスポンシブ イメージ戦略を探しています。

高解像度の小さな画面では、低品質ですが高解像度の jpg を提供します。ピクセル密度の低い大画面では、理想的にはデバイスの解像度に一致する高品質の jpg を提供します。

質問:
これはどうにかして可能<img srcset=".." sizes=".." />ですか?

背景・シナリオ

• 元のサイズが異なる別の元の画像。
• さまざまな画像表示コンテキスト: ギャラリーのサムネイルとして、ブログ投稿に埋め込まれ、モーダル ボックスに、全画面表示として..
• これらの画像の表示サイズを変更するメディア クエリを使用したレスポンシブ レイアウト。必ずしも比例するわけではありません。
  たとえば、デスクトップで 100 ピクセルのサムネイルとして表示されるものは、モバイルでは全幅で表示される場合があります。
• 解像度乗数を備えた高解像度または「Retina」デバイス。これらでは、多くのピクセルが必要ですが、ファイルサイズは小さくなります。

私が検討している解決策

これに対する有望なアプローチは<img srcset=".." sizes=".."/>.

ただし、x-descriptor と w-descriptor を組み合わせる必要があるかどうか、またはどのように組み合わせる必要があるかは疑問です。

x-descriptor は相対的なサイズを指定します。しかし、何に対して？の元の画像サイズとレイアウト幅の両方が、<img>コンテキスト間およびビューポート間で異なる場合があります。ビューポートはメディア クエリの幅を報告しますが、Retina ディスプレイのおかげで、実際のピクセル幅は報告されたビューポート幅の 2 倍または 3 倍になる場合があります。

w-descriptor は絶対サイズを指定します。これは、デスクトップではサムネイル サイズ、モバイルでは全幅のイメージ コンテキスト (またはその逆) の場合に適しています。

質問・関連

デバイスのピクセル密度に応じて異なる jpg 品質を提供するにはどうすればよいですか? （上記の質問）

関連する質問: srcset とサイズはデバイス ピクセルまたはレイアウト ピクセルを参照しますか?

srcsetデバイスのピクセル密度の調整とアートディレクションの両方に使用することに関する多くの記事を読みました。

Paddi Macdonnell による 2015 年のレスポンシブ画像の現状

srcset パート 2: Rich Finelli による W 記述子とサイズ属性

これらのどちらも、 w-descriptors を属性なしで使用できるかどうかsizesを明確にしません。ほとんどは反対を示しま​​す (w-descriptor は と一緒に機能しますsizes)

私自身の初歩的なテストでは、 w 記述子のみを使用して画像の切り替えが機能することが確認されています。

w-descriptor を使用して幅に応じて多数の異なる画像を指定すると、ブラウザーは限られたスペースに収まる最適な画像を選択することがわかりました。

他のコードは必要ありません。

レスポンシブ サイトを設計する場合、これは明らかに混乱を招きます。なぜなら、私はデザイナーとして次のケースしか必要としないからです。

1. device-pixel-density に基づいて画像を変更します (私にとってはうまくいきます。すばらしい!)
2. 利用可能な幅に基づいて画像（アートディレクション）を変更します（私にとってはうまくいきます。素晴らしいです！）

この大失敗にどのように影響するのか疑問に思っていますsizes。これが新しい機能であることを心から感謝します。

jQueryを使用して、picture要素内のソースタグのsrcsetプロパティをどのようにターゲットにしますか? 以下の xxxxxxxxxx.jpg と yyyyyyyyyy.jpg の値を変更する正しい jQuery コードは何ですか?

Wordpress 4.4srcsetでは、画像は自動的に属性を取得します。これに関する私の問題は次のとおりです（この質問を書いているときに解決しました。以下の回答を参照してください）：

• すべてを httpsに転送するために、 posts テーブルsrc="http://...内のすべての参照を(後で両方のプロトコルをサポートするために に変更しました);に置き換えました。src="https://...src="//...
• すべての投稿の画像は、src属性で正しい URL を取得します。
• ただし、srcset属性を取得するすべての画像では、その中の URL には常にhttp://参照が含まれています。

なぜこれが起こるのですか？https://これらの URL が新しく更新された先頭を取得しないのはなぜですか?

大型デバイスのユーザー向けにアニメーション GIF を表示するために使用srcsetしていますが、小規模および中規模デバイスのユーザーには静的 JPG を表示する必要があります。

次のコードは、1x 画面でブラウザー ウィンドウのサイズを変更するときにうまく機能します。私が直面している問題は、iPad でページをポートレート モード (768px) で表示すると、アニメーション GIF が表示されることです。ブラウザは 2 倍の解像度であるため、より高品質の画像を表示しようとしていることがわかりますが、私の場合は、まったく異なる画像である必要があります。

ユーザーの画面の幅が 940px を超える場合にのみ GIF を表示するように変更するにはどうすればよいですか?