サイト構築中です。

画像を圧縮しサイト軽量化 JPG/PNGをWebPに変換可能!WordPressプラグイン ~EWWW Image Optimizer~

WebPへの対応

WebPへの対応

画像の従来のフォーマット形式は、PNG,JPGが主流でしたが、より圧縮性の高い新しいフォーマットを次世代画像フォーマットといいます。
次世代画像フォーマットとして、JPEG2000、JPEG XR、WebP(ウェッピー)などの種類があります。
なかでも、WebPは、googleが開発してきたもので、今後の主流になることが予測されており、WebPへの移行を推奨されています。
「EWWW Image Optimizer」にも、WebP対応としての機能が追加され、PNG,JPGも自動でWebPに変換される機能が備わっています。
また、新規画像だけでなく、メディアに保存されているPNG,JPG画像も最適化処理で一括でWebPに変換することが可能です。

WebP化はめんどくさいけど、やってみるとサイトがかなり軽量化されて高速表示+SEO評価が高まるメリットもあるよ!

5-1.WebP設定


①WebPタブの
 「JPG,PNGからWebP」のチェックボックスにチェックを入れ
 「変更を保存」を押します。

ベーシックタブの下部に表示されているタグを全てコピーします。
のコードの意味としては「ブラウザがWebPに対応しているなら画像ファイルをWebPで表示し、非対応なら元のフォーマット(JPEGやPNG)で表示する」という内容です。
実は、WebPに対応しているブラウザは、現在のところChrome,Firefox,Microsoft edgeくらいしか対応していないので、それ以外のブラウザでは表示されないため代わりにJPG/PNGを使うということになります。

「リライトルールを挿入」を押すと自動的にタグが「.htaccess」へ記述されるようになっていますが、エラーが出てしまうので手動で行いましょう。

このときはまだ、WebP対応になっていないことが「PNG」(赤色)で表示されています。

「.htaccess」ファイルへアクセスします。

「.htaccess」ファイルへのアクセスは、FFFTPソフトか、サーバーの管理画面で行います。
FFFTPソフトを使用する場合は、サーバーにアクセスし、
「サイト名フォルダ」⇒「Public_html」
を開いたところにあります。(Cocoonの場合)

「.htaccess」ファイルを開き、先ほどコピーしたタグを貼り付け保存します。
(このとき、ファイルをバックアップしておきましょう)

「.htaccess」に貼り付ける時は、必ず一番上、つまり #BEGIN WordPress より上に貼り付けましょう。
「リライトルールを挿入」を押してはいけない理由は、一番下に挿入されることによるエラーが出る場合があるからです。

設定が上手くいっているか確認します。
ベーシックタブを開き、右下にある、「PNG」(赤)「WebP」(緑)
になっていればOKです。

以上の設定が終わると、そこからアップロードされるPNG,JPG画像は自動でWebP変換されます。
また、これまでメディアファイルにあるPNG,JPG画像データも、
「メディア」⇒「一括最適化」
でWebPに変換できます。
ちなみに、WebPに画像を変換しても元画像は非対応ブラウザ用に残っています。

WebP画像をアップロードすると?(補足)

JPG/PNG画像は普通にアップロードできるかと思いますが、WebP画像をアップロードすると下記のような「セキュリティー上の理由から許可されていません」というメッセージがでてアップロードできません。

実は、「WordPress」は「WebP」に限らず通常ではアップロードできないフォーマットがあります。
そのため、「WebP」をアップロードできるように設定する必要があります。
(やり方は、FFFTPでそのままアップする、プラグインソフトを利用するといった方法などあります。)
ただし・・・
せっかくWebPが取り込めるようになっても、メディアファイルを開くと、サムネイルが表示されないといったことや、JPG/PNG画像が生成されないため、WebP非対応のブラウザに対応できないといった不具合がでてきます。

そのため、現状ではWebP画像を取り込むというのは避けた方が無難なのかなと思います。
しかし、pixabayの画像はほとんどWebP化されてしまっているのですが、どうしてもWebP画像を利用したいという場合は、いったん、JPG/PING画像に変換してWordPressにアップロードする手段もあります。
変換は、下記サイトで無料で簡単にできます。

https://lab.syncer.jp/Tool/Webp-Converter/

タイトルとURLをコピーしました