HTML 5画像タグを使っているウェブサイトで異なるイメージ形式に貢献する方法?

Originally posted here!

なぜ我々は異なるイメージ形式を提供する必要がありますか?
の導入以来WebP Googleのイメージ形式は、サイトの多くは、以来、パフォーマンスを高めるためにWebP形式を使用して変換されてJPEG イメージは、より大きいですWebP そして、ロード時間は恐ろしいですJPEG イメージ.
しかし、まだWebPはブラウザの多くによってサポートされていませんJPEG if the WebP イメージがサポートされていません.WebP 画像に可逆および損失圧縮を提供します.
WebPのイメージ形式のパフォーマンスについての詳細を知るには、ブログをチェックアウトすることができますWebP Images & Performance on davidwalsh.name .

これの使い方?
異なる画像形式を提供するには、<picture> HTMLタグと異なるソースを提供する<source> タグ.ソースタグはフォールバックのように動作します.どのようにしているか見てみましょう.
つのイメージがあると言いましょうjpeg 形式とwebp 形式.
私たちの目標はwebp イメージがサポートされている場合、それがブラウザによってサポートされていない場合、それはjpeg イメージ.
まず書きましょうpicture このようにタグを付けます.

<picture>
  <!-- Picture Tag -->
</picture>

その後、Aを作る必要がありますsource タグ付きでsrcset and type 属性

<picture>
  <source srcset="" type="" />
</picture>

あなたのソースを渡す必要がありますwebp イメージインザsrcset 属性と画像の型image/webp このように.

<picture>
  <source srcset="myImage.webp" type="image/webp" />
</picture>

また、提供しましょうjpeg ブラウザがサポートしていない場合にwebp 形式.

<picture>
  <source srcset="myImage.webp" type="image/webp" />
  <source srcset="myImage.jpeg" type="image/jpeg" />
</picture>

これは実際に行われますが、ブラウザがサポートしていない場合<picture> タグ自体を追加しましょうimg 内部タグpicture このように、すべてのブラウザに表示される画像が保証されます.😃

<picture>
  <source srcset="myImage.webp" type="image/webp" />
  <source srcset="myImage.jpeg" type="image/jpeg" />
  <img src="myImage.jpeg" alt="A JPEG Image" />
</picture>

以上です.🌟.
それをよりよく理解するためにJSBin .
あなたがChapterブラウザでこのリンクを見るならば、それはSafariブラウザでそれを見るならば、家(WebPイメージ)のイメージを示しますリス(JPEG画像)のイメージが表示されます.

お気軽に共有する場合は、この便利な発見😃.