WordPressの始め方を分かりやすく解説!こちらをクリック

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

パソコンデスク
  • URLをコピーしました!
この記事のまとめ

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

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

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

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

よめちゃん

ブログの画像サイズってそんなに大切なの?

サンツォ

大きいサイズ・重い画像のままだとページ表示も遅くなるよね。
そうすると検索順位が下がる可能性もあるんだ。

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

目次

SEOに強くて、お洒落で、記事制作スピードも速いテーマ!
マクサンでも使っている超おすすめテーマ「SWELL」はこちら!

1976年生まれ。東京都出身。合同会社田舎暮らし代表。複数の業界にて20年近くWebマーケティングの仕事に携わる。2013年より副業でブログを開始。 複数のブログ・SNSを運営した経験を活かし、ブログやアフィリエ イトのノウハウを発信する当ブログを開設。またブロガーのためのオンラインサロン「マクサン」の共同オーナーを務める。フォロワー10万人を抱えるInstagram「ベランダ飯」も運営。借金地獄のどん底からブログ一本で這いあがり、月収300~400万円を稼げるように。2020年2月には累計収益が1億円を突破。著書に『マクサン式Webライティング実践スキル大全(マクサン本)』(大和書房)などがある。GMOのオウンドメディア「ワプ活」で全記事の監修も務める。本名は吉岡 智将

いや、俺なんてそんな、どこにでもいるただのマクリンですよ。 副業でガジェットサイト「マクリン」の運営を2017年5月に開始し、2019年12月に副業を株式会社makuriに法人化。2020年4月に合同会社レイテラスを設立し、コワーキングスペース「レイテラス」を開店。撮影スタジオ「レイテラススタジオ」もスタート。ブロガー向けオンラインサロン「マクサン」の共同オーナーをつとめ「マクサン本」の共著者。

※当ページの情報は執筆時点のものであり、最新の情報は各サービスの公式サイトよりご確認ください。
※当ページのリンクには広告が含まれる場合があります。

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

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

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

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

画像サイズ・容量の目安
  • サイズ:横幅1000px以下を目安
  • 容量:100~200kb以下を目安

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

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

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

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

サンツォ

あとは画像に文字を入れたり、加工を加えた場合には
念のためサイズを確認しておいたほうがいいよ!

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

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

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

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

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

画像圧縮の3ステップ

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

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

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

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

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

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

サンツォ

Windowsなら「ペイントMacなら「プレビュー」で
画像サイズの変更ができるよ!

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

STEP
画像サイズを確認

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

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

よめちゃん

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

画像サイズを確認

STEP
サイズ変更

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

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

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

ペイントソフトで画像のサイズを変更
STEP
横幅を指定

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

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

画像の横幅を指定
STEP
確定し保存

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

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

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

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

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

画像のリサイズ完了

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

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

「TinyPNG」で画像を圧縮

TinyPNGの画面キャプチャ

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

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

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

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

STEP
画像をドロップ

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

複数画像も可能です。

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

TinyPNGに画像をドロップ
STEP
画像の圧縮

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

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

TinyPNGで画像の圧縮が完了
サンツォ

今回は12%しか圧縮されなかったけど
もっと大きな画像ならだいたい60~70%くらいは圧縮されるよ。

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

STEP
複数画像の圧縮

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

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

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

TinyPNGで複数画像を圧縮
STEP
圧縮完了

最終的に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選」の記事でも紹介しています。

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

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

画像サイズ・容量の目安
  • サイズ:横幅1000px以下を目安
  • 容量:100~200kb以下を目安

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

画像圧縮の3ステップ

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

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

パソコンデスク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • サンツォさん、はじめまして。

    この6月からマクサンから経由して、ブログをはじめた主婦です。
    ちょうど画像の処理をどうしようか悩んでいたところだったので、この記事は本当にありがたいです。これから今までの記事の確認をしていきます。

    SEO対策まで意識できればいいのですが、まだそこまでいかず…。
    読みやすい文章、見やすい記事はどうしたらできるかを考えながら作成しています。なかなか難しいし、何度も読み返しているので、時間がかかりますよね。

    サンツォさんの文章や記事は、見やすく、読みやすいので、改めてさすがだなぁと感じています。

    これからも、マクサンを参考にして、楽しくブログを作っていきたいと思います。きっかけを作ってくださって、ありがとうございました。

    • ももかさん、コメントありがとうございます!

      嬉しいコメント、元気をもらいました!

      ぜひ何かの参考にしていただければ幸いです(`・ω・´)b

コメントする

コメントは日本語で入力してください。(スパム対策)

目次