noteでありがちな画像表示の落とし穴｜透過PNG＋ダークモードに注意

こんにちは、40歳・コネなしで起業したUki3です。
noteで複数ブログを運営していますが、この記事では「ちょっとした注意点や気づき」をシェアしていきます。

今回は、noteに画像を挿入する際に起きた
**「スマホで画像が見えづらい問題」**について。

私自身、これに気づくまで少し時間がかかりました…。
もしかすると他の方にも起きているかもしれないので、参考になればうれしいです！

画像が見づらくなる時がある。

noteを使っていて、気づいたのですがスマートフォンでnoteを見た時に、画像が見づらくなる時がありました。

どういうことかは、見た方が早いと思いますので、まず下の画像をご覧ください。

これが見づらくなる現象です。
YoutubeとUdemyの部分が見づらくなりました。

本来はこのような感じになります。

今回の画像は文字にネイビーを使っているということもあって、見づらさに拍車がかかっています。

これは、パソコンとスマートフォンという問題ではなく、画面の設定でライトモードとダークモードの設定の問題でした。

ライトモードとダークモード

これがライトモードとタークモードで設定したときの画面の違いです。
（両方ともスマートフォンの画面になります。）

私はパソコンはライトモードを、スマートフォンではダークモードを使用しています。
スマートフォンの電池が長持ちするということと、見やすいという事もあって、スマートフォンはダークモードを使っています。

解決方法は背景を入れる

今回の問題は、画像の背景透過が問題になっていますので、背景を入れてあげれば解決します。

背景を入れた画像がこちらです。

手軽な方法なら、ファイル保存の形式をJPG形式で保存をしてあげればOKです。

あとがき

今回スマートフォンを見ていて気付きましたが、まさかダークモードにこのような落とし穴があったとは…
違うデバイスでチェックするのもやはり重要ですね。

参考になりましたらうれしいです。

Uki3