画像をWebPに変更する方法「jpegやpng」を軽量化できる【表示速度を改善】

従来の画像はpngやjpgなどでしたが、現在主流はwebpになっており画像フォーマットを変更する必要があります。

※avif画像もありますが、Chrome、Firefoxのみのサポートになるのでここではふれません。

webp（ウェッピー）は画質の劣化を最小限に、画像サイズを軽量化することを目的として使用。圧縮しても画質が落ちづらくWEBサイトの高速化にも繋がり、webpはjpegと比べて20%くらいファイルサイズが小さくなります。

WebPへ変更の利点

ウェブ上で画像を効率的に表示するための画像フォーマットWebPへの変更の利点をいくつか挙げます。

ファイルサイズの削減	WebPは、同じ画質を維持しながらJPEGやPNGと比較して小さなファイルサイズを持つことができます。より効率的な圧縮アルゴリズムにより、ウェブページの読み込み速度を向上させ、ユーザーの待ち時間を減らすことができます。
高品質な圧縮	WebPは、高い圧縮率を実現しながらも、目に見える画質の低下を最小限に抑えます。特に、写真やイラストなどのカラフルな画像において、他のフォーマットよりも効果的な圧縮ができます。
透過性のサポート	WebPは、透明な背景を持つ画像の透過性をサポートしています。これにより、複雑な形状やデザインの画像をウェブ上で効果的に表示することができます。
アニメーションのサポート	WebPは、アニメーション画像をサポートしています。複数のフレームを持つアニメーション画像を効率的に圧縮し、ウェブページ上で滑らかなアニメーションを提供することができます。
ブラウザのサポート	WebPは、主要なブラウザ（Google Chrome、Mozilla Firefox、Microsoft Edgeなど）で広くサポートされています。そのため、多くのユーザーがWebP画像を正しく表示できる環境が整っています。

変更の利点

これらの利点により、WebPへの変更はウェブパフォーマンスの向上とユーザーエクスペリエンスの向上につながる場合があります。ただし、古いブラウザや古いデバイスを使用しているユーザーに対しては、互換性の問題に注意する必要があります。

▪ Syncer（jpg~webpに変換できるサイト）

【変換前の画像】のファイル選択をクリック→使用するjpg画像選択→【返還後の画像】をクリックするとダウンロードできます。

【返還前の画像】（2.3MB）→【変更後の画像】（245.1KB）とファイルサイズが大幅に圧縮されているのが確認できます。

image.webpと元ファイル名.jpgの2枚用意できたら、次はHTMLの記述方法についてです。

HTML記述では、webpとjpgの両方を記述する方法をとります。

pictureタグで囲みその中でsource要素でwebpを指定し、imgタグでjpgを記述します。

※alt代替テキストが不要な場合は削除してください。

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

▪caniuse.com（ブラウザ対応状況が確認できるサイト）

IE・KaiOS Browser以外のすべてブラウザに対応していることが確認できます。

対応

一部対応

未対応

webサイトで使用されているwebp・jpeg・png・gifの違いについて。