11月6日(木)まで圧倒的にお得!〈ConoHa〉5,000円割引クーポン

『10秒で完了』SWELLの画像圧縮を自動化!EWWW Image OptimizerでWebP化

一部プロモーションを含みます
ewww-image-optimizer
  • URLをコピーしました!

あなたは今、こんな悩みを抱えていませんか?

  • 画像を1枚ずつリサイズ・圧縮するのが面倒
  • 画像処理に時間がかかり、記事執筆が進まない
  • サイトを速くするためWebP化したいが、やり方が不明
  • 過去にアップした大量の画像を最適化できずにいる

もし一つでも当てはまるなら、この記事がきっと役立ちます。

SWELL対応プラグイン「EWWW Image Optimizer」の導入手順と設定を解説します。インストールすれば、画像の圧縮からWebP化まで自動で処理できます。

この記事を読めば、画像最適化の作業時間がなくなります。既存の画像も一括でWebP化でき、サイト全体の表示速度が向上します。

この記事を書いている人(開く)
プロフィール
やたろう
やたろう
  • ConoHaWING歴5年
  • SWELL歴4年
  • SEO検定一級合格
  • 月収6ケタ(プラチナランク)
  • 某ASPの社員
A8:プラチナ会員
A8:プラチナ会員
Analytics合格証書
Google アナリティクス個人認定資格(GAIQ)
動画広告合格証
Google動画広告認定スペシャリスト
GDN合格証書
Googleディスプレイ広告認定スペシャリスト
Google検索広告認定スペシャリスト
Google検索広告認定スペシャリスト
Criteo認定資格
Criteo認定資格
SEO検定1級
SEO検定1級
facebook‐blueprint合格証
Facebook広告‐blueprint合格
記事でわかること(もくじ)

EWWW Image Optimizerとは? SWELLの画像圧縮とWebP化を自動化する神プラグイン

EWWW Image Optimizerとは?
EWWW Image Optimizer

EWWW Image Optimizer「以下EIO」は、画像最適化プラグインです。

WordPressに画像をアップロードすると、自動でリサイズと圧縮を行います。

やたろう

新しくアップロードする画像だけでなく、既にアップロード済みの画像も圧縮します。

EIOには、無料版と有料版(Cloud)の2種類があります。

無料版では「1回の圧縮で500枚以内、圧縮率は20%」という制限がありますが、有料版には制限がありません。

ココがポイント

個人ブログであれば、無料版で十分です。

有料版は、大企業やプロのブロガー向けのプランです。

EWWW Image Optimizerを導入するメリット
  • 劣化なく画像を圧縮できる
  • いちいちフォトショでリサイズしなくて良い
  • サーバーへの負担が少なくなる
  • Webp形式に対応しているのでサイトが軽くなる
  • ドメインパワーが上がりやすい
  • 画像のメタ情報も削除できる

通常、画像を圧縮するには「compressjpeg」や「iloveimg」などの外部ツールを使用しますが、アップロードして圧縮するのは手間がかかります。

例えば、「compressjpeg」や「iloveimg」で画像1枚を圧縮するのに30秒かかるとすると、100枚の画像を圧縮するのに50分かかります。

つまり、EIOを使用することで、約1時間の作業時間を節約できます。

SWELLユーザー必見!EWWW Image Optimizerの初期設定とWebP化(自動圧縮)完全ガイド

ここからは、EIOのインストール手順と初期設定について、画像で解説いたします。

STEP
EWWW Image Optimizerをインストール
EWWW Image Optimizerをインストール
EWWW Image Optimizerをインストール

まず、ワードプレスからプラグインをインストールします。

  1. 画像「プラグイン」をクリック
  2. 画像、キーワードから「EWWW Image Optimizer」を検索
  3. インストール完了したら有効化する
設定画面を開く
設定画面を開く

「EWWW Image Optimizer」のプラグインを有効化したら、初期設定をします。

ワードプレス管理画面の左ナビから、以下進めます。

  1. ツール「設定」をクリック
  2. 「EWWW Image Optimizer」をクリック
STEP
設定

次は、詳細設定です。

簡単モードに移行
簡単モードに移行

「EWWW Image Optimizer」設定画面トップへ。画像①の「Enable Ludicrous Mode」(簡単モード)をクリックすると、詳細設定画面に遷移します。

詳細設定
詳細設定
  1. 「基本」タブをクリック
  2. メタデータ削除にチェック
  3. 画像のリサイズ
  4. Webp変換にチェック

メタデータ削除

②のメタデータとは、画像情報です。

スマホなどで撮影した写真をブログにアップする際、Exifデータ(撮影情報や位置情報などのデータ)が記載されているケースがあります。

Exifデータ
Exifデータ

情報漏えいを防ぐため、メタデータは削除がおすすめです。

画像のリサイズ

③「画像のリサイズ」で、リサイズサイズを指定できます。

1,200ピクセル以上を推奨します。

※「500PX」のように、リサイズ設定が小さいと、SearchConsole(サーチコンソール)から警告がきます

