比較的古いWindowsノートPCでpngが極端にボケて表示される。

windows pcでノートpc7台、デスクトップpc一台で、chrome, edgeで画像（png,gif,jpg）が極端にボケている不具合が共通して発生しております。
全ての画像がボケているならグラフィックドライバーインストールなどで解決すると思うのですが、一番の問題は他のサービスの画像は綺麗に表示されているが、自社サービスのサーバーでのみ画像がボケる現象が発生していることです。

発生している現象

画像を元の解像度で表示するとキレイになるが、ブラウザの幅に合わせてscale downしている時の縮小に失敗してボケてるようです。
アニメーションしている間や、ドラックして動かしている最中は不思議と画像が一瞬キレイに表示されています。動作が終わるとまたボケる。
ボケている画像をダウンロードしてローカルで閲覧する分にはキレイに表示されます。
１台の端末だけChromeではボケて表示され、Edgeでは綺麗に表示される。ブラウザによる差異がみられました。

現象からの仮説

vueを使用しているからとか、自社の実装方法に問題？
メモリ４GBのGPUを使いすぎて画質をボカしていることで帳尻を合わせている？

画像関連は解決したので非表示にさせて頂きました。

以上。ご教授いただければと思います。

2021-06-07追記
同じ不具合が発生するwindowsPCが手元にあったので、ブラウザの設定アクセラレーションをOFFにしたら画質のボケが少し改善されました。
これでも問題はなさそうですが、なぜ自社サービスのみ発生してるのか根本改善にはなっていない。
今後、Windows updateで最新にアップロードを試みる予定。

2021-06-08追記
先方のPCでアップロードを実施してもらったが、変化なし。
ブラウザのアクセラレータOFFを設定してもらったが、「変化なし」と言ってはいたが、スクリーンショットを頂戴すると改善されていました。

どちらにしろ、応急対応で、弊社サービスの画像のみがそのような現象になっている根本解決には至っておりません。

ikadzuchi

2021/06/04 04:47

状況がわからないのでとりあえずボケている/ボケていない状態のスクリーンショットをください。スペックの画像も写真でなくスクリーンショットの方が見やすくて好ましいです。

bokero

2021/06/04 07:41

ありがとうございます。ちょっとクライアントのPCなので画面を直でのスクリーンショットで恐縮ですが、アップロードさせていただきました！

hope_mucci

2021/06/04 08:24

写真では画像表示のどのような不具合があるか全く分かりません。なのでikadzuchiさんは「スクリーンショット」を要求しています。写真ではなくスクリーンショットを貼ってください。ボケが発生してないマシンでのスクリーンショットと、ボケが発生しているスクリーンショットの両方が必須です。比較できないと何も原因が探れません。

bokero

2021/06/04 10:58

失礼しました！先方から問題のPCのスクリーンショットを手に入れる事ができました。画像を再アップロードしました。

ikadzuchi

2021/06/04 19:47

ありがとうございます。ボケている不具合が発生していない環境のスクリーンショットも欲しいのですが。

hope_mucci

2021/06/07 09:32

ぼけているものとぼけていないもの両方のスクリーンショットをありがとうございます。ボケていない方はedgeの表示ですね。このPCはしばらくwindowsUpdateしていないPCでしょうか。（具体的に言うと2020年1月以前からwindowsUpdateしてないかどうか）

hope_mucci

2021/06/07 09:34

また、ボケが発生しない他社サービス（他社とは明言されていませんが多分他社なのでしょう）との実装比較はされていますか？WebベースであればHTML、CSSやScriptは見えるはずです。差し支えなければ対象の他社サービスをお知らせいただければこちらも比較してみることができるのですが...

bokero

2021/06/08 05:40

ありがとうございます。 Windows updateは実施してもらいましたが、改善されませんでした。おっしゃる通り他社サービスと比較した際に、明らかに画質がボケている状態でした。先方のPCで他社の画像を用意してもらえていないので、自分のPCでも最適なものがないか探してみます。

hope_mucci

2021/06/08 10:17

