<!DOCYTPE html>

<title>picture elementでwebpフォーマットを使おう</title>

<meta charset="UTF-8">

<meta name="robots" content="none" >

<style>

main{

    max-width:600px;

    margin:50px auto;

}

picture > img{

    max-width:100%;

}

</style>

<main>

    <h1>picture要素で簡単webp</h1>

    <picture>

        <!-- 上から順にテストされるから注意！ -->

        <source type="image/webp" srcset="https://www.gstatic.com/webp/gallery/5.webp">

        <!-- image/webpをサポートしていなくても image/hogeをサポートしていればこのsourceが利用される -->

        <source type="image/hoge" srcset="http://example.com/fuga.hoge">

        <!-- fallback として<img>なjpegやpngも用意するとpicture要素をサポートしていない場合でも代わりにこの<img>が表示される -->

        <img src="https://www.gstatic.com/webp/gallery/5.jpg" alt="ヨガファイア">

    </picture>

​

    画像の<a href="https://developers.google.com/speed/webp/gallery1">ライセンスとソース</a>はここを参照<br>

    <hr>

    blogの記事「<a href="https://srytk.com/422.html">picture要素でwebpフォーマットを手軽に使おう</a>」の為に作成

​

</main>