> 【国内最高】人気№1のブログテーマ「SWELL」をガチレビュー!
PR

WordPressブログの画像サイズ|目安と圧縮方法について解説っ!

WordPress-blog-image-size-optimization

WordPressブログの画像サイズの目安や、圧縮方法についても完全解説します!

本記事の内容
  • ブログ画像サイズの目安
  • ブログ画像サイズの圧縮方法
  • ページスピードを上げる方法
Blog

この記事を書いた人

ヒナキラ

ブログで月25万円。Twitterフォロワー13,000人。ブログとSNSとSEOが大好き。自称テーマおたく。SWELLに関するYouTubeもやってるよ。

Blog

この記事を書いた人

ヒナキラ

ブログで月25万円。Twitterフォロワー13,000人。ブログとSNSとSEOが大好き。自称テーマおたく。SWELLに関するYouTubeもやってるよ。

WordPressブログ画像のサイズは、ページスピードに直接かかわるので大事です。

ページスピードがあまりに遅いと、SEO評価が下がってしまいます。

そればかりか、大切な読者を離脱させてしまうことにも…。

離脱されれば収益にも影響するでしょう。

そこで、今回はWordPressブログで使う画像の最適化方法について、サイズの目安や圧縮方法などとあわせて紹介します。

画像サイズがよく分からない方、最適化方法を知りたい方は、必見です。

見たいところに飛べる目次

WordPressブログの画像サイズの目安は?

WordPressブログの画像サイズの目安について解説します。

ただ、画像サイズといっても、2つのものがあって・・・ちょっとややこしいです。

なお、その2つの画像サイズは、見た目と容量の2つ。

画像の見た目のサイズの場合は「px」という単位を使い、画像の容量サイズの場合には「KB」とか「MB」という単位になります。

見た目のサイズ「px」の目安

画像サイズの目安として以下3つのパターンを紹介しますので、参考にしてみて下さい。

①横800pxの場合

横800px縦420pxの画像
ヒナキラ

横800px、縦420pxだと、このようなサイズになります。

③横600pxの場合

横600px縦315pxの画像
ヒナキラ

横600px、縦315pxだと、このようなサイズになります。

④横400pxの場合

横400pxの場合
ヒナキラ

横400px、縦210pxだと、このようなサイズになります。

画像サイズの目安としては、こんなイメージになります。

横幅いっぱいの画像を用意するなら、幅は1,000pxもあれば十分でしょう。

当サイトでは800pxでもほとんど横幅いっぱいですからね。

ファイルのサイズ「KB」の目安

画像のファイルサイズ

画像ファイルのサイズは200KB以下が目安となります。

当サイトでは、基本的に100KBが多く、たまに100KBを超える画像があるくらいです。

なので、200KBを超えるというのは少々ムダな大きさになっていると言えるでしょう。

ファイルサイズが大きいと、読み込み速度も遅くなってしまうので良いことはありません。

ヒナキラ

読み込みスピードが遅いとSEOにも悪影響があるので注意。

ちなみにWordPressの表示速度が遅いと、下記のようなデメリットが生じてしまいます。

  • 直帰率が増加する
  • SEO的にマイナス

検索ユーザーはできるだけ早く質問に対する回答を見つけたいと考えています。
研究(英語)では、ユーザーはページの読み込み速度を非常に気にかけていることがわかっています。
読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。
そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

ウェブマスター向け公式ブログ

要するに、スピード大事!です。

自分のWordPressブログの横幅(px)を確認する方法

横幅のサイズを確認する方法

自分のWordPressブログの横幅(px)を確認する方法を見ておきましょう。

ヒナキラ

横幅が分かれば、どのくらいの画像サイズにすればいいかの目安になりますからね。

なお、WordPressテーマによっても横幅が違うので、要チェックです。

STEP
デベロッパーツールを開く

まず、Windowsなら「F12」を、Macなら「Command+Option+Iキー」を押しましょう。

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

デベロッパーツール
STEP
左上の矢印マークをクリックする

