【WordPress】画像圧縮プラグインを『EWWW Image Optimizer』から『Smush』に変更した経緯と使い勝手!

Smush使い方レビューキャッチ画像Web関連
この記事は約13分で読めます。
スポンサーリンク

ワードプレスでブログ運営する上で画像圧縮プラグインはもはや定番となっています。

 

多くの人が利用しているプラグインは、設定がシンプルで機能も充実し無料で利用できる「EWWW Image Optimizer」ではないでしょうか。

当サイトでも運営初期から「EWWW Image Optimizer」を利用してきました。

 

無料版なので圧縮率はそう高くはないですが、使い勝手がとても良いので愛用していました。

評判も良い「EWWW Image Optimizer」から、わざわざ別のプラグインである「Smush」に変更した経緯と設定や簡単な使い方などを記事にしておこうと思います。

 

WordPress自体のインストールなどはちょっと記事が古いですが、こちらを参考にして下さい。

ロリポップで簡単インストールを使わずにWordPressをインストール【通常インストール】
レンタルサーバのロリポップでは、誰でも簡単にWordPressを始める事が出来る簡単インストールというのがあります。 面倒くさい事はせず一刻も早くブログを始めたい!という方には良いかもしれませんが、ローカルで検証したり他のレンタルサーバ会社でWordPressのブログを始める場合などサーバ会社独自のインストール方法では何かと不便なこともあるかも知れません。
スポンサーリンク

EWWW Image Optimizerをやめた経緯

「EWWW Image Optimizer」から「Smush」に乗り換えた経緯を説明したいと思います。

突然最適化されなくなった!

2019年10月16日までは全く問題なく最適化出来ていました。

 

ewww_image_optimize最適化不可

ところが2019年10月23日に最適化を実行した所、上図の様に『ファイルのパストラバーサルは許可されていません。』というメッセージとともに上手く処理できない状態となっていました。

 

パストラバーサルとはアクセス禁止されたディレクトリへのアクセス手法関連の事ですが、当初は原因がロリポップサーバの問題なのか、ソフトウェアの問題か分からず放置していました。(私の環境では最適化出来ないだけで、表示等に問題なかった為)

不具合の原因判明

ewww_image_optimizeディレクトリ指定

それからしばらく経って、やはり気になるので「EWWW Image Optimizer」の管理画面を見ていると、どうやらWordPress外のディレクトリにある画像ファイルは最適化出来ない仕様となっていました。

 

当サイトの画像ファイルは、WordPress内にある「uploads」ではなく、画像専用のサブドメインを指定しているので、WordPressディレクトリ外に存在します。

何となくWordPress内の奥深くに画像があるのが嫌だったのと、リンクも長くなる理由から別のディレクトリを指定していました。

 

その内「EWWW Image Optimizer」のアップデートで、再度ワードプレス外のディレクトリも最適化出来るようになるかも知れないと様子を伺っていましたが、一向に改善されない為何かしら対策を打つことにしました。

そのまま使うか違うプラグインを探すか

「EWWW Image Optimizer」は気に入っていたので、最適化出来るよう画像ファイルを全てWordPress内に変更する事も考えました。

ただこれをやると、記事内にある画像ファイル全てのリンクを変更する必要があります。

 

WordPressの設定で画像ファイルのディレクトを変更した瞬間、全てがリンク切れとなり、即座にパスを一括変換しなければなりません。

 

WordPressには便利なプラグイン「Search Regex」などで、画像パスを一括変換する事も可能ですが、検証したりする手間などを考慮すると、正直めんどくさいという結論に達しました。

 

そこで調べてみると、機能や使い勝手などがとても似ていて無料で利用できるSmush」に行き着きました。

多少出来ない事もあるのですが、「Smush」はWordPress外のディレクトリも指定可能なので、作業リスクなど考慮すると、結局プラグインの変更という事で落ち着きました。

画像圧縮プラグインSmushの概要

「Smush」のインストール方法や設定、機能、さらに「EWWW Image Optimizer」との比較を見ていきたいと思います。

