ディスクロージャーポリシーをお読みください。
Please Read my Disclosure Policy.
WordPress のプラグイン EWWW Image Optimizerの画像最適化機能（圧縮やWebPへの変換）を使用することでページの表示速度を改善することができます。
困ったことに、わかりやすいコンテンツになるように挿入された複数の図解や画像は時としてウェブサイトが遅くなる主な要因となることです。
今回めざしているのは「画像（やさしいコンテンツ）」と「訪問者の快適（表示スピード）」を両立させることができれば言うことなしです！
期待していた結果が出たので記事にしてみました！
こんな相談ならこのページで解決するよ！
HOW TO 記事を書いていたらあっという間に巻物かしらってくらいの記事になっちゃって、、、画像が入っていたりすると表示速度が遅くなっちゃうのよね～！
ままちゃん、画像の最適化は必須ですにゃり！
「アッ」それと・・・めんどうですが、
カスタマイズする前には必ずバックアップを取った上でおこないましょう！
プラグインを有効化する前に必ずお読みください！
WordPress バックアップを取る簡単な方法（プラグイン不要）
[超簡単!] 初心者必見WordPress (+ データ)のバックアップと復元の方法＊プラグイン不要です！
前置きはこのくらいにして、それでは早速いきましょう～！
EWWW Image Optimizer（画像圧縮 / 最適化）とは？
- 「EWWW Image Optimizer」とはなんですか？
- EWWWImage Optimizerを使用すると、画像を最適化（小さく）しサイトを高速化することができます。
画像が小さくなることでサイト表示速度の改善が期待できます。サイト表示速度が改善できましたら今度は、ページ表示速度が改善されているかも確認してみましょう。
「EWWW Image Optimizer」で画像の最適化をしたらページの読み込みがはやくなりました！
EWWW Image Optimizer を使うと？
最適化で タテXヨコ 比率がかわりますか？
- EWWW Image Optimizer の最適化で画像のタテ、ヨコ比率がかわると困ります！
- EWWW Image Optimizer で画像を最適化（圧縮）したら、画像の「タテ x ヨコ」サイズは変わりませんが「画像のファイルサイズ（重さ）」が軽くなります。「画像のファイルサイズ（重さ）」が軽くなるとページの表示速度が早くなります。
通常：EWWW Image Optimizer で画像を最適化
＊ただし「基本タブ」で設定した「 画像サイズが1000ピクセル」で、アップロードした画像のサイズが 2000ピクセル だった場合には 画像画像の「タテ x ヨコ」サイズサイズが1000ピクセル に縮小されます。
＊「画像サイズが1000ピクセル」以下の画像をアップロードした場合は画像の「タテ x ヨコ」サイズはかわりません。
既にアップロード済みの画像について
- 既にアップロード済みの画像を最適化はできますか？
- はい、できます！「一括最適化」もしくは「手動で最適化」で最適化できます！
※個人的におすすめなのは、「手動で最適化」です。
※「一括最適化」をした後に画像が表示されなくなった経験があります。（私だけかもしれませんが）
WebP に変換できますか？
WebP Support
引用元：Google developers WebP Support
WebP is natively supported in Google Chrome, Firefox, Edge, the Opera browser, and by many other tools and software libraries.
WebPは、Google Chrome、Firefox、Edge、Operaブラウザ、およびその他の多くのツールやソフトウェアライブラリでネイティブにサポートされています。
▼下記のサイトでも最新情報を確認できます。
WebP に変換されているかを確認したい！
- WebP で表示されているのかを調べる方法を教えてください。
- 「Google Chrome」の場合は「デベロッパーツール」の「Network」「img」で確認します。
「 Firefox 」の場合はページ上で右クリック「調査」「ネットワーク」「画像」で確認できます。
詳しくは下記の画像つき手順をご覧ください。
WebP で表示されているのかを調べる方法
WebP が反映されているのか調べる方法 3つをご紹介します
「Google Chrome」で WebP に変換されているか？調べる方法
１. 図１参照：左上の角「① 三」⇒「② その他のツール」⇒「③ デベロッパーツール」と選択。
２. 図２参照： 表示された画面のいちばん上の「④ Network」⇒ 2段目の「⑤ img」を選択。
３. ３段目の「⑥ Type」のところに「webp」と表示されていたら適応されています。
「Firefox」で WebP に変換されているか調べる方法
１. ページ上で右クリック「調査」⇒「ネットワーク」⇒「画像」と選択。
２. 「タイプ」 のところに「webp」と表示されていたら適応されています。
「基本タブ」で WebP に変換されているか調べる方法
「EWWW Image Optimizer」の設定から「基本タブ」で「WebP ルールが正常に検証されました」と表示。
右端に「WebP」の緑のカードが表示されていれば反映しています。
EWWW Image Optimizer のインストール方法
プラグインを「新規追加」「有効化」する前には必ず「バックアップ」をとりましょう。
プラグインを有効化する前に必ずお読みください！
WordPress バックアップを取る簡単な方法（プラグイン不要）
「 EWWW Image Optimizer バージョン: 6.1.9 」での操作画面になります。
１．新規追加でプラグインを検索
「WordPress」にログインし「プラグイン」から「新規追加」を選択。
キーワードに「EWWW Image Optimizer」と入れて検索しましょう。
同じアイコンの「プラグイン」が表示されますので必ず「EWWW Image Optimizer」と確認し「今すぐインストール」を選択します
２．有効なサービスを選択
「有効化」の文字をクリックします。
「設定」の文字をクリックします。
３．「EWWW Image Optimizer」の初期設定をおこないましょう
- 「サイトを最適化」
- 「今は無料モードを選択する」にチェックをし「次」へ
- 「メタデータを削除」スマホやデジカメで撮影すると望んでいなくても自動的に「画像の位置情報」「撮影機材の詳細」などの情報が画像に保存されている場合がありますので、「メタデータを削除」を選択し個人情報を守りましょう。
iPhone (iOS 14.7.1 ) : 撮影時に位置情報を削除するには「設定」>「プライバシー」>「位置情報サービス」>「カメラ」⇒「なし」を選択すれば「写真や動画が撮影された場所をタグ付け」無しになります。 「なし」の設定にしていても「メタデータを削除」を選択しました。
参考サイト：iOS／iPadOS のプライバシーと位置情報サービスについて - 「WebP 変換」を選択しました。（ お好みで選択してください ）
- 「幅の上限」を「1000」と入力し「設定を保存」しました。
＊画像を「横幅」のみ制限したい場合は、「高さ」の上限を「０」に設定できます。
＊「2000ピクセルの画像」をアップロードした場合、自動的に「1000ピクセルに縮小される」ことになります。
- 「完了」ボタンを押します。
４．「EWWW Image Optimizer」でEnable Ludicrous Mode の文字を選択
- WebP の設定を行うために「プラグイン」から「設定」を選択します。
- 「基本タブ」で「Enable Ludicrous Mode 」の文字を選択すると、多くの設定タブが表示されます。
５．「EWWW Image Optimizer」基本タブの設定を確認
- 「WebP」への変換を有効にするには「WebP変換」に「 V（チェック）」を入れます。
- 「基本タブ」に表示される「書き換えルール」をコピーして「.htaccess」ファイルに書き加える必要があります。
- 左下に「リライトルールを挿入する」というボタンがありますが、うまくいかなかったので手動で「書き換えルール」をコピーして「.htaccess」へ追加しました。
「 EWWW Image Optimizer バージョン: 6.1.9 」の WebP ルールです。
重要「メタデータの削除」アップロードする写真の位置情報やカメラの設定や機種を特定できる情報を削除する設定です。
「画像のリサイズ」はご利用の WordPress テーマに合わせて調節しましょう。（横幅のみ1000 pixels に設定しました）
次世代フォーマット「WebP 変換」の設定が成功すれば緑色の「WEBP」カードが表示されます。
６．「EWWW Image Optimizer」リサイズタブの設定を確認
「既存の画像をリサイズ」「他の画像をリサイズ」を選択して「変更」を保存しました。
「EWWW Image Optimizer」 の設定が完了しました！
次は「WebP」変換を選択した方へ「WetP ルール」を「.htaccess」 ファイル へ追加する方法です。
「WebP ルール」をコピーして「.htaccess」に書き加える方法
「.htaccess」ファイル の編集について
当サイトが利用しているレンタルサーバー mixhost さんで 「.htaccess」ファイルを編集する手順です！
- 「cPanel」という「コントロールパネル（管理画面）」を採用しているレンタルサーバーさんなら基本的に同じ操作になります。
✅「設定したにもかかわらず」反映されていない場合に行う操作です。
✅「キャッシュの削除」作業を行ってから確認してくださいね！
① 本当に「WebP」反映されているか確認してみる
サーバーに保存されているファイルの編集がはじめての場合は無理せずに、日を改めてトライしてみてください。
ままちゃんは、1日目にできなくても3週間後にできたりすることを経験済みにゃり！
本当に反映されていないですか？ 「.htaccess」へ「WebP ルール」を書き加える前に！
まずは、「WebPへ変換が有効になっているか？」確認しててみましょう。
↓ ↓ ↓ 反映されていなかったら 「.htaccess 」の編集操作をためす！
②「.htaccess」へ「WebP ルール」を 書き加える方法 （ミックスホストの ｃPanel から）
「基本タブ」に表示される「書き換えルール」をメモ帳にコピーし準備しておきましょう。
cPanel にログインします。
cPanel にログインし「ファイルマネージャ」を選択します。
「ファイルマネージャー右上角の設定」を選択「非表示ファイルの表示」を選択し「SAVE」します。
＊ 「.htaccess」ファイル は初期の状態で 非表示ファイル（隠しファイル）になっています。
「public_html」を選択しましょう。
自分の「ドメイン名 ( 例： thechubbyprince.com )」 のフォルダを見つけて選択しましょう。
自分の「ドメイン名 ( 例： thechubbyprince.com )」をダブルクリックした中に表示された 「.htaccess」ファイル を見つけます。
なぜ？ダウンロードするかって？
もし編集後に、サイトが真っ白になったり正しく表示されなくなった場合に
元に戻せるように「編集前のファイルを保存（バックアップ）」するためにゃり！
編集する前に「バックアップ」の意味で「デスクトップ」や「マイドキュメント」へダウンロードしておきましょう。 ファイルをダブルクリックでもダウンロードが始まります。
「.htaccess」 ファイルの上で「右クリック」し「コンテキストメニュー（ずらりと並んだメニュー）」から 「Download」を選択。
編集するには「Edit」を選択しましょう。
「.htaccess」 ファイルの上で「右クリック」し「コンテキストメニュー」から「Edit」を選択。
開いた「.htaccess」ファイルの「1番上」の行に入りつけます。
「 EWWW Image Optimizer バージョン: 6.1.9 」の WebPルールになりますので、あなたが追加した時点の「書き換えルール」を利用してください。
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$ RewriteCond %{REQUEST_FILENAME}\.webp -f RewriteCond %{QUERY_STRING} !type=original RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c> <FilesMatch "\.(jpe?g|png|gif)$"> Header append Vary Accept </FilesMatch>
</IfModule>
AddType image/webp .webp＊当サイトの場合、既に「他のルール」を張り付けてあったので、「２番目」に張り付けました。
編集作業は以上になります。
サーバーの契約を見直す前に試してみてください！
思ったよりも簡単で初心者でも設定ができました！
サイトのスピードが重い、ページの表示が遅いと感じるあなたに！！
特にそろそろレンタルサーバーの契約を見直そうか？ サーバーのお引越しを検討する前に ひとまずプラグイン「EWWW Image Optimizer」 をおすすめします！
ポイントはゆっくり焦らずにステップを進めて設定することにつきます ♬
- 画像の最適化がクリックで簡単
- 次世代フォーマットの WebP 変換が使える
- 初心者でもできました！
- 特別な知識がいらない
- WebP ルールの書き加えは緊張しました！
海外在住者がレンタルサーバーmixhost (ミックスホスト)に申し込みWordPress始めました2つの壁を乗り越え海外在住者がエックスサーバーの申し込み成功！
2つの壁を乗り越え海外在住者がエックスサーバーの申し込み成功！mage Credits : All screenshots by author, JUL 2021