いろいろと回答に追記してきましたが、目標となる「他社サービスでの表示状態」がこちらからは不明のため、これ以上の回答しようがありません。（ハードウェアアクセラレーション以外の案は試されているのですか？）守秘義務等で情報が出せないのかもしれませんが、そうであるならばこのような無料の質問サイトではなくNDAを結べる他の手段を検討すべきなのではないでしょうか。

bokero

2021/06/09 01:02

ご指摘ごもっともですね。アドバイスありがとうございます！アクセレーションOFFの設定以外にも皆様からご提案頂いた案を試してみましたが、CSSのレンダリング変更で解決されました。情報不足申し訳ございませんでした。

行動規範の内容に同意します

回答4件

画像を見る限り特に異常ではなくこんなものだと思いますね。
表示サイズは元の1/2強のようですので、
試しに適当な文字画像を1/2強と1/2弱に縮小してみました。(1/2^nを境に処理が変わることが以前あったので)

Chromeの方がボケているものの、画像の縮小アルゴリズムは様々あり、文字画像に向くものと自然画像に向くものもあり速度との兼ね合いもあるので必ずしもChromeがFirefoxに劣っているわけではない…はずです。
Web上で画像を縮小したらこの程度のボケが生じることは前提として受け入れるべきかと思います。
image-renderingの設定でこの場合については改善しそうですが、それでも縮小アルゴリズムを明示的に指定できるわけではないことを考えると、他の場面で不適切になることも十分ありえ、過度な期待をすべきではないと思っています。
そもそもまだ仕様が固まっておらずブラウザ独自仕様やDeprecatedですし、仕様変更を追って適切に設定し続けるのはなかなかコストが高いものです。(数年前は適切に表示されていたボケボケの画像とかよくあるんですよ)
「アニメーションしている間や、ドラックして動かしている最中は不思議と画像が一瞬キレイに表示されています。」というのは、そのような時には静止時と違う単純な縮小(おそらくバイリニアあたり)が使われるためでしょう。数分の1程度の縮小ではジャギが強く出る代わりにコントラストは高まります。

投稿2021/06/04 19:37

ikadzuchi

総合スコア3047

bokero

2021/06/08 09:01

なるほどです。わかりやすい比較説明ありがとうございます。FireFoxだけ明らかに綺麗ですね。CSSで変更してFirefoxと同じレンダリング表示に変更できるとのことなので、そちらで試してみます！

行動規範の内容に同意します

ベストアンサー

さらに追記

image-rendering: -webkit-optimize-contrast; の亜種ですが、対象要素を3Dレンダリングさせることで画像縮小アルゴリズムをさらに変更させるテクニックがあります。

css
1      backface-visibility: hidden;
2      transform: translateZ(1px);

（上記2つのうちどちらかの指定でOKですが念のため）
モダンブラウザでは要素を3D空間にレンダリングして立体表示することができます。
(サンプル)
立体表示になっている面に画像をレンダリングする際は、処理速度を考慮してさらに計算量の少ない方法で拡大・縮小するようになっているようです。chrome/edgeだとかなり荒い縮小になりますが図形や文字は逆にボケにくくなります。（細線は省略されてしまったりしますが）
参考にしている他社(?)サービスの実装も上記のようなテクニックを使っている可能性があります。
ちなみに他社サービス実装の次点予想は「サムネイルと原寸表示時で異なる画像ファイルを使用している」です。

ちなみにfirefoxおよびsafariでの表示は無指定時と全く同じでした。
またsafariではimage-rendering: -webkit-optimize-contrast;がpixelatedとほとんど同じような縮小になるので使用しない方が良いかもしれません。
（RetinaのMacを持っていないのでRetinaでは試していません）

追記

誠に勝手ながら、画像のURLが分かってしまったので私の方で同画像の表示テストをいろいろとさせていただきました。
（問題があるのであればurlが載っている画像は削除してください。私もこの回答が終わったらPCから画像を削除します）

edge, chrome, firefoxでそれぞれ1920x1080の解像度にフィットするよう表示させたところ、edgeとchromeでは変化がありませんでしたがfirefoxでは明らかに図面がシャープに見えました。

