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

公開日:2017年12月26日 バックエンド(管理) 画像・動画
Knowledge Base メンテナンス


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. テスト環境については本文中に記載しています
  5. 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「"」「'」などの記号を入力し直してみてください。

管理画面でアイキャッチ画像が簡単に変えられるプラグイン「Easy Featured Images」

メディアライブラリにあるファイルの表示を自身のみに限定できるプラグイン「View Own Posts Media Only」

サイト内で使われていない画像を削除するプラグイン「DNUI Delete not used image」


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

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

翻訳ファイルは

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

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

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

インストール方法

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

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

を参照ください

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

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

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

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

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

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

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

公式サイトに掲載されている画像サンプルです


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

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

サーバーのメモリやCPUによってはエラーが出ることも

「メディア」を開いて一覧表示したときに「処理中...(日本語化した場合)」と表示されたままになっていることがあります。私の持つサイトでもこのプラグインのバージョン3.xで現象が出ました。

サーバーを調べてみるとCPU使用量やメモリが一時的にオーバーし、エラーとなって返ってきているにも関わらず、処理を続行しようとしていることが原因のようで、そのままだと延々と処理を続けようとしてしまうようです。

今後のアップデートで改善される可能性もありますが、特に容量の大きい画像を一括アップロードしたときにこの現象が出るようですから、同様の現象が出た場合にはアップロードした画像を自動で圧縮する設定を解除し、1つ1つ画像を圧縮していくしかないようです。

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

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

テストした環境

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

個人的な評価・感想ほか

    5段階評価

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

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

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

Wordpress関連の本

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バックアップなどの運用面も丁寧に解説。
できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 できるシリーズ
インプレス
WordPressは無料かつ高機能で、シェア率No.1のCMS(コンテンツ管理システム)です。その拡張性の高さから企業のホームページ制作にも利用されているほどで、ホームページで情報発信をするに当たって、個人でも本気度の高い方はWordPressを利用していることが多いです。本書はそんなWordPressの初期設定から制作、カスタマイズ、運用のノウハウまで幅広く学べる1冊です。

Knowledge Base Wordpress ha-Basic テーマ
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報