WebP(ウェッピー)変換にチェック

WebP自動変換
WebP(ウェッピー)拡張子

WebP(ウェッピー)変換にチェックします。

WebPとは、Googleが開発した画像フォーマット。画質を劣化させず軽量化できるメリットがあります。

画像形式WebPJPEGPNGGIF
圧縮方式非可逆圧縮非可逆圧縮可逆圧縮可逆圧縮
透過
アニメーション
WebP(ウェッピー)特徴表
やたろう

画像をWebP(ウェッピー)にするだけで、サイト表示速度が上がり、SEOが有利になるメリットがあります。

「WeaPの配信方法」のコードを全コピー

サイトにWebPを導入する手順を解説します。

  • 「WebP変換」にチェック
  • コードをコピー
コピーしたコードをサーバーの「 .htaccess」に貼り付ける

コノハウィングにログインして、コピーしたコードをコノハウィングの「 .htaccess」に貼り付けます。

  • サイト管理
  • 対応設定
  • .htaccess設定
コピーしたコードを貼り付ける
  • 「えんぴつマーク」をチェック
  • コピーしたコードを最上部にペースト
  • 保存

保存できたら、WordPressに戻ります。コノハウィングはログアウトしてOK。

表示が「WEBP」に変わる

「EWWW Image Optimizer設定画面」に戻ったら、①保存→「F5」でページ更新します。

表示が「WEBP」に変わってれば正しく設定されています。

表示が緑色「WEBP」に変れば「コノハウィング .htaccess」が正しく設定されている証拠。

メディア→一括最適化

WordPress管理画面の①メディア→②一括最適化をクリック。

最適化されてない画像をスキャンする

「最適化されてない画像をスキャンする」をクリック。

JPGやPNGが「WEBP」に変換されました

JPGやPNGが「WEBP」に変換されました。

アップロード済みの画像も「WEBP」に自動変換されます。

STEP
その他設定
赤枠はデフォルトでOK
赤枠はデフォルトでOK

上記画像の赤枠は、デフォルトのままで大丈夫です。

EWWW Image Optimizerの効果は?新規・既存画像の「画像圧縮」ビフォーアフターを検証

実際に画像最適化してみる
最適化

「EWWW Image Optimizer」の設定が終わったら、実際に画像の最適化をしてみましょう。

「EWWW Image Optimizer」の使い方は2通りあります。

  1. これからアップする画像を圧縮、最適化
  2. アップ済みの画像を圧縮、最適化

順番に解説します。

これからアップする画像を圧縮、最適化

無料素材のサイズが大きい画像の詳細
無料素材のサイズが大きい画像詳細

「EWWW Image Optimizer」を使うことで「どれだけ最適化されるか?」検証します。画像は 「4000ピクセル×2667ピクセル」の大きい画像で検証します。

ワードプレスにアップロード
ワードプレスにアップロード

ワードプレスに「4000ピクセル×2667ピクセルの画像」をアップロードします。

画像の自動最適化
画像の自動最適化

ワードプレス管理画面の「メディア」から、アップロードした画像を確認。

すると、以下に自動調整されてました。

  • ファイルサイズ:3.67MB→87KBに削減
  • サイズ(画像):4000ピクセル×2667ピクセル→900ピクセル×600ピクセルにリサイズ

圧縮だけでなく「EWWW Image Optimizer」で設定したサイズにリサイズされてました。

「EWWW Image Optimizer」は、外部ツール不要で圧縮リサイズできます。時間が節約となるので、サラリーマンにはありがたい無料プラグインです。

アップ済みの画像を圧縮、最適化

EWWW Image Optimizerは、過去にワードプレスにアップした画像も、ワンクリックで最適化できます。

最適化の手順1
画像をスキャンする
  1. 「メディア」をクリック
  2. 「一括最適化」をクリック
  3. 「最適化されていない画像をスキャンする」をクリック
155点の画像を最適化
155点の画像を最適化

過去、圧縮していない画像「155点」が自動抽出されます。

自動で最適化中
自動で最適化中

「最適化ボタン」をクリックすると、画像の最適化が始まります。

完了と最適化ログ
完了と最適化ログ

画像最適化は、1分ほどで完了しました。

WebP(ウェッピー)設定をした場合、WebPに変換されます。

一括最適化完了
一括最適化完了
やたろう

ワンクリックで「画像サイズ1.7%(49 B)減少」できました。

「EWWW Image Optimizer」で時間の節約【まとめ】

「EWWW Image Optimizer」で時間の節約【まとめ】

まとめです。

「EWWW Image Optimizer」は、画像を自動で圧縮するプラグインです。

無料で利用できます。

  • ブログに使える時間が増える
  • サイト表示速度が速くなる
  • SEOで上位表示されやすくなる

10枚リサイズすると30分はかかります。「EWWW Image Optimizer」を導入すれば1分で終わります。

とっても効率的だと思いませんか?

よかったらシェアしてね!
  • URLをコピーしました!
記事でわかること(もくじ)