顧客向けに作成したRetina対応のサンプルですが、
せっかくなので公開します。

顧客向けに作成したRetina対応のサンプルですが、せっかくなので公開します。

webp非対応環境：jpg1536
webp対応環境では、画面サイズやRetina画面に応じて表示画像がかわり、webp768、webp1536、webp400、となります。768ピクセルで切り替えています。つまり、768ピクセルよりワイドな画面でRetinaですと、webp1536が表示され、767ピクセルより小さい画面で、非Retinaの場合はwebp400が表示されます。

https://itup.me/faq_cms/sample-design/img-quality-test/img-html5/

有効なHTML仕様は、2021年1月29日からHTML Standardとなったようなので、この点の対応も検証してサンプル作成してみます。