Hatch：使用するブラウザによって画像がぼやけるのを修正したい

  • 解決済 Jinnsei Minami

    (@jinnsei-minami)


    7年、 10ヶ月前

    テーマHatchを使用しています。
    写真を 3648 × 2736 でフルサイズ挿入した記事を見た場合、使用するブラウザによって画像がぼやける問題で悩んでいます。
    Windows10のIEではぼやけることなく正常に表示されます。Firefoxでも正常に表示されます。
    グーグルクロームだとややぼやげて表示されます。
    そしてマイクロソフトエッジだとおもいっきりぼやけて表示されます。

    IEで見た場合のスクリーンショット

    クロームで見た場合のスクリーンショット

    エッジで見た場合のスクリーンショット

    私は普段グーグルクロームを使用しているので、クロームでの表示をなんとかしたいと思い調べた結果、
    詳細設定の「ハードウェア アクセラレーションが使用可能な場合は使用する」のチェックを外すと正常に表示されることが分かりました。
    IEの「GPUレンダリングでなく、ソフトウェアレンダリングを使用する」のチェックは元から外れた状態でした。
    マイクロソフトエッジで同様の設定ができないか調べてみましたが分かりません。

    メディア設定の大サイズ 1680 × 1680 で作成した画像を挿入した場合はマイクロソフトエッジでも問題ないのですが、フルサイズ3648 × 2736で挿入時にブラウザごとに余計な設定をすることなく、全てのブラウザでアップロード済みの投稿画像がぼやけないワードプレス側の設定があったら教えていただけないでしょうか。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    7年、 10ヶ月前

    こんにちは

    CSS（CSS4）の image-rendering プロパティで pixelated（crisp-edges）指定するといいかも。
    https://developer.mozilla.org/ja/docs/Web/CSS/image-rendering

    例）

    img {
	image-rendering: -webkit-crisp-edges;     /* Safari */
	image-rendering: -moz-crisp-edges;        /* Firefox */
	image-rendering: pixelated;               /* CSS4 (Chrome) */
	-ms-interpolation-mode: nearest-neighbor; /* IE */
}

    残念ながら、Edge はまだ image-rendering をサポートしていないのでこの方法は使えません。名前はエッジなのに・・・。
    Edge に関しては、何方か他の方のレス待ちということでお願いします。

    トピック投稿者 Jinnsei Minami

    (@jinnsei-minami)

    7年、 10ヶ月前

    ishitaka (@ishitaka)様。
    とても参考になる投稿をしていただき、ありがとうございました。
    スタイルシートの末尾に追加して状況をみてみたところ、シャープさが改善されることが確認できました。
    こんな方法もあるんだととても勉強になりました。ありがとうございます。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「Hatch：使用するブラウザによって画像がぼやけるのを修正したい」には新たに返信することはできません。