インドネシアのバタムの夕日を撮影してTwitterにアップしましたのでブログにも掲載したいと思います。
シンガポール海峡を眺めています
拡張子： jpeg
サイズ： 317KB
大きさ： 1478×1108
解像度： 96dpi
深さ ： 24
拡張子： WebP
サイズ： 138KB
大きさ： 1478×1108
解像度： 72dpi
深さ ： 32
WebPをWordPressで使ってみた
今回のブログでは㊤『Jpeg』形式だけでなく、㊦『WebP(ウェッピー)』という米Googleが開発しているオープンな静止画フォーマットでアップしてみました。PNGやJPEGより圧縮率が高くファイルサイズを抑えられるメリットがあります。
詳細はこちら
Googleの[ PageSpeed Insights ]でサイトの測定を行うと「改善できる項目」に「次世代フォーマットでの画像の配信」と表示されるアレです。
今回の画像の場合ですが「Jpg」では「317KB」のサイズがありましたが「WebP」に変換すると「138KB」となりました。約43.5%も小さくなりましたね。画像枚数が1，2個で少ない場合はあまりメリットを感じないないかもしれませんが、大量の画像を使う場合はこの圧縮率は大きなメリットになると思います。
今後[ PageSpeed Insights ]を重要視するとGoogleも宣言しているので、今後に備えて、WebPを使ってみようと思ったのが今回の記事です。
WordPressにWebPをアップロードしてみて、こんなにページが早くなりました！ウェーイ！となることを想定していましたが、実際には困ったことが2つあったのでお伝えします。
「このファイルタイプはセキュリティの観点から許可されていません。」
WordPressにアップロードするとき、この警告がでてアップロードができませんでした。原因は、デフォルトでは許可されていないファイルタイプは、アップロードできないようです。
解決方法
私はこの問題を回避するため、プラグイン「PJW Mime Config」をインストールしました。
インストールした後は設定です。
1．「設定」➡「Minme types」から設定画面に入り
2．「Add mime-type」のフォームに下記を入力して
Associated mime-type: image/webp
3．「Add mime-type 」で登録するだけです。
簡単に解決しましたね！
「携帯(iPhone)で閲覧したら、WebPが表示されません。」
ブラウザはGoogleアプリを使用しています。自社アプリなのにWebP非対応なのかなぁ(苦笑)
解決方法
jpgの画像を用意します。
WebP対応ブラウザならWebPを表示、WebP未対応ならJPEGを表示する、というHTMLで記述します。
表示されるようになりましたか？
簡単に解決できましたね！
※私の環境では、AMPで下記のエラーが発生することになりました (｡･ω･｡) ううう
現時点ではエラーの理由がわからないため、もう少し調べてみます。
WebPを使えばPageSpeedは早くなる？
結論
Googleの[ PageSpeed Insights ]での測定値は…改悪となりましたｗｗｗ
踏んだり蹴ったりです(｡･ω･｡)
WebPを使うにはまだ微妙…かもしれません
コメント