CSSを使用して幅500px（および高さ263）に縮小した大きなpng画像（950x500px）があります。この Web ページをオンラインにする前に、CSS で画像をスケーリングするのは悪い習慣であるため、GIMP を使用して画像をスケーリングすることにしました。ただし、Google Chrome で CSS ではなく GIMP を使用して画像をスケーリングすると、両方の画像が png で同じサイズであっても、画像の品質が著しく低下します。GIMP が提供する 4 つの圧縮方法 ( None、Linear、CubicおよびSinc (Lanczos3)) をすべて使用してみましたが、どれも Google Chrome の画質に匹敵しません。
このような高品質の画像スケーリングを実現するために Google Chrome が使用する圧縮方法と、これをオフラインで実現するにはどうすればよいですか?
ここであなたの質問に対する答えが得られるかもしれません: Web ブラウザが画像のサイズを変更する方法
Chrome は、倍率に応じていくつかのアルゴリズムを使用しているようです。
非常にわずかなダウンスケール (557 から 555 ピクセル) では、Chrome はアップスケーリングと同じ線形補間を使用します。(このグラフが切断されているという事実は、ResampleScope の動作のアーティファクトであり、Chrome とは関係ありません。)
しかし、もう少し縮小して 543 ピクセルにするとどうなるか見てみましょう。Chrome の戦略は、画像を 2.5% 以上縮小する場合に Lanczos を使用することです。
(結果をより詳細に制御するために) 自分で行う必要がある場合は、通常、スケールアップとスケールダウン
を行うCubicのが最善の方法です。画像を自分で拡大縮小すると、すべてのブラウザーでどのように表示されるかがわかります。Sinc (Lanczos3)
注: 高解像度ディスプレイ (従来のディスプレイの約 4 倍のピクセル密度) を備えたコンピューターがますます増えています。これらのコンピュータで画像がどのように表示されるかを確認することをお勧めします。ブラウザによって拡大される可能性が高くなります。
これは非常に古い質問ですが、昨日 Gimp で画像のサイズ変更に苦労していました。Gimp でサイズ変更された画像と、Chrome (および Safari) で自動的にサイズ変更された画像を比較すると、目に見える違いがありました。
PNG ロゴのサイズを 89x127 から 69x101 に変更していましたが、選択した補間に関係なく、Gimp でのサイズ変更後にテキストがぼやけました。
画像のサイズ変更時に ImageMagick の方が優れた結果が得られるという上記のコメントのおかげで、次の記事を見つけました: ImageMagick を使用した効率的な画像のサイズ変更
記事のコマンドは、Photoshop と見分けがつかないと主張しているにもかかわらず、Chrome に一致する結果を生成しませんでしたが、コメント投稿者の 1 人が、最も近い結果を生成する画像を作成するコマンドを追加しました (私の友人が行ったサイズ変更を除いて)フォトショップ):
convert SOURCE_IMAGE -resize OUTPUT_WIDTH -quality 90 -unsharp 0x0.55+0.55+0.008 OUTPUT_IMAGE
コツは主に研ぎ方にあると思います。さまざまな設定を試してみましたが、Chrome と完全に一致させることはできませんでしたが、これはかなり近いものでした。
完全を期すために、記事のコマンドを次に示します。それがどのように機能するかの完全な説明については、次の記事をお読みください。
mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2 -thumbnail OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB -strip INPUT_PATH