これを参照してください：
http://real-sense.com/index.php?option=com_content&view=article&id=106
右側の垂直方向の画像のセットは、CSSを使用してサイズ変更されています
.thumbnail-product-resize
{
width:144px;
height : auto;
}
画像の品質を失わないように、これをよりクリーンな方法で行う方法を知っている人はいますか？
つまり、フォトショップを使用して画像のサイズを変更した場合、テキストはここのようにぼやけて表示されません。
FFでテスト済み
ありがとう
画像の品質は、使用する画像の元のサイズによって異なります。size などの高品質の大きな画像があり400x500、HTML で にサイズ変更された場合80x100でも、400x500画像のままです。ただし、 の小さい画像には特定の数のピクセルしか収まらない80x100ため、この大きい画像をサンプリングする必要があります。これは、ピクセルの平均が取得され、80x100サイズの画像を表すように作成されることを意味します。より明確な結果が必要な場合は、画像の元のサイズを に変更できます80x100。これにより、おそらくより良い結果が得られます。
むかしむかし、ブラウザの画像のサイズ変更は、画像のスケーリングに使用された洗練されていない最近傍法により、本当に凶悪な結果をもたらしました。今では通常、スケーリング時にフィルタリングを実行し、ブラウザー内でのサイズ変更と Photoshop でのサイズ変更に大きな違いはありません。
クライアントに提供する前に画像をスケーリングする本当の利点は、必要のない大きな画像のダウンロードを強制しないことです。画像のサイズによっては、ページの読み込み時間を大幅に短縮できます。
最後に考慮すべきことは、「Retina」ディスプレイを搭載したデバイスを使用する人がますます増えていることです。これらのユーザーの場合、提供する前に画像をスケーリングすると、画像の鮮明さが大幅に低下します。
さまざまなブラウザーで使用される画像スケーリング方法の詳細な比較を次に示します: http://entropymine.com/resamplescope/notes/browsers/
フォトショップでこれを行ったとしても、あなたが持っているそれらの画像は、今とほとんど同じように表示されます.
参考までに、上記の CSS に height:auto を含める必要はありません。
最善の策は、画像の一部だけを表示する別のサムネイル セットを (Photoshop を使用して) 作成することです。
サムネイルを読み込んで css を使用してサイズを変更することは、ユーザーに最初に大きな画像をダウンロードさせているため、悪い習慣です。
ベクトル画像でない限り、品質を落とさずに画像を縮小することは不可能です。つまり、SVG を使用する必要があります。そして、表示される画像を考えると、あなたがそれをしたくないとは思いません.
また、それを行うためのよりクリーンな方法、フォトショップなどを使用する方法についても言及しました。