LoginSignup
0
0

WebP導入の前にメリットデメリットを知っておこう

Posted at

なぜ今WebPが話題?

WebPは、Googleが開発した、軽量かつ高画質な画像形式です。

発表されたのは2010年と、結構前から存在していましたが、近年まで導入はほとんど進んでいませんでした。

というのも、IE(インターネットエクスプローラー)でWebPが未対応だったのが大きな理由です。2022年6月にIEがサービス終了したことで、選択肢の一つとして一気に現実味を増しました。

Googleトレンドを見てみても、IEがサ終する直前に一気に話題度が上がっていることがわかります。
スクリーンショット 2024-05-01 190006.png

今この記事を読んでいるあなたも、最近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」に変更する必要があるので注意しましょう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0