WebP（ウェッピー）は、Googleが開発した新しい画像フォーマットです。

従来のJPEGやPNGに比べ、ファイルサイズを大幅に削減しつつも高品質の画像を保持することができるのが特徴です。WebPは、静止画だけでなくアニメーションにも対応しており、ウェブサイトのパフォーマンス向上に寄与します。

WebPの読み方は「ウェッピー」です。
WebとPictureの頭文字を組み合わせたもので、その読み方もシンプルで覚えやすいです。

■ メリット

1. ファイルサイズの削減：WebPは画像を効率的に圧縮でき、JPEGやPNGに比べてファイルサイズを最大34％まで削減することができます。これにより、ウェブページの読み込み速度が向上し、ユーザー体験が向上します。

2. 高品質：WebPは、劣化の少ないロスレス圧縮と、高効率のロス圧縮の両方に対応しています。これにより、画像の品質を損なうことなくファイルサイズを小さくすることが可能です。

3. アニメーション対応：GIFに代わるアニメーションフォーマットとしても利用できます。WebPのアニメーションは、GIFよりも小さなファイルサイズで高品質なアニメーションを提供します。

■ デメリット

1. 互換性の問題：すべてのブラウザや画像ビューアがWebPをサポートしているわけではありません。一部の古いブラウザや特定のソフトウェアでは、WebP画像が表示されないことがあります。

2. 変換の手間：既存のJPEGやPNG画像をWebPに変換する手間がかかります。また、WebPへの変換を自動化するツールやプラグインを導入する必要がある場合もあります。

WebP画像をウェブサイトに実装するには、以下の手順を踏むことが一般的です。

1. 画像の変換：まず、既存の画像をWebP形式に変換します。これには、コマンドラインツール「cwebp」やオンラインの変換ツールを使用します。

2. HTMLへの適用：HTMLファイルでWebP画像を使用するには、<picture>要素を用いてブラウザ互換性を考慮します。例えば、以下のように記述します。

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Description of image">
</picture>

3. CSSでの適用：CSSでWebP画像を使用する場合は、背景画像として指定します。以下はその例です。

.background {
    background-image: url('image.webp');
}

また、互換性を確保するために、以下のようにフォールバック画像を指定することも重要です。

.background {
    background-image: url('image.jpg');
    background-image: url('image.webp');
}

WebP画像をApacheサーバーで提供するために、.htaccessファイルに適切な設定を追加することができます。
以下は、WebPをサポートするための基本的な.htaccessの記述例です。

# WebPサポートのための.htaccess設定

# mod_rewriteが有効になっていることを確認
<IfModule mod_rewrite.c>
    RewriteEngine On

    # WebP画像が存在する場合にリクエストをリダイレクト
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule ^(.*)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=REQUEST_image]

    # キャッシュヘッダーを設定
    <IfModule mod_headers.c>
        Header append Vary Accept env=REQUEST_image
    </IfModule>
</IfModule>

# WebPファイルのMIMEタイプを設定
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

■ 設定内容の説明

1. mod_rewriteの有効化: RewriteEngine Onでmod_rewriteを有効にします。

2. 条件付きリダイレクト:

• ブラウザがWebPをサポートしているか (HTTP_ACCEPTヘッダーにimage/webpが含まれているか) を確認します。
• リクエストされたファイルがJPEGまたはPNGであるかを確認します。
• 同名のWebPファイルが存在するかを確認します。
• すべての条件が満たされた場合、リクエストをWebPファイルにリダイレクトします。

3. キャッシュヘッダーの設定: Varyヘッダーを設定し、ブラウザがキャッシュする際にAcceptヘッダーを考慮するようにします。

4. MIMEタイプの設定: AddType image/webp .webpでWebPファイルのMIMEタイプを設定します。

この設定を.htaccessファイルに追加することで、WebP画像が対応するブラウザに対して提供され、非対応のブラウザには元のJPEGやPNG画像が提供されるようになります。

WebPへの変換は、いくつかの方法で行えます。

1. オンラインツールの利用：多くのウェブサイトがJPEGやPNGをWebPに変換するサービスを提供しています。使い方は簡単で、画像をアップロードしてダウンロードするだけです。

2. ソフトウェアの利用：Adobe Photoshopなどの画像編集ソフトウェアには、WebP形式で保存するためのプラグインが提供されています。

3. コマンドラインツールの使用：Googleが提供する「cwebp」ツールを使用して画像を変換することも可能です。以下はその基本的な使い方です。

cwebp -q 80 image.jpg -o image.webp

このコマンドは、品質を80に設定してJPEG画像をWebPに変換します。