WebPとAvifは、JPEGおよびPNGよりもファイルサイズが大幅に小さく、より良い圧縮を提供し、AVIFはJPEGよりも最大50％の削減とHDRおよびワイドカラー範囲のサポートを提供します。 2。要素を使用して、幅広いブラウザの互換性のために、avifとjpeg/pngフォールバックをavifに提供します。 3. CWEBP、Avifenc、Squoosh、CMSプラグインなどのツールを使用して畫像変換を自動化し、最適なバランスをとるために70?85の品質(zhì)設(shè)定をターゲットにします。 4.オフスクリーン畫像のロード= "lazy"でネイティブレイジーロードを?qū)g裝するか、よりコントロールおよび古いブラウザーサポートのために交差點オブザーバーAPIを使用します。 5.レイアウトシフトを防ぎ、低品質(zhì)のプレースホルダーを使用するための幅と高さの屬性を常に含めます。 6.最新の形式、レスポンシブSRCSET、および怠zyなロードを組み合わせながら、CDNを畫像最適化で活用してパフォーマンスの向上を最大化し、負荷時間の速度、ユーザーエクスペリエンスの改善、コアWebバイタルスコアの改善をもたらします。

Webの畫像を最適化するだけでなく、畫像を小さくするだけでなく、パフォーマンスに最小のコストで最高の視覚體験を提供することです。ウェブサイトがより視覚的になるにつれて、適切な畫像形式と読み込み戦略を選択すると、負荷時間、帯域幅の使用、ユーザーエクスペリエンスに大きな影響を與える可能性があります。 WebP、Avif、およびLazy Loadingが最新の最適化ワークフローにどのように適合するかは次のとおりです。

WebpとAvifがJPEGやPNGよりも優(yōu)れている理由

JPEGやPNGなどの従來の形式は何十年も前から存在していますが、現(xiàn)代の代替品と比較して非効率的です。

Googleが開発したWebPは、以下を提供します。

• 同様の品質(zhì)でJPEGよりも25?35％のファイルサイズ
• 透明性に対する完全なサポート（PNGなど）ですが、圧縮がはるかに優(yōu)れています
• 損失と損失のない圧縮オプションの両方
• 幅広いブラウザのサポート（Chrome、Firefox、Edge、Safari 14）

Avif （AV1 Image File Format）はさらに次のようになります。

• jpegよりも最大50％小さい、webpよりもさらに良い
• HDR、幅広の色域、およびより高いビット深度をサポートします
• 高解像度の畫像に最適です
• ブラウザの成長サポート（Chrome、Firefox、Edge - しかし、2024年初頭にはサファリではありません）

？実用的なヒント：サポートされている場所でAVIFを使用し、WebPにフォールバックし、次に古いブラウザーにJPEG/PNGを使用します。

<picture></picture>要素を使用して提供できます。

 <picture>
  <source srcset = "image.avif" type = "image/avif">
  <source srcset = "image.webp" type = "image/webp">
  <img src = "image.jpg" alt = "記述テキスト">
</picture>

これにより、圧縮を最大化しながら互換性が保証されます。

畫像をWebpとAvifに変換する方法

すべての畫像を手動で変換する必要はありません。自動化します。

Webpの場合：

• cwebp （Googleのコマンドラインツール）を使用してください。
  cwebp -q 80 input.jpg -o output.webp
• または、ImageMagick、Squoosh、またはWebpackプラグインなどのツールを使用します（例： imagemin-webp ）

Avifの場合：

• avifenc （libavifから）を使用してください：
  avifenc --min 60 --max 70 --cpu-used 4 input.jpg output.avif
• squoosh.appのようなオンラインツールでは、品質(zhì)とサイズを視覚的に比較できます
• CMSプラグイン（WordPressなど）は、アップロードを自動変換できます

？プロのヒント： 70?85の品質(zhì)を目指します。多くの場合、90を超えると、ファイルサイズが大きくなると減少するリターンが増えます。

怠zyなロード：オフスクリーン畫像を延期します

最適化された畫像でさえ、すべてが一度にロードされた場合、ページを遅くします。怠zyな読み込みは、ビューポートに入ろうとするまで畫像の読み込みを遅延させます。

ネイティブレイジーロード（最もシンプル）： loading="lazy" <img alt="Webの畫像の最適化：Webp、Avif、およびLazy Loading" >タグに追加：

 <img src = "photo.jpg" alt = "Beach Sunset" Loading = "lazy">

• すべての最新のブラウザでサポートされています
• JavaScriptは必要ありません
• 折り畳みの下の畫像で動作します

より多くのコントロール（例、カスタムプレースホルダー、古いブラウザのサポート）：交差點オブザーバーAPIを使用してください：

 const images = document.queryselectorall（ 'img [data-src]'）;

const imageobserver = new IntersectionObserver（（エントリ）=> {
  entries.foreach（entry => {
    if（entry.isinterSecting）{
      const img = entry.target;
      img.src = img.dataset.src;
      img.classlist.remove（ 'lazy'）;
      ImageObserver.Unobserve（IMG）;
    }
  }）;
}）;

images.foreach（img => imageobserver.observe（img））;

htmlのように：

 <img data-src = "image.webp" src = "placeholder.jpg" class = "lazy" alt = "...">

？ベストプラクティス：

• レイアウトシフトを防ぐために、常にwidthとheight屬性を含めます
• 低品質(zhì)の畫像プレースホルダー（LQIP）またはソリッドカラーフォールバックを使用します
• ヒーローセクションまたはフォールドの上に怠zyなロード畫像はありません

ボーナス：最大のインパクトのために戦略を組み合わせます

実際のパフォーマンスゲインは、最新の形式とスマートロードを組み合わせることから生じます。

1. すべての畫像をAVIFに変換します（WebPフォールバック付き）
2. 適切に圧縮する- モバイルイメージを過度に資格を取得しないでください
3. さまざまな畫面サイズのsrcsetを使用してレスポンシブ畫像を提供します
4. 怠zyなすべてを折りたたみ下にロードします
5. 組み込みの畫像最適化を備えたCDNを使用します（例えば、Cloudinary、Imgix、またはCloudFlare畫像）

応答性とフォールバックの例：

 <picture>
  <source srcset = "large.avif" media = "（min-width：1200px）" type = "image/avif">
  <source srcset = "medium.avif" media = "（min-width：768px）" type = "image/avif">
  <source srcset = "large.webp" media = "（min-width：1200px）" type = "image/webp">
  <source srcset = "medium.webp" media = "（min-width：768px）" type = "image/webp">
  <img src = "small.jpg" loading = "lazy" width = "300" height = "200" alt = "応答畫像">
</picture>

Web畫像の最適化は1回限りの修正ではありません。これは、スマートフォーマットの階層化、レスポンシブ配信、効率的な読み込みです。 WebPとAvif Shrinkファイルサイズは劇的に、怠zyなロードによりページがきびきびとしています。それらを一緒に実裝すると、より速い負荷、より幸せなユーザー、より良いコアWebバイタルスコアが表示されます。

基本的に、怠zyなロードなしでまだプレーンなJPEGを提供している場合は、テーブルにパフォーマンスを殘しています。

以上がWebの畫像の最適化：Webp、Avif、およびLazy Loadingの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。