スマホ対応の画像とは・・・

今やSNS全盛期、それを見ている人の大部分がスマホ愛用者、このブログもスマホで見ている人がほとんどだと思います。それならば、従来のような大きなサイズの画像で投稿するのは意味のないことだと思いましたが・・・、最近のスマホの解像度は著しく進化し、iPhone14 Pro Maxに至っては、1290×2796pxとのことで、13インチノーパソコンのそれと同等かそれよりも上回っています。見た目は小さくても侮るなかれです。

ただ、スマホと一口で言っても画面サイズも解像度もアスベクト比も、発売された年代や製造メーカー、機種によってもかなり違います。

しかもスマホはパソコンと違って縦画面で見られることが多いので縦構図の写真の方が見栄えが良さそう・・・。今までパソコン画面(横画面)で見られることを前提で作ってきた写真を縦構図の写真に編集しなおす必要があるかなと思いやってみましたが、編集作業を横長のモニターで行っている事もあり頭の切り替えがなかなか大変です。以前にも一度挑戦してみましたが長続きしませんでした。

と言うわけで、スマホ対応の画像はどうすればいいか、今回もいろいろやってみました。

昨日とは違った画像を使って確かめてみます。

現在私が使用しているiPhone12(アスベクト比 約9:19.5)対応の画像を用意しました。大きさはスマホの画面より若干大きめの1182×2557px　解像度96dpi　サイズは149KBですが、このサイズだと特大指定でも大きすぎるので、このまま投稿すればいつものようにBloggerサイトで自動的に縮小されてしまいます。

試しに元画像でも投稿してみました。

スマホでどのように表示されるのか・・・

スマホではほぼ同じ大きさに見えますが、元画像の方が明らかにはっきりした画像になっています。最初の画像は、Bloggerサイトで強制的に縮小(444×960px)されてしまいスマホ画面よりもかなり小さくなり、それがスマホ画面(1170×2532px)に拡大して表示されたため画像が荒く(画質が悪く)なってしまったと思われます。今回はiPhone12の画面を想定して行いましたが、実際には画面の上下にバナーが表示されるため、画面にピッタリフィットさせるにはアスベクト比をもう少し調整する必要があります。

ただし、この状態ではパソコンやタブレットでは画像がはみ出してしまって逆に見づらくなってしまいました。

結局、画質を落としてでも簡単な方法(Bloggerサイトでの自動縮小)を選ぶか、面倒でも(自動縮小されないよう自分で大きさを変えてから投稿)画質の良い方を選ぶかです。

今回はあくまでもスマホ向け画像についての試行ですが、私のように写真画質に拘る投稿を行おうとすると、もうスマホ対応が必須ですね。