次に、左上にある「矢印のマーク」をクリックしましょう。

STEP
コンテンツエリア部分をクリック

コンテンツエリア部分にカーソルを合わせると青色になるので、そこでクリックします。

青くなった部分をクリック
STEP
「Computed」のタブをクリック
「Computed」のタブをクリック
STEP
コンテンツの横幅を確認する

すると、下記のようにコンテンツの横幅が確認できます。

青枠内の数字で横幅サイズが分かる

当サイトでは横幅が822pxだと分かりました。

ヒナキラ

つまり、画像はこのサイズを目安にして作ればいいということですね。

【最適化へ】ブログ画像のサイズを圧縮する方法3つ

画像サイズを最適化するための、ブログ画像のサイズを圧縮する方法を紹介します。

具体的には、以下の3つですね。

  1. 「ペイント」アプリでリサイズする
  2. 「TinyPNG」で画像を圧縮する
  3. 「EWWW Image Optimizer」で自動圧縮する
ヒナキラ

それぞれ見ていきましょう。

①「ペイント」アプリでリサイズする

まずは「ペイント」アプリでリサイズする方法になります。

ヒナキラ

実際に画像の見た目のサイズを変更するやり方ですね。

STEP
「ペイント」アプリを開く
ペイントアプリ
STEP
「開く」をクリック
開くをクリック
STEP
画像を選ぶ
画像を選ぶ
STEP
「サイズ変更」をクリック
「サイズ変更」をクリック
STEP
サイズを指定して変更
サイズ変更と傾斜
STEP
小さくリサイズできました(ファイルサイズも)
小さくリサイズできました
ヒナキラ

もちろん、ファイルサイズも小さくなっていますよ。

②「TinyPNG」で画像を圧縮する

次は、画像の見た目は変えずに、ファイルサイズのみを圧縮して少なくする方法です。

TinyPNG」なら画質もあまり落ちないので、ぜひ使いましょう。

STEP
TinyPNGを開く
TinyPNG
STEP
点線の枠内をクリック
点線の枠内をクリック
STEP
圧縮したい画像を選ぶ
圧縮したい画像を選ぶ
STEP
「189.2KB」→「62.9KB」に圧縮できました!
「189.2KB」→「62.9KB」に圧縮!
ヒナキラ

あとは、ダウンロードしてブログに貼り付けていけばOKですね。

③「EWWW Image Optimizer」で自動圧縮する

「EWWW Image Optimizer」プラグイン

最後に「EWWW Image Optimizer」で自動圧縮する方法です。

EWWW Image Optimizer」はWordPress用のプラグインで、画像最適化として有名なので知っているかもしれませんね。

このプラグインが優れているのは、過去画像も一気に最適化ができる点です。

新しい画像に関しては、さっき見ていただいた2つの方法で対応できますが、過去画像はそうはいきませんからね。

過去分はどうすればいいのよ・・・。全部やり直し?

という疑問への回答が、まさにこれなのです。

設定方法などは、以下の記事で見てみて下さいね。

画像サイズを圧縮してWordPressにアップするまでの手順

画像サイズを圧縮しつつWordPressにアップするまでの手順についても解説していきます。

具体的には、以下の流れです。

  1. 画像を選定する
  2. 画像を編集する
  3. 画像を圧縮する
  4. WordPressにアップする
  5. ALTテキストを入力する
ヒナキラ

順番に解説します。

①画像素材を探してダウンロード

Canva

まずは画像素材探しですね。

いろいろありますが、個人的なおすすめは「Canva」です。

Canvaなら画像素材だけでなく、編集まで一気にできるので時短になるので。

1つのアプリですべてを完結できるというのは、割と大きいです。

②ダウンロードした画像を編集する

Canvaで編集

画像を選んだら、Canvaで編集していきます。

テキストを追加したり、他の画像と組み合わせたり、いろんな図やグラフまで、なんでもござれです。

さらに、サイズまで変更できるので、本当にこれ1つで画像選びから編集までをすべて完結できちゃいます。

③画像を圧縮する

TinyPNG

