WordPressブログの画像サイズの目安や、圧縮方法についても完全解説します！
- ブログ画像サイズの目安
- ブログ画像サイズの圧縮方法
- ページスピードを上げる方法
WordPressブログ画像のサイズは、ページスピードに直接かかわるので大事です。
ページスピードがあまりに遅いと、SEO評価が下がってしまいます。
そればかりか、大切な読者を離脱させてしまうことにも…。
離脱されれば収益にも影響するでしょう。
そこで、今回はWordPressブログで使う画像の最適化方法について、サイズの目安や圧縮方法などとあわせて紹介します。
画像サイズがよく分からない方、最適化方法を知りたい方は、必見です。
WordPressブログの画像サイズの目安は？
WordPressブログの画像サイズの目安について解説します。
ただ、画像サイズといっても、２つのものがあって･･･ちょっとややこしいです。
なお、その２つの画像サイズは、見た目と容量の２つ。
画像の見た目のサイズの場合は「px」という単位を使い、画像の容量サイズの場合には「KB」とか「MB」という単位になります。
見た目のサイズ「px」の目安
画像サイズの目安として以下３つのパターンを紹介しますので、参考にしてみて下さい。
①横800pxの場合
ヒナキラ横800px、縦420pxだと、このようなサイズになります。
③横600pxの場合
ヒナキラ横600px、縦315pxだと、このようなサイズになります。
④横400pxの場合
ヒナキラ横400px、縦210pxだと、このようなサイズになります。
画像サイズの目安としては、こんなイメージになります。
横幅いっぱいの画像を用意するなら、幅は1,000pxもあれば十分でしょう。
当サイトでは800pxでもほとんど横幅いっぱいですからね。
ファイルのサイズ「KB」の目安
画像ファイルのサイズは200KB以下が目安となります。
当サイトでは、基本的に100KBが多く、たまに100KBを超える画像があるくらいです。
なので、200KBを超えるというのは少々ムダな大きさになっていると言えるでしょう。
ファイルサイズが大きいと、読み込み速度も遅くなってしまうので良いことはありません。
ヒナキラ読み込みスピードが遅いとSEOにも悪影響があるので注意。
ちなみにWordPressの表示速度が遅いと、下記のようなデメリットが生じてしまいます。
- 直帰率が増加する
- SEO的にマイナス
検索ユーザーはできるだけ早く質問に対する回答を見つけたいと考えています。
ウェブマスター向け公式ブログ
研究（英語）では、ユーザーはページの読み込み速度を非常に気にかけていることがわかっています。
読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。
そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
要するに、スピード大事！です。
自分のWordPressブログの横幅(px)を確認する方法
自分のWordPressブログの横幅(px)を確認する方法を見ておきましょう。
ヒナキラ横幅が分かれば、どのくらいの画像サイズにすればいいかの目安になりますからね。
なお、WordPressテーマによっても横幅が違うので、要チェックです。
まず、Windowsなら「F12」を、Macなら「Command＋Option＋Iキー」を押しましょう。
すると、下記のような画面になります。
次に、左上にある「矢印のマーク」をクリックしましょう。
コンテンツエリア部分にカーソルを合わせると青色になるので、そこでクリックします。
すると、下記のようにコンテンツの横幅が確認できます。
当サイトでは横幅が822pxだと分かりました。
ヒナキラつまり、画像はこのサイズを目安にして作ればいいということですね。
【最適化へ】ブログ画像のサイズを圧縮する方法３つ
画像サイズを最適化するための、ブログ画像のサイズを圧縮する方法を紹介します。
具体的には、以下の３つですね。
- 「ペイント」アプリでリサイズする
- 「TinyPNG」で画像を圧縮する
- 「EWWW Image Optimizer」で自動圧縮する
ヒナキラそれぞれ見ていきましょう。
①「ペイント」アプリでリサイズする
まずは「ペイント」アプリでリサイズする方法になります。
ヒナキラ実際に画像の見た目のサイズを変更するやり方ですね。
ヒナキラもちろん、ファイルサイズも小さくなっていますよ。
②「TinyPNG」で画像を圧縮する
次は、画像の見た目は変えずに、ファイルサイズのみを圧縮して少なくする方法です。
「TinyPNG」なら画質もあまり落ちないので、ぜひ使いましょう。
ヒナキラあとは、ダウンロードしてブログに貼り付けていけばOKですね。
③「EWWW Image Optimizer」で自動圧縮する
最後に「EWWW Image Optimizer」で自動圧縮する方法です。
「EWWW Image Optimizer」はWordPress用のプラグインで、画像最適化として有名なので知っているかもしれませんね。
このプラグインが優れているのは、過去画像も一気に最適化ができる点です。
新しい画像に関しては、さっき見ていただいた２つの方法で対応できますが、過去画像はそうはいきませんからね。
マチコ過去分はどうすればいいのよ･･･。全部やり直し？
という疑問への回答が、まさにこれなのです。
設定方法などは、以下の記事で見てみて下さいね。
画像サイズを圧縮してWordPressにアップするまでの手順
画像サイズを圧縮しつつWordPressにアップするまでの手順についても解説していきます。
具体的には、以下の流れです。
- 画像を選定する
- 画像を編集する
- 画像を圧縮する
- WordPressにアップする
- ALTテキストを入力する
ヒナキラ順番に解説します。
①画像素材を探してダウンロード
まずは画像素材探しですね。
いろいろありますが、個人的なおすすめは「Canva」です。
Canvaなら画像素材だけでなく、編集まで一気にできるので時短になるので。
1つのアプリですべてを完結できるというのは、割と大きいです。
②ダウンロードした画像を編集する
画像を選んだら、Canvaで編集していきます。
テキストを追加したり、他の画像と組み合わせたり、いろんな図やグラフまで、なんでもござれです。
さらに、サイズまで変更できるので、本当にこれ１つで画像選びから編集までをすべて完結できちゃいます。
③画像を圧縮する
Canvaで画像を編集して、画像サイズを設定して、ダウンロードができたら、次は圧縮です。
TinyPNGなら画質をほとんど落とさずにファイルサイズを削減できます。
かなり違ってくるので、面倒かもしれませんが、必ずやりましょう。
④WordPressに画像をアップする
画像の準備ができたら、いよいよWordPressにアップロードします。
手順としては、投稿記事画面を開いて、上記のように「画像」をクリック。
使う画像を選んでアップすればオッケーです。
⑤ALTテキストを設定する
最後にALTテキスト（画像の説明）を入力しましょう。
これは割と忘れがちですが、SEO対策にもなるので大事です。
入力するテキストについては、画像の見た目を説明するイメージで。
目の見えない方が、音声だけでも理解できるようなテキストが理想かと。
ブログ画像サイズを変更するときの注意点
ブログ画像サイズを変更するときの注意点についても３つほど紹介します。
- 画像は粗くしすぎない
- 画像の見た目サイズは統一させる
- スマホで撮った画像は特に注意
ヒナキラでは、それぞれ解説します。
①画像は粗くしすぎない
画像サイズを意識するあまり、画像が粗くなりすぎないようにしましょう。
読者が不快感を覚えるような画像なら、イエローカードです。
読者満足度を最大化するように、考えて設置するといいですね。
画像が綺麗すぎてもページスピードが遅ければ読者満足度は落ちるし、画像が粗すぎても落ちるし、ちょうどいいところを探すべきかなと。
②画像の見た目サイズは統一させる
画像の見た目サイズは、統一させるようにしましょう。
もちろん時と場合によりますが、基本的には同じサイズにしておくと統一感が増して、クオリティが高く見えます。
クオリティが高く見えるだけでも、情報の信頼性が増します。
細部に気を使うブログなら、やはり情報の質も高いだろうと無意識に感じるからですね。
③スマホで撮った写真は特に注意
スマホで撮った写真は、とても大きいサイズになっているので注意です。
そのままだと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万円稼げました。行動したもの勝ち！
コメント