web-dev-qa-db-ja.com

MicrosoftEdgeでのピクセル化された画像のダウンスケーリング

最近、400x400の解像度で自分のWebサイトのロゴを作成しました。私がテストした他のブラウザでは問題なく40x40にスケールダウンしますが、Edgeでは奇妙に動作します。ページを更新するたびに、ページの読み込みが完了した後、見苦しいピクセル化された外観に変わる前に、一瞬正しくレンダリングされます。

ページが完全に読み込まれる前の外観（およびページの外観）：

How it looks before the page loads fully

ページの読み込みが完了したときの外観：

How it looks when page finishes loading

HTML：

<img src="/images/logo.png" class="logo">

CSS：

.logo {
    width: 40px;
    height: 40px;
}

編集：これが私の問題を再現するための JSfiddle です。

htmlcssmicrosoft-edge
8
Mikkel

画像の低品質のダウンスケーリングはEdgeの既知の問題であり、何年も前から存在しています。

スムーズにリスケールされた画像の短いフラッシュを見たあなたの経験も確認できます。また、場合によっては、画像がスムーズに拡大縮小されたままになっているように見えることもあります。 （問題を確実に再現する1つの方法は、画像のサイズを変更することですafter JSfiddleのサイズを50x50pxに設定するなど、ページが読み込まれます-Edgeの画像サイズが変更されてひどく見えますが、他のブラウザでは結果はスムーズです。）

この問題は、実際にはEdgeのリリースよりも前のものです。最近、MSはそれをいじったようですが、彼らは確かにそれを修正していません。これはMSフォーラムのスレッドです（グラフィックカードのせいで問題を解決したいと必死になっている人がいることに注意してください！）: https://social.technet.Microsoft.com/フォーラム/ ie/en-US/e800cbaf-a539-43ba-b5f9-1d29fe709ddc/the-awful-internet-Explorer-image-renderengine

この問題に関する2015年8月の別の投稿がありますので、まったく新しいことではありません。 https://wpdev.uservoice.com/forums/257854-Microsoft-Edge-developer/suggestions/9279264-better-image-scaling-no-more-jaggies-for-downscal

本当に歴史を掘り下げて、ここに別のデモがあります-2013年から！ https://bug486918.bmoattachments.org/attachment.cgi?id=428179

（そのデモは、2013年のMSブログ投稿へのコメントからのものです： https://blogs.msdn.Microsoft.com/ie/2013/09/12/using-hardware-to-decode-and -load-jpg-images-up-to-45-faster-in-internet-Explorer-11 / なので、少なくとも4年前から話題になっています！）

この同じ問題は、少なくとも2016年11月以降、修正なしでEdgeチームによって2回報告され、バグとして確認されています...

1- https://developer.Microsoft.com/en-us/Microsoft-Edge/platform/issues/9869140/

2- https://developer.Microsoft.com/en-us/Microsoft-Edge/platform/issues/14420925/

そして、ここSOには他にもいくつかの投稿があります。

考えられる解決策の1つは、画像をキャンバスに追加して再スケーリングするOTTのようですが、画像が1つか2つ以上ある場合は、深刻なラグが発生する可能性があります： https：// github.com/sukhoi1/ie-bicubic-img-interpolation-plugin/wiki

唯一の本当の解決策は、MSがこれを修正するまで待つことのようです。今、それが何年になるか賭けをします！

13
JoLoCo

PNGをRGBカラーモード（GIMPを使用）を使用するように変換したときに、PNGが少し改善されました。以前は「インデックス付き」カラーを使用していました。

0
kearly