Canvaで画像を編集して、画像サイズを設定して、ダウンロードができたら、次は圧縮です。

TinyPNGなら画質をほとんど落とさずにファイルサイズを削減できます。

かなり違ってくるので、面倒かもしれませんが、必ずやりましょう。

④WordPressに画像をアップする

画像をアップ

画像の準備ができたら、いよいよWordPressにアップロードします。

手順としては、投稿記事画面を開いて、上記のように「画像」をクリック。

使う画像を選んでアップすればオッケーです。

⑤ALTテキストを設定する

ALTテキストを入力

最後にALTテキスト(画像の説明)を入力しましょう。

これは割と忘れがちですが、SEO対策にもなるので大事です。

入力するテキストについては、画像の見た目を説明するイメージで。

目の見えない方が、音声だけでも理解できるようなテキストが理想かと。

ブログ画像サイズを変更するときの注意点

ブログ画像サイズを変更するときの注意点についても3つほど紹介します。

  1. 画像は粗くしすぎない
  2. 画像の見た目サイズは統一させる
  3. スマホで撮った画像は特に注意
ヒナキラ

では、それぞれ解説します。

①画像は粗くしすぎない

画像サイズを意識するあまり、画像が粗くなりすぎないようにしましょう。

読者が不快感を覚えるような画像なら、イエローカードです。

読者満足度を最大化するように、考えて設置するといいですね。

画像が綺麗すぎてもページスピードが遅ければ読者満足度は落ちるし、画像が粗すぎても落ちるし、ちょうどいいところを探すべきかなと。

②画像の見た目サイズは統一させる

画像の見た目サイズは、統一させるようにしましょう。

もちろん時と場合によりますが、基本的には同じサイズにしておくと統一感が増して、クオリティが高く見えます。

クオリティが高く見えるだけでも、情報の信頼性が増します。

細部に気を使うブログなら、やはり情報の質も高いだろうと無意識に感じるからですね。

③スマホで撮った写真は特に注意

スマホで撮った写真は、とても大きいサイズになっているので注意です。

そのままだと1000KBを超えることもザラなので。

なので、必ずリサイズしてから使いましょう。

その場合にもCanvaを通してサイズを変更しつつ、編集するというのがおすすめです。

ブログ画像サイズの最適化以外でページスピードをアップさせるには?

ブログ画像サイズの最適化以外でページスピードをアップさせる方法についても触れておきます。

具体的には以下の10こです。

  • 高速なサーバー(プラン)を使う
  • 高速化機能のあるWordPressテーマを使う
  • 画像フォーマットを「WebP」にする
  • ウィジェット、埋め込み等に注意
  • リビジョンデータを制限する
  • 重要でないJavaScriptの実行を遅らせる
  • CSS配信を最適化する
  • 無駄にアドセンスを使わない
  • キャッシュ機能を活用する
  • プラグインの質と量に注意する

上記について、詳しくは「WordPress高速化|モバイル表示速度98点にした方法」を参考にしてみてください。

WordPressブログの画像サイズのよくある質問

JPGとPNGどっちがおすすめ?

16色まではPNG、それ以上の色数がある場合にはJPGがおすすめです。

イラストにはPNG、写真にはJPGという覚え方でも良いでしょう。

画像サイズ変更におすすめのツールは?

「ペイント」アプリや、「Canva」という画像編集ツールがおすすめです。

画像サイズの圧縮におすすめのツールは?

TinyPNG」がおすすめです。

過去画像のサイズ変更はどうしたら良いですか?

EWWW Image Optimizer」で一括変換するのがおすすめです。

まとめ|WordPressブログ画像を最適化してページスピードをUP!

まとめです。

画像サイズはなるべく小さく!だけど画質はなるべく落とさずに!

これです。

これを意識して、ブログ運営を加速させちゃいましょう。

では、今回は以上です。

\ 充実の毎日を手に入れよう! /

※月20万円稼げました。行動したもの勝ち!

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

コメント

コメントする

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

CAPTCHA

見たいところに飛べる目次