イメージをシャープネスを維持しながらHTMLで縮小するにはどうすればよいですか？

Question

私は何度も使用するイメージを持っています。いくつかのケースでは、サイズを縮小したいのですが、HTMLでこれを行うと、明らかにシャープネスが失われます。

これを修正する方法はありますか？イメージは他の場所にあり、ローカルに保存することはできません。 dheerosaur状態として

おかげ

Answer 1

あなたは複数のサイズで同じイメージを持っているが、品質を妥協したくない必要がある場合、SVGグラフィックスを使用することができます。

もう1つのことは、Resize.coなどのオンラインサービスを使用することです。イメージファイルのURLと属性を渡し、他のすべてを処理します。

Answer 2

サイズ変更時にブラウザがイメージをレンダリングする方法を制御することはできません。サイズ変更時にPhotoshopのフィルタ（または別のツールのフィルタ）を通過すると、画像がより見やすくなります。

Answer 3

私はバイト単位で画像のファイルサイズを小さくするために知っている三方があります：

1. は、JPGなどの非可逆圧縮アルゴリズムを使用して形式にファイルを変換します。明らかに画像はシャープネスを失います。
2. PNGのような可逆圧縮アルゴリズムを使用してファイルをフォーマットに変換します。イメージに平坦な色の領域がたくさん含まれている場合のみ動作します
3. PhotoshopまたはGIMPを使用してイメージのサイズ変更/再サンプリングを行います。新しい画像の寸法（幅x高さ）が表示されている画像の寸法と正確に同じHTMLの場合、ウェブユーザーにはまだ鮮明な画像が表示されます

Answer 4

実際にFirefoxとInternet Explorerには、

• のFirefox：image-rendering
• のInternet Explorer：HTML属性またはCSSプロパティを経由してリサイズしたときに画像がレンダリングされ-ms-interpolation-mode

これらは他のブラウザでは動作しませんし、IEとFirefoxのすべてのバージョン（またはいずれか）でうまく動作しないことがあります。

しかし、resizer.coが問題を引き起こした場合の代替としてそれらを試す価値があります。