なぜ今WebPが話題?
WebPは、Googleが開発した、軽量かつ高画質な画像形式です。
発表されたのは2010年と、結構前から存在していましたが、近年まで導入はほとんど進んでいませんでした。
というのも、IE(インターネットエクスプローラー)でWebPが未対応だったのが大きな理由です。2022年6月にIEがサービス終了したことで、選択肢の一つとして一気に現実味を増しました。
Googleトレンドを見てみても、IEがサ終する直前に一気に話題度が上がっていることがわかります。
今この記事を読んでいるあなたも、最近WebPの存在を知り、導入を検討している一人なのではないでしょうか?
導入前に、メリットとデメリットを理解しておきましょう。
WebPのメリット
WebPのメリットは、何と言っても容量が軽いことです。
同等の画質であれば、JPEGよりも20~80%程度軽量化できます。
画像容量が小さい方が、Webページが表示されるスピードが早くなるので、ユーザビリティ的にもSEO的にも非常にありがたいです。
また、WebPは多少圧縮しても画質はほとんど劣化しません。
さらに、png形式同様、透明な部分もしっかり表現できます。
WebPのデメリット
ここまで聞くと、WebP最強じゃん!と思うかもしれません。
しかし、WebPはあくまで、ウェブサイト上で画像を表示するのに適したフォーマットであるということを知っておかなければなりません。
例えば、Windowsの標準画像アプリで画像編集して保存すると、jpg形式で保存されてしまいます。(macは持ってないのでわかりません😭わかる人いたらコメント欄で教えてください🙏)
またパワポやエクセルにWebPを直接貼り付けようとしても、対応していないので、jpgやpngに変換する必要があります。ちなみにQiitaも貼り付けできませんでした...
あと、フォトショイラレから直接WebP形式で書き出すことができません。(プラグインを導入すればできるみたいです)
こういった場合にいちいち変換されるorする必要があるのが地味に面倒くさいところです。
画像をWebP化するには?
画像をWebP変換するツールは色々あります。
Squoosh
Google純正の変換ツールです。オンラインツールですが、画像はサーバーには送信されておらず、ブラウザ上のみで行われてるようなのでセキュリティも安心です。
サルワカ道具箱
複数の画像を一括で変換できます。
コマンドライン
WebPの公式サイトが提唱している方法です。
コマンドに慣れてないとちょっぴり難しいですが、詳細なカスタマイズや自動化ができます。
まとめ
もし、ページのファーストビューもしくはページ上部に容量の大きい画像が使われていたり、画像が大量に存在するページの場合、WebPに変換するのが特に有効です。
Webサイト上にある既存の画像をWebPに変換する場合、ソースの末尾を「.webp」に変更する必要があるので注意しましょう。