SmushとEWWW Image Optimizerの比較

まずは大雑把な機能比較をしてみたいと思います。

 

【無料版SmushとEWWW Image Optimizerの簡易比較】
WPプラグインSmushEWWW Image Optimizer
一括最適化50枚まで制限なし
枚数制限なしなし
最大画像サイズ5MBまで制限なし
対応フォーマットJPEG,PNG,GIFJPEG,PNG,GIF(有料版はPDFも対応)
メタデータ削除対応対応
画像遅延対応(但しBETA版)対応(ExactDNにて設定可)
WebP対応非対応(Pro版のCDN利用で可)対応
日本語対応一部対応対応
メディアライブラリ以外の画像指定対応対応
WP外のディレクトリ指定対応非対応

こうしてみると無料版で使える機能としては「EWWW Image Optimizer」に軍配が上がるのですが、私としてはWP外のディレクトリ指定が出来ないのが大きすぎました。

Smushのインストール

他のワードプレスプラグイン導入方法と変わりませんが、一応インストール手順を載せておきます。

 

ewww_image_optimize無効化

もし私の様に「EWWW Image Optimizer」を使用していた方は事前に無効化あるいはプラグインを削除して置きましょう。

プラグイン削除は「Smush」の動作確認後の方が良いかも知れません。

Smushプラグイン追加手順1

まずはWordPressの管理画面の左メニューから「プラグイン」>「新規追加」を選択します。

 

Smushプラグイン追加手順2

「Smush – Lazy Load Images, Optimize & Compress Images」と長いプラグイン名なので、検索窓には「Smush Images」と入力すると見つけやすいと思います。

検索文字がSmushだけだと最上部に表示されませんでした。

 

Smushプラグイン追加手順3

今すぐインストール」ボタンからセットアップします。

 

Smushプラグイン追加手順4

インストールが完了したら「有効化」ボタンを押して完了です。

Smushの初期設定

特にデフォルトでも問題ありませんが、日本語に完全対応していない点がネックなので、設定項目もザックリ見てみましょう。

 

Smushの設定1

インストールが正常に完了すると、管理画面左メニューに「Smush」の項目が追加されているので「ダッシュボード」を選択します。

 

Smushの設定2

初回起動時は上図の様に設定簡易ウィザードが起動しますが、今回は「Skip this I’ll set it up later」を選んで、ここでは設定しない事にします。

先に言ってしまうとここで設定しなくともほぼデフォルトで問題ない場合が多いです。

 

Smushの設定3

それでは各メニューを見ていきましょう。

Bulk Smushメニュー

メインのメニューとなります。

Smushの設定4

最上部は現在の圧縮状況を表しています。

インストール直後なので、上図のような状態だと思います。

 

Smushの設定5

少し下にスクロールすると「Bulk Smush Now」というボタンがありますが、ここから手動で一括画像圧縮を開始することが出来ます。(1回の処理で最大50枚まで回数制限なし)

今は設定を確認する為、終わってから圧縮開始しましょう。

 

Smushの設定6

さらに下にスクロールすると設定項目があります。

メニューにも別に設定とありますが、どちらかというとこちらがメインの設定です。

まずは一番上の項目から順番に見てみましょう。

 

Smushの設定7

画像サイズ項目は、全ての画像に対して圧縮を行うか、特定のサイズに対して圧縮を行うかの設定です。

カスタムボタン」を押すと上図のように、圧縮したい各種サイズ(WordPressの設定やテーマなどにより項目は変わると思います)を選択する事が可能です。

基本的にはデフォルト通りすべての画像(元の画像は対象外)に対して圧縮する設定で問題ないと思います。

 

Smushの設定8

自動圧縮項目は画像アップロード時に、自動的に圧縮する設定です。

「Automatically compress my images on upload」をアクティブにする事で、自動圧縮となります。

デフォルト通りアクティブ推奨です。

 

Smushの設定9

メタデータ項目は画像圧縮時にExifなどのメタ情報を自動で削除する設定です。

「Strip my image metadata」をアクティブにする事で自動削除してくれます。

