CSSによる画像のサイズ変更はまだ悪い考えですか？
元の画像が実際のものではない画像に幅/高さ属性を使用することは悪い考えであると常に見られてきました。これは、ピクセル化された画像またはessaryよりも大きいダウンロードサイズを意味する場合があります。
しかし、これはまだ問題ですか？写真のサイズを大きくすることはお勧めしませんが、元のサイズとの違いがそれほど大きくなく、縮小しても問題にならないはずです。
たとえば、600x400の写真に幅400pxを貼り付けます。最新のブラウザのほとんどは画像を縮小し、レンダリングはまだまともです。
それで、これについてみんなはどう思いますか？
スケーリングについて心配する必要はありません（ほとんどのブラウザーは、スケーリングされたイメージを私の見た目では見栄えよくします）。エンドユーザーに送信したペイロードのサイズについて心配してください。
確かに、使用するつもりがなく送信している余分なピクセルのために、両端でわずかな帯域幅を浪費しているだけだと主張することはできますが、時間コストもかかります。
必要なサイズを超えるサイズで送信するすべての画像について、ユーザーのページ読み込みにわずかな遅延を追加します。画像が2枚だけのWebサイトの場合、これは問題になりませんが、サポートアセットが多数あるサイトの場合、遅延が顕著になり、遅延が発生します 費用がかかります 。
また、小さな帯域幅コストに関しては、サイトのトラフィックが増加するにつれて、小さな帯域幅コストも増加します。
だから、あなたの会社のお金を節約し、あなた自身で画像のサイズを変更する必要があるでしょう30秒を費やしてください！ :)
いつものように、ベンチマークを行いますが、アプリが本当に人気がある/ミッションクリティカルでない限り、幅を頻繁に変更する必要がある状況であれば、600から400へのダウンサイジングについて心配する必要はありません。 1回限りの場合は確かにconvert -geometry 400x photo1.jpg photo2.jpgを実行しますが、高速に反復しているアプリの場合は、パフォーマンスの領域内であっても、おそらくもっと重要なことを心配する必要があります。例えばレイテンシー;たとえば、画像をプリエンプティブにロードします。
画像サイズはモバイルデバイスで重要になる可能性があります。大きな画像サイズは、読み込みが遅く（モバイルブロードバンド）、レンダリングに時間がかかり（低品質のハードウェア）、高解像度で完全に表示されない-トリプルワーミー効果です。とにかく。
レスポンシブな画像を確認することもできます。サーバー上の画像を自動的にダウンサイジングしてからキャッシュするなど、多くの作業が行われています。これが頻繁に発生する場合は、良い方法です。
問題はペイロードであり、ブラウザがレンダリングするサイズはどのサイズでもほぼ問題ありません（あなたが話している特に小さなサイズ）
大量のサイトでは、1バイトでも問題になります。不要なデータを送信したくない。
悪いアイデアと言えば、幅/高さを数ピクセルずつ調整することは悪い考えではなく、10ピクセルまたは20ピクセルになることもあります。しかし、大きな画像をサムネイルに縮小する場合は、非常に悪い考えです:)