動画の再生：中央の再生ボタンをクリックした後、右下の全画面ボタンをクリックして大きな動画で御覧ください。再生終了後は、右下の「全画面表示を終了」をクリックすると元に戻ります。
画像を配置してソースを確認するとWebPとjpgの両方がある
BiNDupは画像を最適化してくれるという都市伝説があり、かなりの割合で撮影（もしくは素材で購入）した画像をそのままBiNDupで使っているというのがこれまでの経験からの印象です。
BiNDupがWebPに対応してから（確か、2021年春頃からだったと思います）は、BiNDupは画像をWebPに軽量化してくれるから画像はそのまま気にしないで使っているという声がさらに多くなったように感じています。
どうでしょうか？検証してみます。
素材サイトから6.8MB（大きさ：4959×3306px）の画像をダウンロードしたものを配置してみます。
プレビューでブラウザで開き、ソースを確認してみます。画像の部分のソースをみると.webpだけではなく、その下に.jpgの画像もあるのが確認できます。
<picture>
<source type="image/webp" srcset="_src/41979/5138626_l.webp?v=1637978723602">
<img src="_src/41979/5138626_l.jpg?v=1637978723602" alt="" id="imgsrc41979_1">
</picture>
現時点（2021.11月末）では、すべてのブラウザがWebPに対応しているわけではないので、WebPに対応していないブラウザで表示するためのjpg画像も合わせて最適化してデータとして抱えるようです。
1:08 音声なし
ブラウザによってjpgの画像が表示されます
<picture>タグで囲まれたjpgとwebpはどのように処理されるのでしょうか？
chromeとsafariでプレビューを確認してみました。
chromeでは、webpで表示されましたが、safariではjpgの画像を表示しているようです。調べてみるとsafariもBig Sur以降であればWebPに対応しているようなんでうすが、サイトリニューアルのご依頼などでお客様のサイトから右クリックで画像を持ってくるような時にjpgが表示されたほうが便利なこともありOSをBig Surにしていませんので、CatalinaでのSafariではjpgが表示されます。
chromeではwebpで表示されるので、右クリックから「名前を付けて画像を保存」を選択するとwebp形式の画像で保存されます。
| 参考 |
|---|
0:42 音声なし
_srcフォルダの画像を確認してみます
<picture>のソースを確認すると、画像データは _srcフォルダの中の41979フォルダにあるようですので、確認してみます。
_src/41979 の中に、jpgとwebpの２つの画像があります。それぞれを選択して簡単に確認すると、
| 5138626_l.jpg | 946KB（1440×960px） |
|---|---|
| 5138626_l.webp | 352KB |
のようです。元データが6.8MB（4959×3306px）だったことを考えれば、自動的に小さくはしてくれていることがわかります。
0:40 音声なし
COMMENT
RELATED POSTS
| [%category%] | [%title%] [%article_date_notime_dot%] |
|---|---|
