WebP 変換ツール｜画像形式変換

WebPはVP8（動画コーデック）をベースにした予測符号化技術を使用し、ロッシー（非可逆）とロスレス（可逆）の両方の圧縮モードに対応しています。さらにアルファチャンネル（透過）とアニメーションもサポートします。ロッシーWebPはJPEGと同等の用途（写真・複雑なグラデーション）に使用でき、ロスレスWebPはPNGと同等の用途（ロゴ・テキスト入り画像・透過が必要な画像）に使用できます。

同じ写真画像（品質同等）の場合、一般的にWebP（ロッシー）はJPEGより25〜35%、PNGより50〜70%程度小さいファイルサイズになります。例えば1MBのJPEG画像がWebPで700KB前後になることが多く、ECサイトや写真ギャラリーなど画像が多いページでは合計のページサイズが大幅に削減されます。ただし圧縮率は画像の内容・品質設定・元のファイル形式によって異なります。

WebPはChrome（バージョン23以降）・Firefox（65以降）・Edge（18以降）・Safari（14以降）・Opera（12.1以降）でサポートされています。2024年時点でWebPをサポートするブラウザのシェアは97%を超えており、ほぼすべてのユーザーに対してWebP画像を提供できます。HTMLの<picture>タグを使ったフォールバック実装（非対応ブラウザにはJPEGを提供）も容易です。

GoogleのCore Web VitalsはWebサイトのユーザー体験を評価する指標群で、LCP（Largest Contentful Paint：最大コンテンツの描画速度）・FID（First Input Delay）・CLS（Cumulative Layout Shift）が主要指標です。ページ内の最も大きな画像（ヒーロー画像・メイン画像）をWebPに変換することでLCPが改善されます。Google PageSpeed InsightsやLighthouseで「次世代フォーマットの使用」が指摘されている場合は、このツールでWebPに変換することで改善できます。

WebPを使いながら未対応ブラウザへのフォールバックを確保するには<picture>タグを使います。<source type="image/webp" srcset="image.webp"><img src="image.jpg" alt="説明">の構造で記述することで、WebP対応ブラウザにはWebPを、非対応ブラウザにはJPEGを自動的に提供できます。CSSの背景画像にWebPを使う場合はCSS Supportsクエリやbackground-imageの複数指定を活用してください。

WordPressサイトでWebPを活用するには、ShortPixel Image Optimizer・Smush・EWWW Image Optimizer・WebP Expressなどのプラグインが便利です。これらのプラグインは既存の画像ライブラリを一括でWebP変換し、対応ブラウザには自動的にWebPを提供します。新しくアップロードする画像も自動的にWebP変換されるため、管理の手間を最小化できます。プラグインを使わない場合はこのツールで変換後、.htaccess（Apache）またはnginx設定でWebPへのリダイレクトを設定する方法もあります。