WordPress/ワードプレス

【注意】ブログ画像のサイズ・容量は?圧縮するおすすめの方法は?

投稿日:2020-07-04 更新日:

ブログ画像のサイズ・容量の目安と、圧縮方法

この記事のまとめ

ブログ画像のサイズ・容量について解説!

また、ブログ画像を圧縮(軽く)する方法について、おすすめのやり方を説明します。

ブログの画像サイズは、ページの表示速度(結果的にSEO)に影響をあたえる重要な要素です。

最適な画像サイズを理解し、きちんと圧縮してからブログにアップしましょう!

 

ブログの画像サイズってそんなに大切なの?
よめちゃん
サンツォ
大きいサイズ・重い画像のままだとページ表示も遅くなるよね。

そうすると検索順位が下がる可能性もあるんだ。

 

※本記事は動画でも解説しています。

 

 

ブログ画像のサイズ・容量の目安

ブログ画像のサイズ・容量の目安

 

ブログ画像のサイズ・容量については、100%の正解があるわけではありません。

ただし目安としては下記の基準が参考になると思います。

 

サイズ:横幅1000px以下を目安
容量:100~200kb以下を目安

 

僕の場合は横幅800px(または640px)でほぼ統一しています。

ブログ画像はこのサイズで充分です。

 

画像をフリー素材サイトなどでダウンロードする場合は(小さいサイズを選択すれば)ほとんど問題にならないと思いますが

スマホで撮影した写真などはめちゃくちゃサイズが大きいのでご注意ください。

 

サンツォ
あとは画像に文字を入れたり、加工を加えた場合には

念のためサイズを確認しておいたほうがいいよ!

 

 

ブログ画像を圧縮する方法

ブログ画像を圧縮するおすすめの方法

 

ブログ画像を圧縮する(小さくする、軽くする)には下記の方法をおすすめします。

 

ちょっと面倒くさいんですが、画像の重さはそのままページ表示の重さにつながりますので…

しっかり対応されることをおすすめします。

 

画像圧縮の3ステップ

大きな画像はサイズ変更(リサイズ)
    ※そもそも小さい画像(1000px以下など)ならこの手順は不要。
     ↓
「TinyPNG」で画像を圧縮
     ↓
「EWWW Image Optimizer」で画像を最適化

 

①大きな画像はサイズ変更(リサイズ)

大きな画像はあらかじめサイズ変更しておく

 

フリー画像素材サイトなどであらかじめ1000px以下の画像をダウンロードしていれば、この手順は不要です。

次のステップに進んでください。

 

スマホで撮影した写真など、そもそも画像サイズが大きすぎる場合は、

事前にパソコンに元からインストールされているペイント系ソフトなどでサイズ変更(リサイズ)しておきましょう。

 

サンツォ
Windowsなら「ペイント」、Macなら「プレビュー」で

画像サイズの変更ができるよ!

 

実際に画像を小さくしてみましょう。

  • STEP1
    画像サイズを確認

    こちらの画像を圧縮します。

    サイズが3.7MB、横3477×縦2532とかなり大きな画像です。

    このままブログにアップしたら大変なことになるね…。
    よめちゃん

    画像サイズを確認

     

  • STEP2
    サイズ変更

    ペイントソフトで画像を開き、サイズを変更します。

    ※今回はWindowsの「ペイント」で編集

    赤枠で囲った「サイズ変更」をクリックします。

    ペイントソフトで画像のサイズを変更

     

  • STEP3
    横幅を指定

    ピクセルで画像の大きさを指定します。

    今回は水平方向(横幅)を640ピクセルに指定しました。

    画像の横幅を指定

     

  • STEP4
    確定し保存

    「OK」ボタンを押して確定。サイズが変更されました。

    問題なければ画像を保存します。

    画像をリサイズしたら確定し保存する

     

  • STEP5
    リサイズ完了

    これリサイズは完了です。

    3.7MBあった画像が167.8KBまで小さくなりました。

    画像のリサイズ完了

     

    これだけでも200KB以下の指標におさまっていますので十分なのですが、

    念のためTinyPNGでも圧縮しておきましょう。

 

②「TinyPNG」で画像を圧縮

TinyPNGの画面キャプチャ

 

国内最速!レンタルサーバー
【WordPressを始めるなら迷わずこれ一択】

高速&高性能&格安のレンタルサーバー!初心者からサーバー移転まで、超おすすめの筆者いちおし♪

 

ワードプレス なんでも相談!
【サイト引越し・トラブル解決・カスタム相談】

相談無料!保証つき! 引越し・移転・テーマ変更・トラブル解決・カスタム相談など…WordPressのことなら何でも相談できるよ♪

 

 

TinyPNG(タイニーピング)は、ほとんど画質を落とさずに画像を圧縮できるウェブサービスです。

