webpに変換する方法

webpとは

webpとはGoogle産まれの画像フォーマットです。
・読みはwebp(ウェッピー)
・拡張子は.webp
次世代画像フォーマットと呼ばれるwebpですが、じつは登場してもう10年以上経っていて、いかにこれまで普及してこなかったかがわかります笑
でも新しい技術って本当に一般的になるまではこの位かかるものかもしれませんね。
ですが昨年あたりから一気にwebpを使用しているサイトが増えたような気がします。

webpの特徴は

・高画質なまま圧縮率が高い
・png、gifのような透過やアニメーションにも対応
簡単に言ってしまうと
jpg、png、gifの良いとこどりみたいな性質を持っています。
(圧縮の形式もそれぞれ異なったりしますがwebサイトの作成にはあまり関係ないので省きます。)

・主要ブラウザに対応
現在はIE以外のほぼすべての主要ブラウザに対応しています。

ですので、webサイトを制作する上で、メリットはあってもデメリットと呼べるようなものはほぼありません。
強いて言うなら元々がwebp画像というものが出回っていないため
jpgやpngを「変換しなければいけない」という手間がかかることでしょうか。

webpに変換する方法

ですが実際に変換する方法はとても簡単です。
ざっくりとですが
1.web上の変換ツールを使用する
2.Wordpressサイトの場合、プラグインを使用する
3.作成する画像をwebp形式で保存する
というような方法があります。

1.web上の変換ツールを使用する

とっても簡単です。
https://saruwakakun.com/tools/png-jpeg-to-webp/
https://convertio.co/ja/
https://lab.syncer.jp/Tool/Webp-Converter/
何か、アプリを使用したり登録したりせずとも上記のようなサイト様で
簡単に手持ちのjpgやpngをwebpに変換することができます。
その逆にwebpをjpgにするようなこともweb上でできてしまいます。

2.Wordpressサイトの場合、プラグインを使用する

有名なところで「WebP Converter for Media」というプラグインがあります。
https://ja.wordpress.org/plugins/webp-converter-for-media/
サイト内の使用している画像を設定して一括でwebpに変換できたりします。
変換プラグインは他にもありますし、
SEO対策プラグインに画像関連の設定としてwebpに変換できたりするものもあります。

3.作成する画像をwebp形式で保存する

Photoshopで画像を作成されている方は
最新のもの(Photoshop23.2以降)でしたらデフォルトでwebpファイルを開いたり保存することが可能です。
それ以前のバージョンをご利用の方は(自分もこれです)
こちらから「WebPShop」というプラグインをダウンロードして
https://helpx.adobe.com/jp/photoshop/kb/support-webp-image-format.html
ご使用中のPhotoshopに導入する(Photoshop内の/Plug-ins/に格納して再起動する)ことで
webpファイルへの書き出しが可能になります。
※注意点 (例えばPhotoshop2021の場合)
ファイル＞書き出し＞web用に保存
の先からwebpの選択はできません。
ファイル＞別名で保存
からwebpでの保存ができます。