レスポンスイメージ：サイズ変更または動的にトリミングしますか？

Question

この質問は実際にはコーディングではなく、タスクの正しい方法を選択することです。私は一度それらを写真と一緒に自分の投稿を追加する機能を与えた地方新聞のために小さなCMSを構築しました。..

を、それはSOのルールに反している場合、私は知りませんが、ここに行きます。写真に関しては、1枚の写真をアップロードしていたので、さまざまなバージョンの写真を保存しました（テンプレートで、画面サイズではありません）。

今、私はこの古い私は応答性/適応性のジレンマに直面しています。

限り、オンラインで私の調査結果として、次の大きなものは<picture>要素です。私は多くのリソースを見つけたと私はそれのために行くことを決めたときに、私はaccross thisのウェブサイトに来た。あなたが任意の画像のソースを見れば、私は、ウィンドウのサイズを変更すると、それはそれは私がこのウェブサイトは、Image Resizerを使用して、画面サイズに応じて、1枚の写真がされているとされると信じていwidth=300&height=200&mode=crop&scale=both&meta=square&anchor=topcenterのようなものなwidth=940&height=320&mode=crop&scale=both&meta=panoramicとしてクエリ文字列になっています実現します新しい画像を出力するためにサーバによってその場で処理される。

私は理解していないこと picture要素はまだ一つだけを必要とし、それが画面サイズに適した一リサイズする作物imageresizerのに対し、サーバーにアップロード複数の画像を必要とするため、実際に優れているこれらの方法のどれです。しかし一方で、picture要素では、サーバーはイメージのサイズ変更要求に砲撃されませんが、処理と時間を節約して既存の写真を処理しますか？

Answer 1

Image Resizerのライブラリは、あなたの最善の策のように聞こえます。さまざまな画像サイズをアップロードして管理する手間が省けます。

画像のサイズ変更のオーバーヘッドが懸念される場合（とにかく小さい）、DiskCacheプラグインを試してみてください。画像をサイズ変更してディスクに保存すると、同じサイズの同じ画像それを返す。あなたがへリンクサイトで

Answer 2

ブラウザのビューポート（およびサイトのデザイン）が変化したときに、画像srcはJavaScriptで変更されます。

ブラウザをロードする必要があるかどうかを確認するには、このJavaScriptが実行されるまでブラウザが待機する必要があります。

<img srcset="…">または<picture>という最新のマークアップをサーバーに保存しておくと、ブラウザはHTMLをダウンロードするときに必要なものをすべて取得します。つまり、CSSまたはJavaScriptよりも前に最適な画像をダウンロードできます。ダウンロードおよび/または実行される。これは実際にはパフォーマンスが向上し、ユーザーにとっても非常に優れています。また

、これらの規格は、今ではJavaScriptがブロックされるか、または何らかの理由で中断されている場合でも動作しますが、ほとんどのブラウザでサポートされているため。