【ゆるっと参考】画像幅について
画像モリモリです。
どうも、ぽんじゅーす。
画素の荒い物体げんらです。
ちょっと今回気になったので、確認結果をお伝えしたいと思います。
画像についてなのですが、どの幅がベターかな、と気になりました。
と言うワケで、まず、活動報告画面や、小説に貼られた画像、どこまでどう表示されているのか。
表示される画像幅を調べてみました。
貼った画像はこうなっております。
横幅は画像に記載した通りで、縦幅は一律５０ピクセルで作成したものです。
実はコレ、スマホの縦画面と横画面、そしてタブレットだと、表示が違ってるんですよね！(´⊙ω⊙`)
どう違うか、気になったので色々みてみました。
まず、タブレット画面で見る活動報告での表示がこちら
１００から５００幅までは均等に値が増えていっているように見えます。
おそらく最大表示幅が５５０くらいかな？
６００以降はだんだんと細くなっていってます。（高さは５０なので）
続いて、タブレットでの小説ページ
こちらは、活動報告とさして変わらない表示のされ方をしておりました。
ちなみに、タブレット内に２画面を表示する、スプリットビューという機能があり、その２画面表示中のタブレットページはこうなっております。
特に縮まって表示が変わることはないようです。
縦に閲覧できるエリアが増えて、スマホ画面のようなビューエリアです。
タブレット画面は幅５００までは、画像を等倍の大きさで表示する感じですね。
続いてスマホ画面（横）です。
Webページを見るのに、スマホを横にしないですが、気になったので調べてスクショしてみました。
小説閲覧ページです！
横画面だと、1ページに収まらねぇですꉂꉂ(ˊᗜˋ*)
なので、スクショ繋ぎ合わせました。
ちなみに、横画面だと４００までは等倍で、５００以降は縮小されて表示されるようです。
活動報告ページ
……ゑ？？
ちょい待ち、小説は４００まで等倍で、活動報告は５００までなん？？(´⊙ω⊙`)
スマホ画面（横）は、画像の表示が小説と活動報告で異なるようです。
さて、スマホ画面（縦）になりますだ。
縦長なので、１枚に収めちゃいました(ˊᗜˋ*)
やはり、スマホだと小説ページと活動報告ページで、表示幅が違うようです。って、せっま！！(´⊙ω⊙`)
活動報告が３５０くらいまで？？
小説ページは２９０くらいまでのようです。
小説ページ表示画像拡大すると、１００から２００までは□が１０個並ぶのですが、２００から３００までは□が９個しか並びませんでした。
ちょっと、画像全部並べてみます。
タブレットだと表示がほぼ一緒のようで。幅５００までが等倍に表示。
スマホは縦画面・横画面、小説閲覧ページ・活動報告で表示がバラバラ。
……スマホにもタブレットにもベストなものは何だろうと思って調べたものの、ここまで表示が違うとは思いませんでしたꉂꉂ(ˊᗜˋ*)
あまりに大きな画像はどんどん縮小されるみたいですね。
そして、スマホとタブレットでの違いもわかりました。
画面確認環境
◆iPhone11 Safari・Chrome
◆iPad第9世代（10.2㌅) Safari
パソコンでだと、もしかしたらまた変わるのかも？？
画像というのは、大きいと読み込むのにも時間がかかるので、小説家になろうで表示させるなら、幅５００〜６００あたりを目安に作ればいいのかな、と思いました。
縦長で作ると画面が埋まるので、なるべく横長の方がスクロールしやすそうだな、とか。
色々気づきがありますね(｀・ω・´)
もしかしたら、スマホ・タブレット環境で、表示が異なる可能性もありますので、これはゆるっと参考程度でお願いします。
✧:。. •*¨*•。.:*✧⋆。.:*.。. •*¨*•。.:✧。
あいなめさまが、詳しく調べてくれました⸜(*ˊᗜˋ*)⸝
ありがとうございます！
みてみんのシステム的に縮小されて、パソコン・タブレット画面は幅５８０、スマホは幅２９０になるようなので、ちょうど半分（倍）になるので、崩れを気にするなら幅５８０ピクセルで画像作成が良さそうです。
幅５８０を超えると、５８０に縮小された『jpg画像』が生成・表示されるそうです。png形式から見ると、画質が落ちます。
画質を気にする方は、気をつけた方が良さそうです(｀・ω・´)
げんらのザックリより、詳しく知りたい方は感想欄覗いてみて下さい(*´꒳`*)
パソコンでもスマホでも、見た感じの画像幅雰囲気を揃えたいなら、幅４５０〜５００あたりかな？（これはげんらの感覚的なものですが
画質・縮小による崩れ・雰囲気、これらを全て天秤にかけることは出来ないと思うので、作者次第になるかと思いますが、ひとつの参考になれば(｀・ω・´)
PCでの確認してなくてごめんね(；´ᯅ`)
