CSSによる画像のサイズ変更はまだ悪い考えですか？

元の画像が実際のものではない画像に幅/高さ属性を使用することは悪い考えであると常に見られてきました。これは、ピクセル化された画像や、必要以上に大きいダウンロードサイズを意味する場合があります。

しかし、これはまだ問題ですか？写真のサイズを大きくすることはお勧めしませんが、元のサイズとの違いがあまり大きくなく、縮小しても問題にならないはずです。

たとえば、600x400の写真に400pxの幅を貼り付けます。最近のほとんどのブラウザーは画像を縮小し、レンダリングはまだまともです。

だから、これについてみんなはどう思いますか？

スケーリングについては気にしないでください（ほとんどのブラウザーは、私の経験では、スケーリングされた画像をうまく表示します）。エンドユーザーに送信したペイロードのサイズについても心配しません。

もちろん、使用するつもりがなく送信している余分なピクセルのために、両端でわずかな帯域幅を浪費しているだけだと主張することもできますが、時間コストもかかります。

必要なサイズを超えるサイズで送信するすべての画像について、ユーザーのページ読み込みにわずかな遅延を追加します。画像が2枚だけのWebサイトの場合、これは問題になりませんが、サポートアセットが多数あるサイトの場合、顕著な遅延が発生し始め、遅延により費用がかかります。

また、帯域幅の小さなコストに関しては、サイトのトラフィックが増加すると、帯域幅の小さなコストも上昇します。

だから、あなたの会社のお金を節約し、あなた自身で画像のサイズを変更する必要があるでしょう30秒を費やしてください！:)

いつものように、ベンチマークを行いますが、アプリが本当に人気がある/ミッションクリティカルでない限り、幅を頻繁に変更する必要がある状況であれば、600から400へのダウンサイジングについて心配する必要はありません。1回限りの場合は必ず実行してくださいconvert -geometry 400x photo1.jpg photo2.jpg。ただし、高速に反復しているアプリの場合は、パフォーマンスの領域内であっても、おそらくもっと重要なことを考慮する必要があります。例：レイテンシー。たとえば、画像をプリエンプティブにロードする。

画像サイズはモバイルデバイスで重要になる可能性があります。画像サイズが大きいと、読み込みが遅く（モバイルブロードバンド）、レンダリングに時間がかかり（低品質のハードウェア）、高解像度では完全に表示されないというトリプルワンミー効果があります。とにかく。

レスポンシブな画像を確認することもできます。サーバー上の画像を自動的にダウンサイジングしてからキャッシュするなど、多くの作業が行われています。これが頻繁に発生する場合は、良い方法です。

問題はペイロードであり、ブラウザーがレンダリングするサイズはどのサイズでもほぼ問題ありません（あなたが話している特に小さなサイズ）。

大量のサイトでは、1バイトでも問題になります。不要なデータを送信したくない。

悪い考えといえば、幅/高さを数ピクセル調整することは悪い考えではありません。ただし、大きな画像をサムネイルに縮小する場合は、非常に悪い考えです:)