Webサイト(ブログ)に掲載するスマホのスクショ画像は、どのくらいの解像度が最適なのか?【検証】

小説家のためのブログ運営GIMP, WordPress

Webサイト(ブログ)を開設して悩みことのひとつに「貼る画像サイズはどのくらいがいいのか?」というものがあります。

大きいものの方が良いと思いがちですが、とは言えあまりに巨大な画像は長い目で見ればサーバ容量を圧迫しますし、閲覧の際の読み込みスピードや転送量にも悪影響を与えかねません。

そこで今回は「iPhoneのスクリーンショット」に限定して、どのくらいのサイズの画像が最適なのかを検証してみたいと思います。

スポンサーリンク

Webサイトに掲載するスマホのスクリーンショット画像は、どのくらいのサイズが最適か?

まず検証用に以前投稿した画像を用意しました。

1,125×2,436px(224kb)

sc042319_1125
1,125×2,436px・画像サイズ:大

撮影したiPhoneはXSで、解像度は「1,125×2,436ピクセル(px)」になります。

画像の容量はPNG形式で「224KB」でした。

sc042319_1125_2

WordPressへの貼り付けは「画像サイズ:大サイズ」「縮小:なし」で掲載しています。

流石にちょっと大きいですね。

これを貼り付けで「画像サイズ:大サイズ」は変更なしで「縮小:50%」に変更してみます。

ちなみにリサイズの際は、縦横比固定で横のピクセルを減らしていく方向で行いました。

sc042319_1125
1,125×2,436px、画像サイズ:50%

「リンク先:メディアファイル」になっているので、クリックで拡大するはずです。

閲覧環境にも依りますが、拡大したからと言って原寸大では表示されないと思われます(スマホならされるのかな?)。

840×1,819px(117KB)

次に840×1,819pxにリサイズしました。

sc042319_840
840×1,819px、画像サイズ:大

先程とあまり変わりがないように思われます。

こちらも50%に縮尺して貼り付けしてみましょう。

sc042319_840
840×1,819px:画像サイズ:50%

先程とほとんど違いが分からないですね。

こちらの容量は「117KB」でした。

sc042319_840_2

630×1,364px(74KB)

更に縮小してみます。

630×1,364px。

sc042319_630
630×1,364px、画像サイズ大

630×1,364pxのサイズ50%。

sc042319_630
630×1,364px、画像サイズ:50%

随分サイズが小さくなりましたが、実用的にはほとんど影響はないようです。

画像容量は74KBまで減りました。

sc042319_630_2

480×1,039px(63KB)

更に縮小して480×1,039pxまで減らしましょう。

sc042319_480
480×1,039px、画層サイズ:大

480×1,039pxの貼り付け画像サイズ50%。

sc042319_480
480×1,039px、画層サイズ:50%

480×1,039px程度でも十分閲覧には耐えそうです。

画像容量は63KB。

sc042319_480_2

サイズと閲覧を考えると、このくらいで十分と言えそうです。

画像の解像度と画像容量の一覧

今回掲載した画像と、更に縮小した画像の容量の一覧を掲載しておきます。

画像サイズ画像容量
1,125×2,436px224KB
840×1,819px117KB
630×1,364px74KB
480×1,039px63KB
360×780px40KB
240×520px26KB

ちなみに360px幅と240px幅の画像の「画像サイズ:大」での画像の見え方はこのようになります。

360×780px

240×520px

まとめ

TEXT FIELDでは「840px幅」でのスクショを多用してきたのですが、解説系であれば480px幅、もしかすると360px幅でも十分かもしれませんね。240pxは流石に小さすぎるかと思いますが。

最初に「大きい画像はサーバ容量を圧迫する」と書きましたが、TEXT FIELDくらいの画像使用量であれば「約1年半、800記事程度」でも2.2GBほどなので、そこはあまり心配しなくてもいいのかも。

それにサーバサイドでの圧縮もありますしね。

とは言え、画像を多用するサイトであれば積もり積もっていけば大きな差になりますし、先程書いたように無駄にデカイ画像は転送量の増大(ユーザの負担)にもなりかねません。

当記事の画像を色々なデバイスでご覧になり、最適な画像サイズを考えて頂ければと思います。

うちはとりあえず480px幅にします。

□ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □ ◇ □
今日も最後までお読み頂きありがとうございました!

小説執筆関連の記事は   →「小説講座
小説の投稿関連の記事は  →「小説投稿記
ブログ関連の記事は    →「小説家のためのブログ運営
読んだ本のレビューは   →「読んでレビュー
デジタルガジェット関連は →「デジタルもの

に、ありますのでぜひ合わせてお読み下さいね!

[合わせて読みたいおすすめリンク]