Written by Manabu Bannai

【簡単】WordPressサイトで画像圧縮して、サイトを軽量化する方法

PROGRAMMING

WordPressで画像圧縮と軽量化をしたい人「WordPressの画像圧縮や軽量化ってどうすればいいんだろう? とりあえずWordPressでブログ運営しているけど、画像の最適化とかって、よく分からないです。具体的なやり方を、必要最低限の情報で教えて欲しいです。」

こういった疑問に答えます。

本記事の内容

  • WordPressサイトで画像圧縮して、サイトを軽量化する方法
  • WordPressサイトで「アップ済みの画像」を軽量化する方法
  • 重たすぎるページは「アナリティクス確認→個別修正」でOKです

この記事を書いている僕は、プログラミング歴5年ほど。
WordPressが得意分野でして、WordPress制作事業で稼いできました。
» 参考:フリーランスエンジニアとして月収100万円を稼いだ方法

今回のテーマは「WordPressの画像軽量化・圧縮」です。

サイトが速いことは、読者満足度の向上に繋がり、かつSEOにも影響します。本記事を読みつつ、画像が軽くて、読み込み速度の速いサイトを目指しましょう。

※基本的にはMacユーザー向けで解説します。

スポンサードサーチ


WordPressサイトで画像圧縮して、サイトを軽量化する方法


手順は次のとおり。

  • 手順①:Automatorで画像を自動リサイズ
  • 手順②:JPEGminiで軽量化したあとにアップロード

手順①:Automatorで画像を自動リサイズ

これはMac限定ですが、初期インストールされている「Automator」というアプリを使います。そして、下記画像のように設定します。

具体的な手順は「Automatorのアプリを起動→アプリケーションを選択→写真:イメージをサイズ調整を選択→1,200pxに設定」という流れなのですが、面倒な人は下記から設定ファイルをダウンロードできます。
» Automatorの設定ファイルをダウンロードする


ダウンロード完了したら、アイコンに画像をドラッグ&ドロップするだけです。

なお、「なんで1,200pxなんですか?」と聞かれそうですが、その回答は「1,200pxくらいだと、PCで画像が綺麗に見えて、かつ、重たすぎないから」です。

もちろん、リサイズ作業は自分でやってもいいですが、毎日やることなので、自動化した方が良いですね。

更新情報:2018年8月5日

Automatorで画像をリサイズを自動化しなくても、JPEGminiで自動リサイズできることに気が付きました。なので、手順①は、不要となりますm(_ _)m
» 参考:JPEG画像を劣化なしで圧縮・リサイズしてくれるMacアプリ「JPEGmini」

手順②:JPEGminiで軽量化したあとにアップロード

JPEGminiというアプリがおすすめです。

無料でも使えるのですが、複数画像を一括で軽量化するには、有料版のダウンロードが必要です。

3,000円ほどしますが、「本気でブログを頑張るぜ」って方は投資として購入するのもありだと思いますよ。

なお、画像の種類には「JPG・JPEG・PNG」などがありますが、基本的には「JPG・JPEG」を使いましょう。JPGとJPEGはほぼ同じでして、PNGだけはちょっと性質が異なります。

詳しくはググっていただけたらと思いますが、結論だけ書くと「PNGは重たいからNG」です。なので、PNG画像を使いたくなったら、JPGに変換してからWordPressにアップロードしましょう。
※PNG→JPGの画像変換は、Macのプレビューアプリで変換できますよ。

補足:技術に詳しい方向け

技術に詳しい人からは、「WordPressの自動リサイズで良くないですか?」といわれそうですが、結論はそれでもOKです。 とはいえ、無駄に重たい画像をサーバーアップしまくるのは、あまり良くないかな、というのが僕の考えです。

リサイズ&軽量化した方が、サーバーにも優しいですし、自動リサイズ後の画像も軽量化されるわけなので、やったほうがいいと思っています。

WordPressサイトで「アップ済みの画像」を軽量化する方法


方法は2つあります。

  • 方法①:EWWW Image Optimizerを使う(簡単です)
  • 方法②:サーバーから直操作で画像軽量化する(すこし難しい)

方法①:EWWW Image Optimizerを使う(簡単です)

プラグインを使う方法です。
» EWWW Image Optimizer | WordPress.org

具体的な設定方法は下記の記事をどうぞ。
» EWWW Image Optimizer の設定方法と使い方

なお、このプラグインだと完全に軽くなる訳じゃないので、さらにできれば方法②がおすすめです。しかし、方法②はちょっと技術者向けなので、「技術は分かりません」って人は後述する「重たすぎるページは「アナリティクス確認→個別修正」でOKです」の章をどうぞ。

方法②:サーバーから直操作で画像軽量化する(すこし難しい)

ここはWordPressの内部構造を知っている人限定でよろです。
※バックアップしてから操作してください。ミスると画像がバグります。

WordPressでは上記の階層部分に画像ファイルがありますので、そこから画像を一括DLして、リサイズ&軽量化して、上書きしてアップロードという流れです。

なお、ファイル名に「-1024×683」とかって書かれているのはWordPressで自動リサイズ済みなので修正不要です。※繰り返しですが、技術わからない人はやらなくてOKです。

重たすぎるページは「アナリティクス確認→個別修正」でOKです


日頃から画像軽量化を意識すべきですが、「過去記事が多いので、修正が大変です…」という人も多いはず。

そういった場合は「アナリティクスを見つつの個別修正」でいいかなと思います。

Googleアナリティクスの「速度についての提案」を確認する


上記画像の通りでして、画面の右側に「PageSpeedスコア」が見えますよね。

ここが60点以上なら、とりあえずOKかなと。
このあたりこだわりすぎると泥沼にハマりますので、ほどほどでOKです。

なお、「60点って低くない?」と思われるかもですが、僕の場合は「60点のページでもビッグキーワードで上位表示できている」という事実があるので、別に問題ないかなと思っています。

極端に点数が低いページがあるなら、個別修正していけばいいかなと思います。

オマケ:PHPのバージョンはPHP7にしましょう。

過去に僕がTweetした内容ですが、下記のとおり。

PHPのバージョンを変更するだけで、さくっと速度アップできますので。
そして、実際に試した方のTweetが下記のとおり。


※PageSpeed InsightsとはGoogleが提供する速度計測ツールですね。

PHPバージョンが7じゃない人は、7に変更しておくと良いですよ。
なお、古いサイトとかだとバグる可能性もあるので、バグにはご注意ください。なんかおかしくなったら、PHPバージョンを元に戻せば直ります。

最後に:ページ速度は気にしすぎなくて良い

今回の記事はここまでなのですが、最後にアドバイスがありまして、それは「ページ速度とかは、そこまで気にしなくてOK」ということです笑。

画像軽量化とかは簡単なのでやっておくべきですが、その他の部分は、すこし難易度が高いですし、頑張りすぎると、泥沼にはまりますので ※過去に僕が経験済み。

ある程度は画像を軽量化して、それが終わったら、気にしすぎないようにしましょう。 サイト改善に時間をかけまくるより、記事に命をかける方が大切ですので…。

というわけで今回はおわりです。
読者にとって有益な記事を書きたいという方は、下記記事もあわせてどうぞ。

人気記事無料あり:エンジニアの僕がおすすめするプログラミングスクール3社