サイトのタイトル画像をスマホ表示した時に「にじむ」件を解決!

2020-05-17WEBサイト運営Luxeritas,WordPress

トップページのタイトル画像について、PCで表示した場合には「にじみ」は気にならないのですが、スマホで表示するとあきらかに「にじんでいる」ことが判明。
今回はこの問題を解決した過程をまとめました。


サイトのタイトル画像をスマホ表示した時に「にじむ」件を解決!


スポンサーリンク

前提環境

・使用CMS:WordPress
・使用テーマ:Luxeritas
・画像作成ツール:Inkscape
 ※使用画像形式png・svg
・確認用スマホOS・ブラウザ:Android・Chrome

参考までに前提環境を記述しましたが、今回の問題ではどの環境でも解決策は共通します。


対応1:デザインがおかしくならない程度に画像サイズを大きくする

まず、真っ先に考えられるのは画像のサイズを大きくすることです。

「にじみ」がでるということは、WordPressあるいはテーマによって画像が規定より小さいと判断され、拡大処理が行われているということになるからです。

拡大処理が行われないような大きなサイズにすると解決するはずです。
※横・縦のサイズ比率も関係あるかもしれません。

ただし、サイズを変更するにもデザインとして許容できる画像の大きさというものがありますよね。

その範囲内で可能な限り大きくしてみたのですが、結果的に「にじみ」問題は解決しませんでした。


対応2:Inkscapeでsvgをつくって表示させる

pngやjpgで「にじむ」なら、svgという形式を利用するという手があります。

ただし、WordPressのデフォルトではsvgは使用できません。

子テーマのfunctions.phpに以下を追記することで使用が可能になります。

 function cc_mime_types($mimes) {
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
 }
 add_filter('upload_mimes', 'cc_mime_types');

その上で、フリーソフトであるInkscapeを使用してsvgファイルを作成。

サイトにアップロードしてスマホで確認してみました。

結果としては、「にじみ」なく表示することができるようになりました。

しかし、Inkscapeでタイトル画像に対して行ったフィルタ処理がキャンセルされてしまうという現象が起きました。※PCでの表示はなぜか正常。

本来のデザインで表示ができなかったので、svgによる「にじみ」解消は断念しました。


ちなみに2020年現在、主要ブラウザの最新バージョンはsvgの表示に対応していますので安心して使うことができます。

サイトのタイトル画像(写真を使わないロゴ)であれば、キレイなわりにサイズが小さいsvgを採用するのがよいと思います。

写真画像なら従来どおりpngやjpgが無難です。


今回発生したフィルタ処理のキャンセルについては、Inkscapeの問題である可能性があるので、また今後検証してみます。

追記:フィルタ処理のキャンセル問題について、フィルタを使用した場合にフィルタの影響範囲がパスではなく画像扱いになってしまうことが関係しているようです。
おそらく、svg形式で保存した場合に画像扱いされた部分の表示が省かれるのだと思います。
この問題が発生しないようにするには、フィルタを使わずにパスのみでデザインをするしかなさそうです。


対応3:比率16:9かつかなり大きなサイズで確認

原点に立ち返った上で画像の比率にも注目。

よく目にする比率16:9かつサイズもかなり大きめでpng画像を作ってみました。

その結果、スマホ表示のにじみが解消されました。


対応4:比率を崩して再度確認

前項目で「にじみ」は解消されましたが、比率の問題なのか画像の大きの問題なのかが明確でない状態です。

はっきりさせる為に、比率を崩して単に大きなサイズ(今回は470×110ピクセル)で再度ためしてみたところ、「にじみ」はでませんでした。

はい・・・、単純に大きめのサイズで画像を作成していれば最初からにじみ問題は発生しなかったということです。

ここまで回り道をしてしまった理由は、先に書いたようにデザインの問題があったからです。

更にいうなら「画像サイズは可能な限り小さくすることがページ表示速度UPに貢献する」という事実に基づいた脳内縛りもありました・・・。

しかし、今回のことで「タイトル画像を作成する場合はサイズをある程度大きくすることが必須」だということが判明しました。

念の為確認してみましたが、タイトル画像が多少容量アップしたところでページの表示速度が目に見えて落ちることはなさそうです。

そして、デザインの問題は、cssをいじることで解決しました。
※本当はこういうことを積み重ねるとややこしくなるのでやりたくなかったんですが・・・。

例えば、筆者が使っているテーマLuxeritasの場合は、子テーマのstyle.cssに以下のように追記しサイズ調整をしました。

  img, video, object, canvas {
      max-width: 50%;
  }

この記述の場合は、「指定した画像を半分のサイズで表示する」という意味になります。

以上で問題は全て解決しました。


まとめ

画像のにじみ解消方法
  • pngやjpgなどの画像サイズを大きくする

筆者の環境では、本来の倍の大きさにしましたが、ページ表示速度が目に見えて落ちることはありませんでした。

どの程度の大きさで「にじみ」が解消されるかは環境によって変わる可能性があるので色々試してみてください。

画像を大きくすることで生じるデザインのアンバランスさは、WordPressで使用している子テーマのstyle.cssに追記する形でサイズ調整すればOKです。

※今回画像を大きくすることで「にじみ」問題を解決したのは別のサイトです。
当サイトのタイトル画像については、フィルタ不使用のsvgを採用しています。
ですから、いくら拡大してもにじみません。


スポンサーリンク