Webサイト（ブログ）に掲載するスマホのスクショ画像は、どのくらいの解像度が最適なのか？【検証】
Webサイト（ブログ）を開設して悩みことのひとつに「貼る画像サイズはどのくらいがいいのか？」というものがあります。
大きいものの方が良いと思いがちですが、とは言えあまりに巨大な画像は長い目で見ればサーバ容量を圧迫しますし、閲覧の際の読み込みスピードや転送量にも悪影響を与えかねません。
そこで今回は「iPhoneのスクリーンショット」に限定して、どのくらいのサイズの画像が最適なのかを検証してみたいと思います。
Webサイトに掲載するスマホのスクリーンショット画像は、どのくらいのサイズが最適か？
まず検証用に以前投稿した画像を用意しました。
1,125×2,436px（224kb）
撮影したiPhoneはXSで、解像度は「1,125×2,436ピクセル（px）」になります。
画像の容量はPNG形式で「224KB」でした。
流石にちょっと大きいですね。
これを貼り付けで「画像サイズ：大サイズ」は変更なしで「縮小：50％」に変更してみます。
ちなみにリサイズの際は、縦横比固定で横のピクセルを減らしていく方向で行いました。
「リンク先：メディアファイル」になっているので、クリックで拡大するはずです。
閲覧環境にも依りますが、拡大したからと言って原寸大では表示されないと思われます（スマホならされるのかな？）。
840×1,819px（117KB）
次に840×1,819pxにリサイズしました。
先程とあまり変わりがないように思われます。
こちらも50％に縮尺して貼り付けしてみましょう。
先程とほとんど違いが分からないですね。
こちらの容量は「117KB」でした。
630×1,364px（74KB）
更に縮小してみます。
630×1,364px。
630×1,364pxのサイズ50％。
随分サイズが小さくなりましたが、実用的にはほとんど影響はないようです。
画像容量は74KBまで減りました。
480×1,039px（63KB）
更に縮小して480×1,039pxまで減らしましょう。
480×1,039pxの貼り付け画像サイズ50％。
480×1,039px程度でも十分閲覧には耐えそうです。
画像容量は63KB。
サイズと閲覧を考えると、このくらいで十分と言えそうです。
画像の解像度と画像容量の一覧
今回掲載した画像と、更に縮小した画像の容量の一覧を掲載しておきます。
| 画像サイズ | 画像容量 |
| 1,125×2,436px | 224KB |
| 840×1,819px | 117KB |
| 630×1,364px | 74KB |
| 480×1,039px | 63KB |
| 360×780px | 40KB |
| 240×520px | 26KB |
ちなみに360px幅と240px幅の画像の「画像サイズ：大」での画像の見え方はこのようになります。
まとめ
TEXT FIELDでは「840px幅」でのスクショを多用してきたのですが、解説系であれば480px幅、もしかすると360px幅でも十分かもしれませんね。240pxは流石に小さすぎるかと思いますが。
最初に「大きい画像はサーバ容量を圧迫する」と書きましたが、TEXT FIELDくらいの画像使用量であれば「約1年半、800記事程度」でも2.2GBほどなので、そこはあまり心配しなくてもいいのかも。
それにサーバサイドでの圧縮もありますしね。
とは言え、画像を多用するサイトであれば積もり積もっていけば大きな差になりますし、先程書いたように無駄にデカイ画像は転送量の増大（ユーザの負担）にもなりかねません。
当記事の画像を色々なデバイスでご覧になり、最適な画像サイズを考えて頂ければと思います。
うちはとりあえず480px幅にします。
□ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □
今日も最後までお読み頂きありがとうございました！
小説執筆関連の記事は →「小説講座」
小説の投稿関連の記事は →「小説投稿記」
ブログ関連の記事は →「小説家のためのブログ運営」
読んだ本のレビューは →「読んでレビュー」
デジタルガジェット関連は →「デジタルもの」
に、ありますのでぜひ合わせてお読み下さいね！