web-dev-qa-db-ja.com

デスクトップSafariでぼやけたサイズの背景画像

私が作成しているWebサイト（test6.lazyfoxdesign.co.uk）はレスポンシブで、背景に画像を多用しています。高解像度の画像を使用し、CSSを使用して解像度を小さくします。デスクトップのSafariを除くすべてのWebブラウザーでは、Safariの画像は鮮明で鮮明です。

問題のスクリーンショットを添付しました。 Google Chromeを左側に、Safariを右側に。

enter image description here

ソース： http://imgur.com/e3EmrQS
（画像を拡大して違いを確認します。）

下のスクリーンショット（実際のサイズ）Chromeは上、Safariは下です：

enter image description here

imagessafari
4
Matthew C

私は同じ問題を抱えていましたが、それでも100％完璧ではありませんが、このアプローチで品質を向上させることができました。 CSS（transform：scale（value））で画像をスケーリングしたことに言及する必要があります。

たぶんこれは役立ちます：

 filter: none; 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-ms-filter: blur(0px);
 filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

ただし、Safariでは画像がまだ少しぼやけています。

ソース： -webkit-transform：scale/blurry images /user： rcro

4
grindking

これらのスタイルを設定してみてください。

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
2
kiran bhandare

同じ問題があり、Photoshopを使用して解決できました。

  1. 画像の複製（JPEGなどの損失の多い形式のために元の画像が失われないようにするため）

  2. 画像->画像サイズ->サイズをピクセル単位で設定します（一般的なブラウザの解像度は1インチあたり100 pxであることに注意してください）

  3. ファイル-> Web用に保存。ここでは、さまざまな設定をプレビューできます。次に、画像を100％サイズで保存して使用します。

1
FFT

同じ問題が発生していますが、Photoshopで「問題のある画像」の解像度を100 dpiに変更しようとしました。私は今、Safariでスケーリングしていますが、ぼんやりしていません！したがって、元の画像のDPIが100 dpiに設定されている限り、Safariでスケーリングが正常に機能するように見えます。ユーレカ！典型的なブラウザのdpiは100であると言ってくれた人に感謝します:-)

1
Matt Gourd

違いは、ブラウザーで使用されているスケーリングアルゴリズムによるものです。残念ながら、スケーリングではなく、正しいサイズの画像を提供すること以外は、実際には何もできません。

近年、ブラウザのスケーリングは大幅に改善されています。ブラウザーがピクセルサイズ変更のみを行い、結果がまったく良くなかったのはそれほど昔ではありませんでした。

正直なところ、スクリーンショットは特に決定的なものではないと思います-Safariの写真は、ユーザーが気づかないと思われるIMOがわずかに「あまりシャープではない」だけです。また、Safariのユーザーは、すべてのスケーリングされた画像でそれを行っている場合、わずかにぼやけた画像に慣れているでしょう。加えて、ほとんどのユーザーは一般に細かい詳細に気づいていないという事実-あなたのサイトが他のデザイナーをターゲットにしない限り？あなたのスクリーンショットから私がもっと気づくのは、左右のスクリーンショットの両方に影響するJPEGアーティファクトです-しかし、これはおそらく圧縮JPEG（またはimgur）の問題ですか？

1
MrWhite