web-dev-qa-db-ja.com

なぜFirefoxは画像のサイズ変更がそんなに悪いのですか？

左側には元のPNGがあり、右側には<img widthとheightを使用して元のサイズの約半分に縮小されたバージョンがあります。 [リンクが削除されました]をご覧ください。

Firefoxでサイズ変更された画像がとてもぼやけているのはなぜですか。画像ファイルを変更せずにできることはありますか。画像に大量の数学やテキストが含まれていると、あいまいさが特に面倒です。

enter image description here

imagefirefoxresize
60
Frank Seifert

Firefoxイメージのダウンスケーリングに関連して 長年のバグチケット Bugzillaに提出されています。可能であれば、チケットを監視して最終的な解決を追跡するか、自分でパッチを提供することをお勧めします。

最善の回避策は、CSSプロパティtransformを使用して、問題の画像に小さな回転を適用し、サブピクセルレンダリングを強制することです。詳細については、 Ryan Whealeの答え を参照してください。

28
Nick

私はこれが遅いことを知っていますが、非常にわずかな回転を適用することで、Firefoxをだまして画像のレンダリングを改善することができます。同じ効果を得るために画像をtranslate()しようとしました...役に立ちませんでした。

CSS

.image-scale-hack {
    transform: rotate( .0001deg );
}

Javascript

if( "MozAppearance" in document.documentElement.style ) {
    $('.logo img').addClass('image-scale-hack');
}

私はブラウザの盗聴を一切避けます。私はyepnope.jsからこのスニフを借りましたが、それについて悪くは感じません。

また注目に値するのは、この同じトリックを使用して、webkitとfirefoxの両方でサブピクセル画像のレンダリングを強制できることです。これは非常に遅いアニメーションに役立ちます-例で最もよく説明されています：

http://jsfiddle.net/ryanwheale/xkxwN/

43
Ryan Wheale

image-rendering documentation からリンクされています Firefoxはcssまたはインラインスタイルで拡大縮小すると画像がぼやけます Suが参照する回答にはimage-rendering:optimizeQuality（FF4でのテストで問題を修正しました）-例：

enter image description here

12
danlefree

あなたの答えは上記のリンクにあると思います https://developer.mozilla.org/En/CSS/Image-rendering ： '現在自動optimizeQualityはデフォルトで等しく、どちらもバイリニアリサンプリングになります。 「デフォルト値IE8 +：バイキュービック（高品質）」

次に参照： http://www.codinghorror.com/blog/2007/07/better-image-resizing.html '画像を小さくする場合、自然なシャープ効果を持つバイキュービックを使用します。元の画像から余分な詳細をすべて削除した後、新しい小さな画像に残っているデータを強調したいです。

考えられる回避策はいくつか考えられますが、どちらも単純ではありません。

  1. サーバー上の画像のサイズを変更します。半分のサイズでそれを提供し、Firefoxでフルサイズに拡張できるようにするか（おそらく大丈夫でしょう）、または画像のサイズごとに異なるURLを用意します。
  2. プラグインを使用してブラウザでこの機能を実行できる場合があります（ただし、実際に必要なことは実際には実行されないため、削除しました）。
3
GlennS

現在（2017）、バグは2年前にクローズされました。短いテスト：

FF、50％：

FF, 50%

FF、25％：

FF, 25%

1
Tino Rüb

TL; DR：画像のスケーリングは間もなく修正される見込みはありません。どこでも。

長いバージョン：

Eris Brasseurには、「なぜ画像スケーリングソフトウェアがそれほど悪いのか」というより広範な質問にうまく対処するページがあります。

http://www.ericbrasseur.org/gamma.html

この問題に対するW3Cの立場は、おおよそどこにでも間違っているが等しく不正確な実装を持つ方が良いということなので、ガンマを適切に扱うことは避けます（これは問題を少し複雑にします）。したがって、ウェブ標準に慣れている人はだれでもガンマを無視し続け、エリックとこのスレッドで説明されている効果につながります。これにより、ジェフ・アトウッドが別の回答にリンクされている記事に記載しているように、ダウンスケーリングでさえ明確に定義されることからほど遠いことが保証されます。

このような環境では、Lanczosのようなメソッドは成功しますが、その名声は主に、正しく実装されていなくても非常にうまく機能するというものです。

言い換えれば、ブラウザはマクドナルドのハンバーガーに相当するソフトウェアであり、その事実はそのままです。その意味する必要はありませんが、確率は偏っています。

1
Simon Thum

この問題の回避策は、スタイルシートで幅と高さを定義せずに、イメージエディターで元のイメージのサイズを目的のサイズに変更し、イメージをそのまま使用することです。

0
tsveti_iko