接続に失敗しました。もう一度試してください。

コンテンツにスキップ
SEO Tools
ヘルプとドキュメント
速度 中程度の影響 簡単 20～40分

最新の画像フォーマット (WebP/AVIF)

WebP と AVIF は JPEG/PNG より 25 ～ 50% 小さくなります。

それは何ですか

WebP と AVIF は、同じ品質で JPEG/PNG よりも大幅に優れた圧縮率を備えた最新の画像形式です。現在のすべてのブラウザはそれらをサポートしています。

なぜそれに対処するのでしょうか？

画像はページの重みの最も大きな部分を占める傾向があります。 WebP/AVIF に切り替えると、目に見える品質の低下がなく、データが数十パーセント節約され、直接的なスピードアップになります。

やり方

  1. 1画像を WebP (ユニバーサル) または AVIF (さらに小さい) に変換します。
  2. 2安全のため、フォールバックでは <picture> を使用します。
  3. 3イメージ変換を使用して、ビルドまたは CDN 経由で変換を自動化します。
  4. 4同時に、実際に必要な寸法にサイズ変更します。

例

Správně
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="..." width="800" height="600">
</picture>

結論

最新のフォーマットは、ページの重量を軽減する最も効果的な方法の 1 つです。変換を自動化するのが理想的で、画像ごとに手作業で行う必要はありません。圧縮、正しいサイズ、遅延読み込みを組み合わせます。

関連トピック