【比較してみた】ブログに最適な画像のファイルサイズ(容量)【軽くする方法】

この記事では、ブログ初心者が疑問に思う、画像のファイルサイズについてお話ししています。

・画像のリサイズの方法がよくわからない。
・ブログ初心者だけど、効率よく記事を仕上げたい。
・ページスピードを調べたら、ブログの読み込みが遅い、画像が重い。

こういった悩みを解決していきます。

ファイルサイズのリサイズ方法

Macでリサイズする方法

画像をリサイズする方法はたくさんありますが、今回は以下の手順でリサイズしました。

①MacのFinderから画像を選択→ダブルクリックでプレビューを表示する。

②上部のメニューバーでツールをクリックし「サイズを調整」を選択→縦横を1200×675px(比率16：9の場合)に合わせてリサイズする。
もしくは左上の□点線四角をクリック→縦横1200×675で画像の使いたいところを切り取る。

③メニューバーに戻りファイルをクリックし「書き出す」を選択→上から順に、書き出し名を変更(※)、フォーマットをJPEGに変更、品質は80％を目安に調整して保存する。ここではファイルサイズが200KBほどになればOKです。

（※）書き出し名を画像を使う記事のパーマリンクにすると、後で管理がしやすくなるのでおすすめです。ちなみにこの記事のアイキャッチ画像は「blog-image-filesize_ic.jpg」、挿入画像は「blog-image-filesize_a.jpg」（アルファベットは挿入順につける）」となっています。

ワードプレスブログの画像の名前は適当だと死ぬよ｜【パーマリンク+アルファベット】.jpgへ統一ルール

hiroshi.work

iPhoneでリサイズする方法

①iPhoneデフォルトの「写真」アプリでリサイズしたい写真を選択し、画面右上の編集をタップ。

②画面下にあるトリミングのマークをタップ→画面右上のフレームのようなマークをタップ→「16：9」を選択し、画像の使いたいところを白い枠内に収める→画面右下のチェックマークをタップで決定。（画像の色味や明るさの調整が必要なら、この時に一緒にしておくと効率的！）

③1200×675px(比率16：9の場合)にリサイズできるアプリを使ってリサイズ。

私のおすすめは『バッチリサイズ2』というアプリです。

・何枚も同時にリサイズする画像を選ぶことができる
・シンプルな画面で直感的にカンタンに操作できる

他にも「Lightroom」や「HashPhotos」といった便利なアプリがありますので、自分に合った好みのアプリを見つけてみましょう。

ファイルサイズの比較

フォーマットはJPEGにすること

比較する画像はどこかのサイトで見つけたフリー画像です（どこのサイトか忘れました）。オリジナルでは横1920px：縦1280px、フォーマットはPNG、ファイルサイズは4MBでした。

オリジナルとリサイズ後で、それぞれフォーマットと品質を変えて表にしてみました。

フォーマットをPNGからJPEGに変換しただけでも大きく容量が変わりますね。

当然なのですが、1200×675pxにリサイズし、フォーマットもJPEGに変換した画像が一番容量が軽くなりました。

リサイズした画像をWordPressのメディアにアップロードすると、画像圧縮プラグインを使用している人はさらにファイル容量が軽くなります。

のいはる

私が使用しているプラグインは、パンダで有名な『Compress JPEG & PNG images』です

画像での比較

リサイズ後の画像をファイルサイズごとに貼っていきます。

（）内はWordPressプラグインにより圧縮後のファイルサイズです。

いかがでしょうか？

3枚とも画質に大きく差はないと思います。
強いていうなら、やはり1枚目のヒヨコのふわふわ感が細かく見える…かな？というレベルです。

スマートフォンなど小さな画面ではどれも変わらない画質に見えるので、ページスピードのことを考えると出来るだけファイルサイズは軽くしたほうがいいですね。

のいはる

Googleはモバイルファーストを推奨しています

どうしてもPCでキレイな写真を載せたいひとは1記事に載せる画像を少なくするなど気をつけた方が賢明です。　

まとめ

・画像のフォーマットはJPEGにして、ファイルサイズは200KB〜100KBすること。
・WordPressプラグインは『Compress JPEG & PNG images』がおすすめ。
・どうしてもキレイな写真を載せたいなら1記事に載せる画像を少なくする。

ブログ初心者の人のお役に立てれば幸いです。