web上で使える画像フォーマットには「JPG」「PNG」「GIF」など様々な種類がありますが、Webp(ウェッピー)と言うGoogleが開発した高圧縮率の次世代の静止画フォーマットの導入が進んでいます。これまでは対応しているブラウザが少なかったのですが、2021年6月時点で、Chrome、Firefox、Edge、Safari等、IE以外のブラウザでWebPがサポートされるようになりました。日本では未だIEの使用が根強く、対応には時間がかかりますが、今後、WebPの導入はさらに本格的になることが予想されます。
WEBの高速化を図るGoogleでは画像の軽量化が推進されており、自身がサービス提供しているpage speed insightsでも「次世代フォーマットでの画像の配信」という項目の中でWebpの使用を推奨しています。
Googleは、WebPを使用した場合、PNGの使用時と比べ約26%、JPEGでは約25〜34%も画像の容量を圧縮できると公表しています。また、WebPはJPEGと同じこの非可逆圧縮でありながら、PNGのような背景透過やGIFのようなアニメーションに対応することができます。画像ファイルが軽くなるということは、web上での表示速度も速くなり、SEO対策にも有効です。“WebP”画像を作るには、“WebP”に対応した編集ソフトが必要となります。Googleが提供・推奨している画像圧縮ツール“squoosh(スクオッシュ)”や、“paint.net”等です。
ここでは、”WebP”に対応しているWordPressの画像圧縮のプラグイン“EWWW Image Optimizer”を利用することで、今後アップする画像を全て“WebP”に変換し、既存の画像も一括で変換することができますので、その使い方について説明します。
プラグインの設定
WebPに変換する方法の説明が目的の為、EWWW Image Optimizerのインスールの仕方については、ここでは省略して、EWWW Image Optimizerの設定から説明します。
EWWW Image Optimizerの設定
「Enable Ludicrous Mode」をクリック
変換
まずは、「変換」タブをクリックして、「変換リンクを非表示」にチェックが入っているか?確認します。チェックを入れておかないと質の悪い画像が配信されてしまう様です。
基本設定
無料版の選択
デフォルトで無料版が選択されていますので、そのままでOK
注意:
有料版と無料版では圧縮方法が異なり、無料版がロスレス圧縮(元の状態に戻せる圧縮)で、圧縮率10～20%に対して、有料版はロッシー圧縮(元の状態に戻せない圧縮)で圧縮率は70～80%となります。
画面のリサイズ
画像をリサイズせずにアップロードした場合に、設定しているサイズに自動的にリサイズされます。
注意:
私は、photoshopでリサイズした後にアップしていますので、ここの設定は不要(0で良い)ですが、ここでは1,024としています。
遅延読み込み
WordPress5.5から「遅延読み込み機能」が標準となっったため、ここではチェックの必要はありません。
WebP変換
JPEGやPNGよりもファイルサイズを小さくできる「次世代画像フォーマット」となります。チェックを入れます。
.htaccessの追記
WebP変換にチェックを入れて「変更を保存」をクリックすると、コードが表示されますので、これを.htaccessの先頭または末尾に追記します。
「リライトルールを挿入する」をクリック
.htaccessの追記が正しくいくと、赤色表示の「PNG」が緑色の「WEBP」に変わります。これで設定は完了です。
留意:
「リライトルールを挿入する」をクリックすれば、.htaccessに書き込んでくれますが失敗やエラーとなることが多い為、ネットではFTPで.htaccessをダウンロードして書き替えてアップロードするか、例えばxseverであればサーバーパネルから「.htaccess編集」にてコードを追加しますが、私の場合やり方が悪かったのか、.htaccessの書き換えはうまくいかず、結局、「リライトルールを挿入する」をクリックしてうまくいきました。
[ .htaccessの追加 ]
プラグインの実行
WebP画像の生成
一括最適化のクリック
「再最適化を強制」と「WebPのみ」にチェックを入れて、「最適化されていない画像をスキャンする」をクリックします。
WebP変換の実行
変換後の確認
.htaccessの調整
コードの追加位置
.htaccessに、WebP変換のコードを追加記入していますが、この記入は必ず先頭に記述しなければならないとの注意が、ネット上で多く記載されていますので、先頭に記述する様にしています。が、例えばプラグインを導入して設定等を行うと、その情報は先頭に記述されますので注意が必要です。#BEGIN WordPressより上であれば良いのだろうと思いますが・・・
注意:
「.htaccess」に貼り付ける時は、必ず一番上、つまり #BEGIN WordPress より上に貼り付けるようです。一番下に貼り付けるとエラーとなるようです。
コード位置の調整
「WP Fastest Cache」は .htaccess ファイルを書き換えてキャッシュ機能を使います。従って、.htaccessには、先頭にWpFastestCacheのコード、次にWebPのコード、そしてWordPressのコードという記述順となってしまいますので、位置の調整をしました。
※.htaccessをダウンロードしてa,b.cの順をb,a,cに入れ替えて、FTPでアップロードしました。
