ブログを継続しているとユーザービリティのために、わかりやすく解説するような画像の枚数が増えていきます。画像の枚数が増えていくと、ネットワーク ペイロードのサイズが増加してしまい、速度インデックスの低下を招きます。
ユーザビリティのために画像を増やしたはずが、サイトの表示速度の低下により、ユーザビリティが逆に下がってしまい、離脱率が増加してしまうことになります。
そこで使用する画像の枚数はそのままに、画像のサイズを圧縮する「EWWW Image Optimizer」がおすすめです。
CONTENTS
Compress JPEG & PNG imagesとの比較
| EWWW Image Optimizer | Compress JPEG & PNG images | ||
|---|---|---|---|
| 機能 | 圧縮方式 | ロスレス・非可逆圧縮(JPEG) ロスレス・非可逆圧縮(PNG) | ロスレス・非可逆圧縮(JPEG) ロスレス・非可逆圧縮(PNG) |
| 圧縮場所 | 自サーバ | 外部サーバ | |
| WebP変換 | 対応 | 非対応 | |
| 無料プラン | 制限方法 | 圧縮率の制限 | 圧縮枚数の制限 |
| 圧縮率 | 20% | 40～80% | |
| 枚数制限 | 制限なし | 500枚 | |
| 有料プラン | 圧縮率 | 40～80% | 40～80% |
| コスト | $0.003/枚 | $0.009/枚(無料含め10,000枚まで) $0.002/枚(10,000枚を超えた分) | |
「EWWW Image Optimizer」とTinyPNGが提供する「Compress JPEG & PNG images」がよく比較に出されますが、普通に月20記事程度投稿されるような方の場合は「EWWW Image Optimizer」１択になるかと思います。
なぜなら「Compress JPEG & PNG images」は枚数で圧縮可能な枚数が制限されているため、月20記事×10画像/記事×4サイズ(ｻﾑﾈ、中、大、フル)で800枚となり、オーバーしてしまいます。
リサイズの画像枚数も圧縮枚数にカウントされるため、注意が必要です。圧縮枚数が少ない方は「Compress JPEG & PNG images」の方が無料の場合は圧縮率が高いのでおすすめです。
「EWWW Image Optimizer」のメリットとしては750枚以上使用する場合はコスト的に単価が安価なことと、WebPに対応しており、速度インデックス的に優位な点がポイントかと思います。
EWWW Image Optimizerのインストールと設定方法
ではさっそくEWWW Image Optimizerのインストールと設定方法について説明していきます。
導入前には「BackWPup」等でバックアップを取って不具合が発生した場合に戻せるようにして作業を行うことをおすすめします。（未だそのような事態に陥ったことはないが、おまじないみたいなものです。）
- 「プラグイン」→「新規追加」から「EWWW Image Optimizer」を検索し、「今すぐインストール」をクリックします。さらに「有効化」も行います。
- 左の管理パネルの「設定」から「EWWW Image Optimizer」をクリックし、設定画面を開く。
- 無料版の場合は「ベーシック」のタブにて「メタデータの削除」をOnにしてその他は元々の設定通り「ピクセルパーフェクト」と「無圧縮」とする。そして変更を保存する。
メタデータの削除とピクセルパーフェクトの設定だけでも20%程度の圧縮削減が可能となります。
- 有料版の場合は「ベーシック」のタブにて「メタデータの削除」をOnにしてその他は「プレミアム」と「ピクセルパーフェクト」とする。また必要があれば、元画像に戻せるように画像をバックアップするようにさせる。そして変更を保存する。
- 「リサイズ」のタブにて「画像のリサイズ」で幅と高さの上限をアイキャッチの上限に設定しましょう。
- 「変換」のタブにて「コンバージョンリンクの非表示」をOnにします。この設定をしないと、管理者以外のユーザーにも画像を「png->jpg」や「jpg->png」に変換するためのリンクが表示されてしまいます。
画像フォーマットの変換は画質の劣化を伴う事もあるので、基本的に変換できない状態にします。
- 「WebP」のタブにて「JPG,PNGからWebP」をOnにします。そして変更を保存します。
- 設定をすると「WebP」タブのページ下部に.htaccessファイルに追記するためのコードが自動生成されます。
- 「リライトルールを挿入する」をクリックすると右下の赤い「PNG」表示が緑の「WebP」表示に切り替わります。
※WebPとは
WebPの開発は、Googleが行なっています。 まずは、WikiPediaをみてみましょう。 ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。
引用：ideaman’s blog
EWWW Image Optimizerのインストールと設定は以上となります。
EWWW Image Optimizerの簡単な使用方法
続いて画像の圧縮方法について説明します。方法としては大きく３つあります。
- 画像のアップロード
- 一括最適化
- 個別再最適化
画像のアップロード
画像のアップロードは「メディア」→「新規追加」でも、投稿画面からの「画像アップロード」でもどちらでも画像の圧縮はされます。
普通に使用して貰えば、EWWW Image Optimizerでの圧縮とWebPの画像変換がされるようになります。
一括最適化
一括最適化は「メディア」→「一括最適化」から「最適化されていない画像をスキャンする」ですべての画像の最適化を行うことが可能です。
通常は最適化済みの画像は最適化されませんが、オプションで「再最適化を強制」したり、WebPの変換のみを行うことが可能です。
個別最適化
個別最適化は「ライブラリ」→「再最適化」にて1枚ずつ最適化を行うことが可能です。非常に重たい画像のみ圧縮設定を変える場合や有料プランで古い画像を一部だけ最適化したい場合に行ったりします。
まとめ
以上でEWWW Image Optimizerのインストール～使い方までの説明は終わりです。ユーザビリティ向上のためには画像のサイズを圧縮することは重要なため、40～80%程度圧縮可能なEWWW Image Optimizerは非常におすすめな選択肢かと思います。
ただサーバの負荷が普段からかかっている方や対象の画像が500枚以下の方はCompress JPEG & PNG imagesの方が選択しとして、優位かもしれませんのでそちらを試してみてもいいかもしれません。
ブログ高速化に関するまとめ記事を作成しましたので、他の高速化方法については以下を参照してしてください。
初めまして、EWWW Image OptimizerのWebP設定が完了しましたが、ログアウトするとWebPにならなくなります。ログインしていないときはランダムにWebPになっています。殆どWebPにならないため悩んでいます。
このような時はどうすればよいでしょうか？
ネットで探しても放置する方にしか出会わず解決方法がわからない状況です。可能であればご相談したいのですが大丈夫でしょうか。いきなりで恐縮な話となりますがよろしくお願い致します。
ewwwの初期設定、webpのための.htaccessは完了済みという認識で回答します。
webpにならない場合は以下のいくつかの可能性があります
①webpのランプが緑にならない、画像が記事によってwebpにならない場合は以下の問題が考えられます。
ブラウザで表示した際に記事毎にwebpやpng,jpgになってる場合はブラウザキャッシュの影響で昔キャッシュされたpng,jpgが表示されている可能性があります。
Chromeの場合は「メニューボタン＞その他のツール＞閲覧履歴の消去＞キャッシュされた画像とファイル」からキャッシュデータを削除することができます。他のブラウザの場合は該当ブラウザとキャッシュ削除方法等で検索して削除してみてください。
またIEやiphoneのsafariはwebpに対応していないので、注意してください。
②画像によりwebpになっていない。
プラグインを入れる前の古い画像はwebpに変換されていません。メディアの一括最適化や個別でwebpに変換する必要があります。
またwebpに変換しても容量が下がらない場合は変換されません。その場合はそのままで良いかと思います。
他の理由も考えられるので、解決しないようでしたら、ここか問い合わせフォームからでももう少し状況を教えていただければと思います。
UMILCLさん
お世話になっております。本村です。
①ではありません。ブラウザーはクロームになります。またキャッシュは何度も消して確認しています。webpのランプは緑でエックスサーバーの「.htaccess」に書き込み済みです。多くのサイトで書かれていることを実行しています。
また②の古い画像は全てwebp化できています。一括最適化で2時間くらいPCを稼働させました。よって設定はできていると思います。
少し内容をまとめてお問い合わせからご連絡させて頂きます。長くなりそうなのでフリーアドレスにカラメールを頂けると助かります。お問い合わせの文字数が関係なければそのまま書き込みます。
お返事などで費用が発生するようであれば頑張らせて頂きます。1ヶ月近く悩んでます。ウェブサイト非公開でお願いします。。。
それと管理画面にログインした時だけ全てwebpになるので意味がわかりません。chromeとfirefoxどちらでログインしても同じです。
①chromeでログインしてfirefoxで確認するとwebpにならない。逆でも同じ
②chromeでログインしてchromeで確認するとwebpになっています。
EWWW Image Optimizerを停止して再稼働させても同じです。すみません。早めにわかったほうが良いかと思い書き込みました。