以上のことから、ブラウザがデフォルトで使っている拡大縮小アルゴリズムの違いだと推定されます。

edgeとchromeはエンジンが同じ（chromium）なので使用しているアルゴリズムは一緒~~（ニアレストネイバ法）~~（追記：誤った記載だったので削除しました）だと推定されます。firefoxのアルゴリズムは以下の記事によるとバイリニア法のようです。
https://developer.mozilla.org/ja/docs/Web/CSS/image-rendering

画像のレンダリングアルゴリズムはCSSで変更できます。プロパティ名は image-renderingです。
pixelateにすると明らかにギザギザになってかえってひどくなりますが、下記の記事の様に-webkit-optimize-contrastを指定するとかなり改善して見えるようになりました。（
https://sho-log.com/chrome-image-blurred/
それでのfirefoxの方が若干見やすい感はありますが、文字はだいぶん視認性が良くなりました。

ただし、このテストは1920x1080で「拡大縮小レイアウト」が100％の状態で行っています。
高DPI設定（「拡大縮小レイアウト」が125%や150%になる、ノートPCによくある設定）の場合、おそらくブラウザでのレンダリングが
「縦1080pxに合うように縮小→拡大縮小レイアウトで設定した倍率に拡大」という手順を踏んでいる可能性があります。その場合はアプリやOS側の改善待ちになるのかもしれません。（他の方の回答でも言及されていますが）

以前の回答

確かに内蔵GPUに原因がある可能性は否定できないところだと思います。
解決につながるかどうかは未知ですが、設定を変更して改善する可能性がある点としては、

・ブラウザの「ハードウェアアクセラレーション」をoffにする

・ブラウザのズーム倍率が100%出ない場合は、100%にする。

・windowsの「ディスプレイの設定」で「拡大縮小レイアウト」が100％以外の場合は100％にする

設定以外での改善策で思いつくものは、

・chromeが最新でない場合は、アップデートする（現状では91が最新です）

・Webアプリ側の画像をもっと高解像度のものに差し替える。表示解像度の2倍以上が目安です。

投稿2021/06/04 04:12

編集2021/06/07 10:02

hope_mucci

総合スコア4447

bokero

2021/06/04 07:53

ありがとうございます！ご提案の「ハードウェアアクセラレーションOFF」「chromeが最新でない場合は、アップデートする」こちらをクライアントのPCで発生しているので試してもらうようにお願いしてみます。結果は追って報告させて頂きます。他のご提案頂いた項目は問題はなさそうです。

hope_mucci

2021/06/04 08:31

これは元の画像を1/8ぐらいに縮小しているのでしょうか。細線が主体の図面でこの縮小比率は無茶しすぎはないのですか。目視ですがフローリングの線は3px、これを1/8に縮小したら1ピクセルにも満たないです。

bokero

2021/06/04 10:51

新たに写真を追加させていただきました！ 1/8まではないですが通常より大きめにしてアップロードしました。と言いますのも、当初「画像がボケている」と指摘された原因が、いつもの「retinaサイズになっていない事が原因」だと判断したためです。 width:2000pxサイズぐらいの最適なサイズでも同じボケた状態になっておりますので画像のサイズが原因では無いように思います。

ikadzuchi

2021/06/04 19:46

> 使用しているアルゴリズムは一緒（ニアレストネイバ法）だと推定されます。明らかにニアレストネイバーではないですね。ニアレストネイバーはボケません。何か別のものと勘違いされていると思います。

hope_mucci

2021/06/05 04:40

改めて回答を見返してみると、何か勘違いしていました。ニアレストネイバ法を使うのはpixelate指定をした場合ですね。失礼しました。 auto設定時では何かしらの色補完を伴う別のアルゴリズムだと思われます。

行動規範の内容に同意します

画像サイズが奇数だとボヤけるってのもありえそうです。

図面なんかは視認性悪くなると大変なのでsvgにしちゃった方が楽だと思いますよ

投稿2021/06/05 00:30