こちらも特に理由がなければアクティブ推奨です。

 

Smushの設定10

Image Resizing項目は、サイズの大きい画像をアップロードした際に、指定したサイズへ自動的にリサイズする設定です。

「Resize my full size images」をアクティブにする事で、自動でリサイズ可能です。下の項目で画像の最大幅・最大高さを設定します。

デフォルトですとアクティブになっていますが、私の場合は画像をアップロードする前にリサイズしているので、オフにしています。(デフォルトはオン)

 

Smush設定更新ボタン

項目の確認変更が終わったら右最下部の「設定を更新」ボタンを押します。

Directory Smushメニュー

Smushの設定11

こちらのメニューでは、WordPressがメディアに指定しているディレクトリ以外の画像ファイルを圧縮したい場合に、手動で設定する場合に使用します。

 

私の場合の様にWordPress外のディレクトリを指定している場合は、WordPressデフォルトのアップロードディレクトリ内は圧縮されないのこちらの項目で圧縮を行います。

使い方については後述する「個別ディレクトリの画像圧縮」で解説したいと思います。

Integrationsメニュー

Smushの設定12

執筆時点で無料版において設定可能なのは「Gutenberg Support」項目のみでした。

「Show Smush stats in Gutenberg blocks 」をアクティブにする事で、WordPressのエディタであるグーテンベルクブロックに統計データとSmushボタンが追加されます。

私は基本的にエディタは以前のクラシックを使用していますし、煩わしいのでデフォルト通りオフのままにしています。

 

Smushの設定13

「WPBakery Page Builder」というのは、コーディングの知識がなくとも直感的操作でWordPressのページをレイアウトできるプラグインです。

こちらで編集された画像の圧縮を行う事が出来るようになるという機能らしいです。

 

Smushの設定14

「Amazon S3」や「NextGen Gallery」の設定項目はPro版(有料)での機能となります。

Lazy Loadメニュー

Smushの設定15

画面のスクロールに応じて、画像の読み込みを遅延させる機能である「Lazy Load」を有効化する設定となります。

私が使用しているテーマの「Cocoon」で「Lazy Load」の設定をオンにしているので、こちらは有効化していません。

 

対象画像フォーマットや遅延するロケーション、表示する際の効果(アニメーション)などを細かい設定をする事が可能となっています。

ただしまだBETA版のようですし、有効化は様子見した方が良いかも知れません。

CDNメニュー

Smushの設定16

こちらは完全にPro版(有料)の機能となります。

次世代フォーマットである「WebP」変換に対応したCDNを利用出来るようになるようです。

ツールメニュー

Smushの設定17

無料版では「Image Resize Detection」項目のみ設定可能です。

不適切なサイズの画像がある場合には、画像が強調表示される機能となります。

先程もお話ししましたが、アップロード前に加工・リサイズを行うので、デフォルト通り私はオフにしています。

設定メニュー

Smushの設定18

「翻訳項目」はWordPressのセッティングに準じているので、こちらで言語を選択したりは出来ないようになっています。

ただ全てが日本語にはなっていない為、今後のバージョンアップで完全日本語対応になって欲しい所です。

 

Smushの設定19

「Color Accessibility項目」はWCAG(Web Content Accessibility Guidelines)のAAA基準を満たすために、要素とコンポーネントの可視性とアクセシビリティの向上設定との事。

よく分からないので取り敢えず私はオフにしています。

 

Smushの設定20

使用状況の追跡項目は、利用状況をプラグイン提供元に匿名で送信するか否かの設定です。

開発に協力したいと思うならオンにした方が良いでしょう。私はオフにしてます(すみません)。

 

Smushの設定21

「データ項目」で操作できるのは、プラグインをアンインストール際にセッティングを残すか、セッティングをデフォルトに戻すかどうかの2つです。

 

アンインストールの部分の「Keep」をアクティブにしておけば、セッティング情報を保持したままアンインストールする事が可能です。

Reset Factory Settingsにある「設定をリセット」ボタンを押すと、デフォルト設定に戻されます。

 

