【初心者】ブログを高速化しよう【WebP】次世代フォーマットでの画像配信や圧縮の方法【WordPress】

どうも皆さんこんにちは、そーべー一家のおとうさんです(@soubeikun)

今回はWordpressのブログで次世代フォーマット【Webp】での画像配信の方法やサイズ・圧縮方法を紹介します。

Googleのデータによりますと、

「完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる」

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

だそうです。

まずは自分のサイトを調べてみましょう。

こちらのGoogleのウェブページの速度を計るサイトを使ってみると、改善できる項目で「次世代フォーマットでの画像配信」というのがあります。

実際に、WebP変換ツールなどで画像を保存し、ワードプレスにアップロードしようとすると「対応していません」と冷たくあしらわれます。。。

おとうさん
おとうさん
まだ、ワードプレスでは未対応なんだ…。

と思っていたらプラグインで対応出来るではありませんか!

やり方はとても簡単なのでやってみましょう。

また、ブログの画像に関しては、画像サイズを適正な大きさにすることでも余分な容量を抑えることが出来ます。

併せて読みたい

どうも皆さんこんにちは、そーべー一家のおとうさんです。ブログに挿入する画像サイズですが、適正なサイズをググってみても結構バラバラで表示されます。それもそのはず皆さんの作っているサイト自体が人それぞれだから画像サイズも違って[…]

最適な画像サイズのサムネ

さらに、圧縮・次世代フォーマットで画像を保存することでサイトの表示速度をあげる事が出来ます。

プラグインを入れるだけなのでやっといて損はないです。

それではやっていきましょう!

画像を圧縮してアップロードする

まずは、こちらのサイトで画像を圧縮します。

TinyPNG

画像をドラッグ&ドロップするだけで圧縮してくれます。

TinyPNGのサイト

これだけでも、かなり画像を圧縮してくれます。

EWWW Image Optimizerのプラグインを入れる。

プラグインから

EWWW Image Optimizer

を検索してインストール後に有効化してください。

設定しておくと今後アップロードする画像は全て「WebP」に変換してくれます。

過去にアップロードした画像も一括で「WebP」に。

プラグインの設定する項目は、3つ

・Basic
・Convert
・WebP

そして、サーバー側の設定で「.htaccess」に書き込みをします。

まずは、プラグインの設定から「EWWW Image Optimizer」を選択します。

Basic

基本設定

すでにチェックが入っていると思いますが、「 Remove Metadata 」にチェック☑

Convert

Convertの設定

コンバージョンリンクを非表示に☑チェックを入れます。

サイト管理者以外の人が画像を変換出来ないようにする設定です。

WebP

WebPの設定

JPG, PNG から WebPに☑チェックを入れます。

以上の三点を設定して最後に「変更を保存」をクリックします。

「.htaccess」に書き込み

「.htaccess」に書き込み

下部にあるルールをコピーします。

「.htaccess」の「#BEGIN WordPress」より上に書き込みをします。

.htaccessを編集する場合はバックアップを取ってから作業してください。

私の場合、エックスサーバーを利用しているので、

サーバー管理→サーバーパネル→ 「.htaccess編集」

から編集します。

右下の、赤色のPNGが緑色のWEBPに変われば設定が上手く出来た事になります。

上手く出来たでしょうか?

緑色のWEBPに変わらない場合は?
ブラウザーの画像のキャッシュをクリアーしてみてください。

Chromeをお使いの場合は右上のメニューから「その他のツール」→「閲覧履歴を消去」→「キャッシュされた画像とファイル」→「データを削除」

再度、EWWW Image Optimizerの設定をご確認ください。

まとめ

画像サイズを適正な大きさにして、TinyPNGサイトでの圧縮・WebPのフォーマットに変換する作業は手間がかかります。

併せて読みたい

どうも皆さんこんにちは、そーべー一家のおとうさんです。ブログに挿入する画像サイズですが、適正なサイズをググってみても結構バラバラで表示されます。それもそのはず皆さんの作っているサイト自体が人それぞれだから画像サイズも違って[…]

最適な画像サイズのサムネ

いくらサイズが小さくなったとしても元の画像から劣化して見えにくくなっては意味がありません。

ご自身が納得いく画像のアップロードを行ってください。

最後まで読んでくれてありがとうございました。