めちゃくちゃ有名な画像圧縮ツールで、無料で使えます。

 

 

TinyPNGの特長

通常は60~70%くらいの圧縮率
無料で登録不要(有料プランあり)
操作もとても簡単
png、jpeg、jpgに対応
複数まとめて圧縮可能(同時に20枚まで/それぞれ最大5MBまで)

 

実際にTinyPNGを使ってブログ画像を圧縮してみましょう。

  • STEP1
    画像をドロップ

    圧縮したい画像を、TinyPNGの画面中央の点線枠のなかにドロップします。

    複数画像も可能です。

    ※ただし、無料版では同時に画像20枚まで。画像1枚につき最大5MBまでの制限があります。

    TinyPNGに画像をドロップ

     

  • STEP2
    画像の圧縮

    すぐに画像の圧縮が始まります。

    完了すると下記のような画面になります。

    TinyPNGで画像の圧縮が完了

     

    サンツォ
    今回は12%しか圧縮されなかったけど

    もっと大きな画像ならだいたい60~70%くらいは圧縮されるよ。

    downloadのリンクをクリックすると画像をダウンロードできます。

     

  • STEP3
    複数画像の圧縮

    複数画像の場合はこんな感じです。

    平均的に70%前後の圧縮ができていますね。

    複数の場合はZipファイルでまとめてダウンロードできます。

    TinyPNGで複数画像を圧縮

     

  • STEP4
    圧縮完了

    最終的に3.7MBあった画像を138.2KBまで圧縮することができました。

    ブログ画像の圧縮完了

 

ちなみにPro(有料版、25ドル/年)では「1度に20枚まで/それぞれ5MBまで」という制限を解除することができます。

…まあそんなに必要となることはありませんけどね。

 

 

③「EWWW Image Optimizer」で画像を最適化

EWWWImageOptimizer|ワードプレスプラグイン

 

EWWW Image Optimizer」は、画像を劣化させず圧縮するWordPressプラグインです。

新しい画像をWordPressにアップする際に、自動的に画像を圧縮してくれます。

 

それだけなら①リサイズと②TinyPNGによる圧縮で事足りるのですが、

WordPressにアップされている既存の画像も一括で圧縮できる点がメリットです。

※同じような機能のプラグインに「Compress JPEG & PNG images」がありますがどちらでもOKです。

 

ちなみに「EWWW Image Optimizer」の初期設定ではサイズの上限設定がされていません。

逆に横幅のサイズ指定をしておけば(少なくとも新規にUPする画像においては)①②の工程は不要なんですよね。

 

え?じゃあなんで①②みたいな面倒くさいことをするの?
よめちゃん
サンツォ
う~ん。なんかうまく動作しないこともあるから

確実に&最大限に画像を小さくするなら①②をやっておくと安全かな。

 

実際にEWWW Image Optimizerで画像の横幅を指定してみましょう。

※プラグインが入っていない方は、インストール&有効化してください。

 

WordPressの管理画面から設定EWWW Image Optimizerリサイズ の順に進んでください。

画像のリサイズの幅の上限を指定(例:800、もしくは640など)の順で設定します。

EWWW Image Optimizerで画像の横幅を指定

 

※EWWW Image Optimizerは「ワードプレスのおすすめプラグイン!初心者向け21選」の記事でも紹介しています。

ワードプレスのおすすめプラグイン!初心者向け21選【2020年版】

 

ブログ画像のサイズについてまとめ

 

ブログ画像のサイズ・容量に関しては下記を目安にしてください。

サイズ:横幅1000px以下を目安
容量:100~200kb以下を目安

 

 

画像を圧縮する方法については、下記の方法をおすすめします。

画像圧縮の3ステップ

大きな画像はサイズ変更(リサイズ)
    ※そもそも小さい画像(1000px以下など)ならこの手順は不要。
     ↓
「TinyPNG」で画像を圧縮
     ↓
「EWWW Image Optimizer」で画像を最適化

 

 

そのほかAlt表記や著作権など、ブログ画像で知っておくべき知識については下記の記事にまとめています。

完全網羅!【ブログ画像】で知っておくべき知識と注意点

ぜひ参考にしてみてください!

 

 

WordPressを始めるなら!
【国内最速!超高性能&格安レンタルサーバー】

当サイト限定特典500円OFF!
しかもコノハなら初期費用無料!

 

ワードプレス なんでも相談!
【サイト引越し・トラブル解決・カスタム相談】

相談無料!保証つき! 引越し・移転・テーマ変更・トラブル解決・カスタム相談など…WordPressのことなら何でも相談できるよ♪

 

 

 

 

-WordPress/ワードプレス
-,

Copyright© ブログ部 , 2020 AllRights Reserved.