Smushの設定22

「API ステータス」はプロ版にアップグレードし問題が発生した場合、APIステータスを更新させる機能です。一応無料版でもボタンを押す事は可能ですが、意味がないものと思われます。

Tutorialsメニュー

Smushの設定23

初期ではメインページにも表示されているSmushの使い方や設定が分かる(すべて英語)チュートリアルページです。

メインページのチュートリアルは煩わしいので、×ボタンで非表示にしました。

Smushで画像を最適化

初期設定が終わったので、早速画像を最適化してみたいと思います。

 

Smushの設定5

最適化されていない画像がある場合には、上図の様にメインページ(Bulk Smushメニュー)に「BULK SMUSH NOW」のボタンが表示されていると思います。

使い方は簡単で、手動で一括圧縮する場合はこちらのボタンで行います。

 

メディアライブラリSmushボタン

画像1枚1枚最適化する場合は、メディアライブラリのページから可能です。

 

Smush一括画像最適化手順1

こちらはボタンを押して圧縮開始された画面になります。

 

Smush一括画像最適化手順2

1回の処理で50枚までしか圧縮出来ませんが「再有効化」ボタンを押す事で、回数制限なく圧縮する事が可能です。

 

Smush一括画像最適化手順3

私の場合対象画像が1,075枚もあったので、かなり大変でした。

 

Smush一括画像最適化手順4

対象画像を全て圧縮完了すると「BULK SMUSH NOW」ボタンは消えてしまします。

 

ViewStats確認画面

メディアライブラリでSmushの項目にある「View Stats」を押してみると、各種リサイズされた画像の圧縮状況を確認する事が出来ます。

個別ディレクトリの画像圧縮

次にWordPressでメディア設定されたディレクトリ以外の画像を圧縮したい場合は「Directory Smush」メニューから行います。

Smush個別ディレクトリ画像最適化1

まずは「ディレクトリを選択」ボタンを押します。

 

Smush個別ディレクトリ画像最適化2

ポップアップウィンドウが開くので「Choose Directory」にてWordPress内のフォルダを指定します。

私の環境では「wp-content」フォルダ内しか選択出来ませんでした。

 

Smush個別ディレクトリ画像最適化3

取り敢えず私は「themes」フォルダと「uploads」フォルダを指定しました。

CHOOSE DIRECTORY」ボタンを押すと選択フォルダの圧縮が開始されます。

 

Smush個別ディレクトリ画像最適化4

処理が開始されると上図のようなウィンドウがポップアップされます。

画面外をクリックしたりすると閉じてしまうので、黙って待ちましょう。

 

Smush個別ディレクトリ画像最適化5

圧縮が完了すると上図のようなメッセージが表示されます。

因みにこの個別ディレクトリの圧縮は、毎回手動で行う必要がありそうです。

指定したフォルダは常に自動圧縮有効となっていれば良いですが、この辺りは改善して欲しい所ではあります。

まとめ

「EWWW Image Optimizer」とあまり使い勝手が変わらずさらに使い易いので、しばらくこのSmushを使って行こうと考えています。

無料版だとフルサイズ画像の圧縮や一括復元が出来ない、日本語に完全対応していない、一度に50枚しか圧縮されないなど、不満点もありますが、無料なのでしょうがないと妥協しています。

 

圧縮率の点など劇的にSEOに影響あるとは思いませんが、サイトを少しでも軽量化する為に画像圧縮は必須と考えています。

もし私の様にWordPress外のディレクトリをメディア指定している方や簡単操作の画像圧縮プラグインを探している場合など、一度「Smush」を試してみては如何でしょうか。

 

WordPressの初期設定などは記事はちょっと古いですが、下記を参照にしてみて下さい。

WordPressをインストールしたら、まずやっておくべき事 Part1【初期設定編】
ワードプレスをインストールし初めて管理画面にログインしたら、どうしてもやっておかないといけない設定があります。必要最低限な設定ですが、毎回確認するのもあれなので一度まとめておこうと記事にしてみました。