サムネイルを作成するために画像操作ライブラリを使用して何百もの画像を処理しています。サムネイルはスペースを取り、処理するために追加のコードが必要です。サムネイルをトリミングする必要がなく、比率を維持したいとします。
HTMLまたはCSSで画像のサイズを変更するだけの欠点はありますか？
<img src="image.jpg" width="150" />
私は数年前に質問をしなかったでしょうが、今日のウェブサイトは超高速でロードされます。HTMLで画像のサイズを変更することはまだお勧めできませんか？サイズ変更された画像は、サムネイルと同じ速さで読み込まれるように見えます。HTMLでサイズ変更された画像は元のサイズを維持しますが、視聴者がサムネイルを見る限り誰が気にしますか？サムネイルをダウンロードする人は誰もいません。HTMLで画像のサイズを変更しないのはなぜですか？
ブラウザによってサイズ変更された画像は読み込みに時間がかかるため、レンダリングに必要な計算能力よりも多くの計算能力があり、さまざまなディザリング方法が使用されているため、ブラウザ間で同じようには見えません。サーバーの過負荷が速くなり、より多くの帯域幅を使用します。
適切なサーバー側の画像リサイザーを作成するために細心の注意を払ってください。あなたの訪問者、特に接続が遅く帯域幅の上限がある訪問者は、それを本当に感謝します。
また、サムネイル画像の場合でも、タグに画像の幅と高さを指定することをお勧めします。ブラウザは、別の画像が取得されるたびにレイアウトを再計算する代わりに、その情報を使用してページを1回レイアウトします。
画像のサイズ変更とは、元の画像のサイズをサムネイルサイズに変更してアップロードすることを意味します。これにより、メイン画像は「言い」1 MBになり、サムネイルは約になり200 KBます。
複数の画像を配布すると言ったので、タグを使用すると大きなスペースが必要になるためwidth、タグと一緒に使用することはお勧めできません。<img />したがって、CSSで制御することをお勧めします。
img {width: 150px;}