WordPressWebサイト(ブログ)を開設して悩みことのひとつに「貼る画像サイズはどのくらいがいいのか?」というものがあります。大きいものの方が良いと思いがちですが、とは言えあまりに巨大な画像は長い目で見ればサーバ容量を圧迫しますし、閲覧の際の読み込みスピードや転送量にも悪影響を与えかねません。そこで今回は「iPhoneのスクリーンショット」に限定して、どのくらいのサイズの画像が最適なのかを検証してみたいと思います。画像の解像度と画像容量の一覧3.まとめスポンサーリンクWebサイトに掲載するスマホのスクリーンショット画像は、どのくらいのサイズが最適か?まず検証用に以前投稿した画像を用意しました。撮影したiPhoneはXSで、解像度は「1,125×2,436ピクセル(px)」になります。画像の容量はPNG形式で「224KB」でした。WordPressへの貼り付けは「画像サイズ:大サイズ」「縮小:なし」で掲載しています。これを貼り付けで「画像サイズ:大サイズ」は変更なしで「縮小:50%」に変更してみます。ちなみにリサイズの際は、縦横比固定で横のピクセルを減らしていく方向で行いました。1,125×2,436px、画像サイズ:50%「リンク先:メディアファイル」になっているので、クリックで拡大するはずです。閲覧環境にも依りますが、拡大したからと言って原寸大では表示されないと思われます(スマホならされるのかな?)。840×1,819px(117KB)次に840×1,819pxにリサイズしました。先程とあまり変わりがないように思われます。こちらも50%に縮尺して貼り付けしてみましょう。840×1,819px:画像サイズ:50%先程とほとんど違いが分からないですね。こちらの容量は「117KB」でした。630×1,364px(74KB)更に縮小してみます。630×1,364px。630×1,364px、画像サイズ大630×1,364pxのサイズ50%。630×1,364px、画像サイズ:50%随分サイズが小さくなりましたが、実用的にはほとんど影響はないようです。画像容量は74KBまで減りました。480×1,039px(63KB)更に縮小して480×1,039pxまで減らしましょう。480×1,039px、画層サイズ:大480×1,039pxの貼り付け画像サイズ50%。480×1,039px、画層サイズ:50%480×1,039px程度でも十分閲覧には耐えそうです。サイズと閲覧を考えると、このくらいで十分と言えそうです。今回掲載した画像と、更に縮小した画像の容量の一覧を掲載しておきます。26KBちなみに360px幅と240px幅の画像の「画像サイズ:大」での画像の見え方はこのようになります。FIELDでは「840px幅」でのスクショを多用してきたのですが、解説系であれば480px幅、もしかすると360px幅でも十分かもしれませんね。240pxは流石に小さすぎるかと思いますが。FIELDくらいの画像使用量であれば「約1年半、800記事程度」でも2.2GBほどなので、そこはあまり心配しなくてもいいのかも。それにサーバサイドでの圧縮もありますしね。言え、画像を多用するサイトであれば積もり積もっていけば大きな差になりますし、先程書いたように無駄にデカイ画像は転送量の増大(ユーザの負担)にもなりかねません。当記事の画像を色々なデバイスでご覧になり、最適な画像サイズを考えて頂ければと思います。うちはとりあえず480px幅にします。画像をアップロードする前にブログやウェブサイトの「レスポンシブデザイン」とは?ブログのデザインでよく聞く「レスポンシブデザイン」とは何かを解説。コメントをキャンセルメールアドレスが公開されることはありません。StickでAlexaが利用可能に。