WordPressのサイトにアップロードした画像を自動で最適化するプラグイン「Smush Image Compression and Optimization」

Wordpressは簡単に画像をアップロードして投稿などへ挿入できるので、ついつい大きなファイルをそのままアップロードしてしまいがち。大きな画像を表示するということはページの表示速度が遅くなるという情報提供者側の問題とは別に、閲覧する側からしても1ページ見るのに大きな通信量が必要になるため、特にスマートフォンなどでの表示には気を使いたいところですね。

今回紹介する「Smush Image Compression and Optimization」は簡単設定でアップロード時の画像を自動で最適化してくれるプラグインです。もちろん過去にアップロードした画像も最適化する機能を持っています。

サイトで実際に行った結果

 あくまでも私の管理するサイトの結果ではありますが、参考になれば・・・

  1. 【EWWW Image Optimizer】プラグインから変更したサイト
  2. 399件(同時に作成されるいろいろなサイズの画像数2616件)の画像を一括で最適化してみたところ、977.6 KB、割合にして2.2%の改善ができました。【EWWW Image Optimizer】も画像の圧縮については定評のあるプラグインなのでそれよりも最適化してしまうとは!!とちょっとびっくりしました。

  3. 【Imsanity】プラグインから変更したサイト
  4. 561件(同時に作成されるいろいろなサイズの画像数3657件)の画像を一括して最適化してみたところ、10.4 MB、割合にして8.2%の改善ができました。こちらは絶大な効果でした。

両サイトとも画像がいっぱいのサイトではないため「うわぁ表示が速くなった」という感じではありませんでしたが、前者をGoogle PageSpeed Insightsで計測したところ、時間帯などの要因もあるかもしれませんがおおよそ4ポイント改善しました。画像がたくさん使ってあるページなどでは更に効果がありそうです。

スポンサーリンク

【Smush Image Compression and Optimization】プラグインの基本的な機能・できること

  1. WordPressで生成される画像すべてを最適化できる(元画像はサイズ変更する/しないの変更可)
  2. 画像情報(EXIF)情報を消去(残す設定も可能)
  3. テーマの画像などメディアライブラリ以外の画像も最適化できる

無料版では一括最適化できるのは50件ずつになるのでたくさん画像がある場合には最初すごく時間がかかります(恐らくサーバーへの負荷もかかります)ので余裕を持って行うか、毎日少しずつ実行するようにするといいと思います。

この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. 閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています

【Smush Image Compression and Optimization】プラグインの設定画面や表示の日本語化と翻訳

当サイトで私が翻訳した【Smush Image Compression and Optimization】プラグインの日本語化ファイルを配布しています。

翻訳ファイルは

「WP Smush」プラグインの日本語化ファイルを作りました。自由にダウンロードして使ってください。

からダウンロードできます(ダウンロードの方法や日本語の適用方法なども解説しています)

翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。

【Smush Image Compression and Optimization】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【Smush Image Compression and Optimization】プラグインの基本的な使い方

管理画面の項目も少なく、日本語化すれば簡単に設定できます。

設定はダッシュボードから「メディア」→「wp smush」で行います

とはいっても設定が必要な箇所は3つだけ

  1. 画像アップロード時に自動最適化を行うかどうか
  2. EXIFデータを保存するかどうか(標準は削除するようになっています)
  3. フルサイズ(元)画像の高さと幅(サイズ)を小さくするかどうか

です。EXIFデータにはカメラの情報や撮影した場所の情報も保存しているため、サイトで使う場合には削除しておくことをおすすめします。

元画像についてはサイトの幅などに合わせてサイズ変更しておくのがいいとは思うのですが、本文の幅程度にした画像をスライダーなどで画面いっぱいに表示しようとしたときには画質が粗くなってしまうので、サイト全体の横幅に合わせておくと後で困らずに済むと思います。

管理画面上でちょっと分かりにくかったのがこの部分

「615画像を最適化しました」となっているのが各画像に付随するいろいろなサイズの画像の合計、右側にある「101添付ファイルを最適化しました」というのが元画像の数になるので、無料版ではこの元画像の数が1回の1括最適化で50枚までということになります。

無料版で最初に全部の画像を最適化するときは左側の画面を見ながら全部の画像が最適化されるまで繰り返し一括最適化をする必要があります。

【Smush Image Compression and Optimization】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

プラグインのテスト環境&個人的評価

最後に【Smush Image Compression and Optimization】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

  1. WordPressのバージョン:4.9.0
  2. PHPのバージョン:7.0
  3. テーマ:Simplicity バージョン2.3.0g
  4. プラグインのバージョン:2.7.6
  5. このプラグインの最新バージョンは2.7.6です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

    5段階評価

  1. 設定のしやすさ:★★★★★
  2. 使いやすさ:★★★★★
  3. おすすめ度:★★★★★

設定もしやすく簡単に画像の圧縮(最適化)ができます。

無料版で一括して最適化できるのは50枚の画像までですが、たくさんの画像を一括してアップロードするようなサイトでなければ、画像を追加するたびに最適化が行われるため、一度全部の画像を最適化したら特に無料版でも問題ないと思います。

Wordpressの本

WordPressのツボとコツがゼッタイにわかる本
  • メーカー(著者):中田 亨
  • 価格  : ¥ 2,700 prime
  • 販売者 :Amazon.co.jp
  • 商品概要:
詳細情報を見る
たった1日で基本が身に付く! WordPress超入門 (たった1 日で基本が身に付く!)
  • メーカー(著者):佐々木 恵
  • 価格  : ¥ 1,944 prime
  • 販売者 :Amazon.co.jp
  • 商品概要:
詳細情報を見る
WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)
  • メーカー(著者):中島 真洋 
  • 価格  : ¥ 3,002 prime
  • 販売者 :Amazon.co.jp
  • 商品概要:
詳細情報を見る

※価格は24時間以内に情報を取得した時点のものであり変更される場合があります。購入においてはAmazon.co.jpに表示されている価格の情報が適用されます。
※knowledge Baseは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。

プラグインに関するお問い合わせ

最後までお読みいただきありがとうございました。 内容の相違、導入後のトラブル、設定方法のお問い合わせなどはこちらのリンクからお願いします。
さまざまな情報をいただくことで、プラグインの紹介記事をより正確でよりわかりやすく、よりいろいろな方のお役に立てる情報にしていきたいと考えておりますので、ぜひともご協力をお願いいたします。
役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
ページ先頭へ