iphoneでpng画像が荒れてしまう時の対処法【CSS】

こんばんは。フォトピザです。
iosでpng画像を確認すると、フチの線がジャギジャギしていることってありませんか？
開発中ディベロッパーツールで確認すると荒れていないのに、iphoneで確認すると何故か荒れている。
cssで解決できる可能性があるので、これについて解説していきます。

iphoneでpng画像が荒れてしまう時の対処法【CSS】

iosで確認した際のフチのジャギりは、imgタグにimage-renderingプロパティが当たっているかどうか確認してみましょう。以下確認用の画像です。

Adobe XDのロゴ部分を確認すると一発ですね。
右の画像の、ロゴの縁がジャギってます。
image-renderingプロパティでcrisp-edgesもしくはpixelatedが当たっている場合は、autoにすることでジャギりを解消できます。

bootstrapのような何かしらのテンプレートだったり、複数人でコーディングを行う時など、自分以外が作業している場合は知らずに記載されているかも。確認してみる価値ありだと思います。
コーディング中は検証ツールでの確認だけで済ませがちですが、実機で確認することが大事ですね。

※因みに僕はコーディング中この現象にぶち当たって丸一日使ったことがあります笑
画像の大きさはretinaディスプレイに対応できるサイズか、イラレで書き出す時の設定が間違ってないか、、などが真っ先に疑われますが、cssプロパティは盲点かと思います。
誰かの参考になれば嬉しいです。

以下、image-renderingプロパティについて解説します。

image-renderingプロパティについて

image-rendering プロパティは、画像を拡大・縮小する際にどのようなアルゴリズムを指定するかを設定することができます。
（参考：https://developer.mozilla.org/ja/docs/Web/CSS/image-rendering）

簡単にいうと、pc版で使用しているある画像がスマホでも使用されるとき、デバイスの幅に応じて小さくなりますよね。その際の画像の描画方法をどうするかを設定することができます。
エッジを保ったままなのか、エッジをいい感じにぼかして拡大・縮小するのか、、といった具合ですね。
下を見てください。

See the Pen qBZgRQR by botanin (@botanin) on CodePen.

pixelatedを指定したものがはっきりと描画されていることが確認できますね。
これは下でも説明していますが、pixelatedは拡大した時にエッジを保持してくっきり見えるようにします。QRコードやドット絵などに活躍の機会がありそうですね。

下にプロパティの一覧をまとめます。

これ実は問題があって、pixelatedとcrisp-edgesが最初の画像のように同じ結果になってしまうことです。調べてみた結果、

Unfortunately after a lot of testing it seems that browsers interpret the crisp-edges and pixelated values in very confusing ways at the moment so it’s important to note once again that this specification is in its very early days. For instance Chrome appears to render pixelated images in the same way that Firefox and Safari will render images with crisp-edges.

出典：https://css-tricks.com/almanac/properties/i/image-rendering/

ブラウザの解釈に問題があるようで、ChromeにおけるpixelatedとFirefoxとSafariにおけるcrisp-edgesの違いが見られないとのこと。実際に今回の記事でもcrisp-edgesによってジャギーが発生していました。またブラウザのバージョンによってもcrisp-edgesが効かないとの報告もあるそうです。

なので、現実的には

image-rendering:pixelated;

pixelatedをQRコードやドット絵、アイコンなんかに適用させるのが主な使い方になると思われます。

参考：https://qiita.com/hibikikudo/items/e86d610e1784fc7d5349

まとめ

今回はiphoneでpng画像にジャギーが発生する時、cssに原因がある可能性もある、という話でした。
後半はプロパティの解説をしましたが、image-renderingは割と使い所が限定的という印象。
ただその分局所的に効果を発揮してくれそうです。

それでは本日はここら辺で。