どうも皆さんこんにちは、そーべー一家のおとうさんです(@soubeikun)
今回はWordpressのブログで次世代フォーマット【Webp】での画像配信の方法やサイズ・圧縮方法を紹介します。
Googleのデータによりますと、
「完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる」
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
だそうです。
まずは自分のサイトを調べてみましょう。
こちらのGoogleのウェブページの速度を計るサイトを使ってみると、改善できる項目で「次世代フォーマットでの画像配信」というのがあります。
実際に、WebP変換ツールなどで画像を保存し、ワードプレスにアップロードしようとすると「対応していません」と冷たくあしらわれます。。。
と思っていたらプラグインで対応出来るではありませんか！
やり方はとても簡単なのでやってみましょう。
また、ブログの画像に関しては、画像サイズを適正な大きさにすることでも余分な容量を抑えることが出来ます。
どうも皆さんこんにちは、そーべー一家のおとうさんです。ブログに挿入する画像サイズですが、適正なサイズをググってみても結構バラバラで表示されます。それもそのはず皆さんの作っているサイト自体が人それぞれだから画像サイズも違って[…]
さらに、圧縮・次世代フォーマットで画像を保存することでサイトの表示速度をあげる事が出来ます。
プラグインを入れるだけなのでやっといて損はないです。
それではやっていきましょう！
画像を圧縮してアップロードする
まずは、こちらのサイトで画像を圧縮します。
画像をドラッグ＆ドロップするだけで圧縮してくれます。
これだけでも、かなり画像を圧縮してくれます。
EWWW Image Optimizerのプラグインを入れる。
プラグインから
EWWW Image Optimizer
を検索してインストール後に有効化してください。
設定しておくと今後アップロードする画像は全て「WebP」に変換してくれます。
過去にアップロードした画像も一括で「WebP」に。
プラグインの設定する項目は、3つ
・Basic
・Convert
・WebP
そして、サーバー側の設定で「.htaccess」に書き込みをします。
まずは、プラグインの設定から「EWWW Image Optimizer」を選択します。
Basic
すでにチェックが入っていると思いますが、「 Remove Metadata 」にチェック☑
Convert
コンバージョンリンクを非表示に☑チェックを入れます。
サイト管理者以外の人が画像を変換出来ないようにする設定です。
WebP
JPG, PNG から WebPに☑チェックを入れます。
以上の三点を設定して最後に「変更を保存」をクリックします。
「.htaccess」に書き込み
下部にあるルールをコピーします。
「.htaccess」の「#BEGIN WordPress」より上に書き込みをします。
私の場合、エックスサーバーを利用しているので、
サーバー管理→サーバーパネル→ 「.htaccess編集」
から編集します。
右下の、赤色のPNGが緑色のWEBPに変われば設定が上手く出来た事になります。
上手く出来たでしょうか？
Chromeをお使いの場合は右上のメニューから「その他のツール」→「閲覧履歴を消去」→「キャッシュされた画像とファイル」→「データを削除」
再度、EWWW Image Optimizerの設定をご確認ください。
まとめ
画像サイズを適正な大きさにして、TinyPNGサイトでの圧縮・WebPのフォーマットに変換する作業は手間がかかります。
どうも皆さんこんにちは、そーべー一家のおとうさんです。ブログに挿入する画像サイズですが、適正なサイズをググってみても結構バラバラで表示されます。それもそのはず皆さんの作っているサイト自体が人それぞれだから画像サイズも違って[…]
いくらサイズが小さくなったとしても元の画像から劣化して見えにくくなっては意味がありません。
ご自身が納得いく画像のアップロードを行ってください。
最後まで読んでくれてありがとうございました。