Webp 変換をしてWebに使う軽い画像を作る方法

2010年にGoogleによって公開された画像ファイルの形式として、WebPは画像の品質を保ちながら、画像のファイルサイズを最大限で控えることができます。よって、ウェブに掲載する画像をWebpに変換するのはページのロードスピードを大きく改善できます。

ウェブページの読み込み速度はSEOを評価するうえでのコア指標であるため、サイト運営側がそれを気に留めなければなりません。とりわけ多くの画像を挿入する必要のあるページに対してです。

上の画像通りに、Googleが提供するスピードテストのツールPage Speed Insightでウェブページのロード速度に対して採点を行うたび、常にWebpの使用がおすすめという診断結果が出ます。

この記事ではWebpの特性、作成方法および画像軽量化のコツについて紹介していきたいと思います。

一、Webpとは

WebPは、可逆（ロスレス）および非可逆圧縮の両方ともサポートしている画像形式です。WebPを使用すると、サイト運営者と開発者は、より軽量でディテールがきれいな画像を掲載し、Webを高速化させることができます。

WebPロスレス画像（可逆圧縮）は、PNGと比較してサイズが26％小さくなります。 WebPの不可逆画像は、同じ品質レベルでのJPEG画像よりも25〜34％小さくなります。

ロスレスWebPは、わずかサイズが22％膨らむコストで、透過性（アルファチャネル）をサポートするようになることもできます。非可逆圧縮が許される場合、透過性もサポートでき、しかもファイルサイズは通常のPNGファイルの三分の一にとどまります。

二、Webp 変換をするメリットとデメリット

前述のように、ウェブページの読み込みスピードを改善するために、GoogleはWebpという画像形式の使用を薦めています。まとめてみると、Webpは下記のメリットがあります。

• 可逆圧縮/非可逆圧縮の両方をサポート。可逆圧縮を使うなら、圧縮画像を復号すると圧縮された前同様の品質を復元できます。
• ファイルサイズを著しく増やさないまま、透過性をサポートすることができます。
• GIFのようにアニメーションをサポートしています。

JPEG、PNG、GIFとWebpの比べ

一方、Webpは適用の幅がJPEGやPNGほど広いではないというデメリットも持っています。主にWebで使用されるために開発された形式として、未だにすべてのブラウザに対応できることにはなっていません。

2022年のこの時点ではGoogle Chrome、Firefox、Edge、Safariなど主流のブラウザには対応できるようになっていますが、IEはまだ対応できません。また、「.webp」拡張子の画像は専用のプログラムを使えなければ、WindowsとMacOSで閲覧できない状況も多いです。

下にある画像はWEBP対応ブラウザを示しています。caniuse.com/webpというサイトを訪問して、現時点でWEBP画像形式をサポートするブラウザおよびそれらのバージョン番号、サポート時間などの詳しい情報をと確認することができます。

三、webp変換をして画像をwebpとして保存する方法

1. Squoosh

名前どおりに、この画像を「絞って」サイズを削減できるツールです。Googleが提供している画像サイズ削減用のWebツールとして、非常に豊富な機能を備えています。画像をアップロードしてから、Webpを含む九つの形式の間で画像を自由に変換することができます。アドバンス設定とリサイズ機能も提供されています。

最も強い所は、設定を変えた後、画像ファイルのサイズがどれだけ縮んだのか、画質がどのように変化したのかをリアルタイムでプレビューできるのです。不便なのは、複数の画像を一括で変換することができないという点です。

2. Photoshop用プラグイン「WebPShop」

Googleは一般画像をWebpに変換できるPhotoshop用のプラグインもユーザーに提供しています。この画像を使うことで、上記のリンクををクリックして、Googleの開発者サイトからダウンロードすることができます。Photoshopではプラグインのインターフェースはこんな感じです。一枚ずつ画像をWebpに変換するというデメリットもあります。

Windows或いはMacのユーザーはこの記事を参照にしてこのプラグインの使い方をご了解ください。

3. Webp公式ツール

Googleが提供している、WEBP変換をするための公式ツールです。最も大きいメリットは一括で複数の画像をWebpに変換できることです。しかし、一定のコーディングの知識が必要です。コードを入力することで、出力品質、圧縮タイプなどを細かく設定することができます。最新のバージョンは「libwebp-1.2.0」です。具体的な使い方はこの記事をご参照ください。

Command LineでWebp画像を作成するなら、このリンクをクリックしましょう。

四、Webpでなければなりませんか

Webpを使用する目的はより小さい画像ファイルを使うことでウェブページの読み込みを加速させることにあります。前述にあるWebpの特性および変換方法から見ると、使用するうえで不便な所が多いと感じると思います。実際にも、Webpの使用率はまだ高くはないのです。

考え方を転じて、使用頻度の高いJPEGやPNG画像を圧縮してからウェブサイトに掲載するのも一つの策です。ならば、圧縮率の高くて画質を維持できるツールが必要となります。

Page Speed Insight或いはTest My SiteというGoogleが提供するスピードテストのツールによる画像形式のアドバイスにもっぱら頼るユーザーもたくさんいると思います。実はJPEG2000、Webpの使用に拘らなくてもいいです。

五、VanceAI 画像圧縮を使いましょう

VanceAI画像圧縮を使えば、PNGとJPEG画像をWebpに変えなくても画像ファイルのサイズを大幅に削減することができます。しかも、入力画像そのものと勘違いさせるほどの画質を保つことができます。

• 完全無料で利用、登録とログインはなし
• 一括で20枚の画像をアップロードしてからバッチで圧縮することができます。
• 著しい圧縮率、最大では80％の圧縮率は実現可能です。
• 使い方は簡単で、画像をアップロードすればいいです。コーディングの知識が不要です。
• プライバシーをちゃんと保護できます。ユーザーデータは24時間の後で自動で削減されます。

まとめ

以上はWebp画像の作成方法をおよび代わりになっている策をまとめています。結論で言いますと、Webp画像は画像サイズと品質を最適化するための優れた画像形式ですが、使用にこだわる必要はありません。VanceAI 画像圧縮のようなツールを使ってJPEGやPNGを最適化させるのもいい選択です。

HEIC変換をしてHEICをJPGに変換するツールまとめという記事を読んで、Appleの軽量化の画像形式HEICの使い方を見ましょう。