wordpressのメディアにwebpをアップしサイトに表示させたい

wordpressで画像使用すると、「…サイト重くなったな…」みたいなことありませんか？
なかなか表示されなかったり泣
少しでも画像軽くしたいなあ。そんな時は画像をwebp対応しましょう！！！

と言ってもwordpressの初期状態ではメディアにwebpファイルをアップロードすることができませんので今から方法を書いていきます。

そもそもwebpって何？？

webpとはgoogleが新たに作り出した画像フォーマットですね。「hello.png」 「hello.jpg」のように「hello.webp」のような拡張子になります。私も使用しているのですがかなり軽くなりますよ！！
（IEは未対応なので書き方には少し工夫が必要です。）　

ということで早速行ってみましょう！！　一応WebP Expressというプラグインもあるのですが、そんなに難しくないのでプラグインなしでいってみましょう！

functions.phpに追記

functions.phpに以下を記述してください

<?php
　function add_file_types_to_uploads( $mimes ) {
   $mimes['webp'] = 'image/webp';
   return $mimes;
  }
  add_filter( 'upload_mimes', 'add_file_types_to_uploads' );

　function webp_is_displayable($result, $path) {
    if ($result === false) {
      $displayable_image_types = array( IMAGETYPE_WEBP );
      $info = @getimagesize( $path );

      if (empty($info)) {
          $result = false;
      } elseif (!in_array($info[2], $displayable_image_types)) {
          $result = false;
      } else {
          $result = true;
      }
    }
    return $result;
  }
  add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);
?>

これだけです。あとはメディアに画像をアップしてみてください。成功するはずです！！サムネイル画像も表示されていると思います。

画像を表示

あとは画像を表示させたいところに書けばいいのですが、このwebpはpictureタグを用いて表示します。
下記を参考にしてください。

<picture>
  <source type="image/webp" srcset="webp画像のパスを入力">
  <img src="jpg png画像のパスを入力">
</picture>

pictureタグで全体を囲みます。
2行目のsrcsetの中にwebpファイルのパスを記述します。
3行目のimgタグのsrcにはwebpではなく同じ画像の.jpgや.png画像を書きます。こうすることでwebp対応しているブラウザではwebp、対応していないブラウザではjpgやpngなどが表示されます。ちなみにaltはsource内ではなくではなくimg内に書きますので注意を！！ webp表示のさせ方についてはwordpressに限らずhtmlなどでもこのやり方で使えます

まとめ

webp対応することによってサイトの軽量化、そしてスピードアップに繋がりますのでぜひ取り組んでください！