HTTPクライアントのヒントの代替

Question

私は、サーバーアプリケーションが任意の方向でデバイス画面全体をカバーするだけの大きさのイメージを返すソリューションを実装したいと考えています。

私はブラウザが画面サイズやピクセル密度などの画像の要求と共に情報を送信する方法について少し勉強しています。次に、サーバーはその情報を解析して適切なサイズの画像を返します。

この方法では、既存の画像タグ<img src="/myniceimage.jpg" />に変更を加える必要はなく、追加情報もリクエストとともに送信されます。

残念ながら私が見ることができるこの機能にhttp://caniuse.com/#feat=client-hints-dpr-width-viewport

唯一の選択肢は、（そのためのサポートは、Chromeに限定されるものではない）data-srcに画像を移動している参照、このHTTPクライアントのヒントのサポートは限定されてています表示されますブラウザはそれを自動的にロードせず、その後いくつかのjavascript関数を使ってイメージを手動でロードし、リクエストのヘッダーに画面の解像度とピクセル密度を送信します。

---

data-srcに私のイメージリンクを移動するために私を必要とせず、それらをロード手動でJavaScriptの機能を持っているサーバーに送信された画面サイズとピクセル密度を得るために他のいくつかの方法があります。あるいは、サーバーが既存のヘッダーを使用して、すべてのブラウザーが何らかの理由でその情報を推定したり推定したりする他の方法がありますか？

ありがとうございます！

Answer 1

投資する内容によって異なります。ブラウザーがサーバーに返すHTTP要求に、必要な情報（レンダリングされた画像の幅）をどうにかする必要があります。

クライアントヒント（この機能を提供するように特別に設計されている）以外に、またはJavaScriptを使用する唯一の方法は、srcset属性を乗っ取ることです。しかし、あなたの心は、ピクセル完璧な応答をしたい場合は、そのソリューションは、すべてが、エレガントです：

<img srcset=" 
    foo.1px.jpg 1w, 
    foo.2px.jpg 2w, 
    foo.3px.jpg 3w, 
    ... 
    foo.998px.jpg 998w, 
    foo.999px.jpg 999w, 
    foo.1000px.jpg 1000w 
"> 

画像がワイド1ピクセルであるべき時にブラウザがを要求した。この方法で、foo.2px.jpg 2ピクセル幅の広いディスプレイ用など広告に無限。

あなたは、画像サイズの有限集合を持っている200px、500pxを言うと、500pxより任意に大きい場合には、srcsetが実際に実際に行くためのソリューションです：

<img srcset=" 
    foo.large.jpg 501w, 
    foo.500px.jpg 500w, 
    foo.250px.jpg 250w 
">