[DON'T MERGE] Try using WebP images in marker description

[yasulab]

（追記）結論: coderdojo.jp 側が WebP 画像に対して text/plain の Content-Type で返していたのが原因でした 😂😂😂

また Content-Type が text/plain となっているのは Rails ではなく Heroku 側の仕様のようで、Rails ではなく Static Site としてデプロイされている別サイトでも同様の現象が確認できました。速度的にも負荷的にも DojoMap のリポジトリ内で画像をキャッシュした方が良さそうなので、今回は画像をキャッシュする方向で対応します！🛠💨✨ → #9

---

同じドメインでも別 URL （localhost 含む）からだと WebP は読み込めない...? 🤔💭

NOTE: 各 Dojo のロゴ画像は現在 *.png と *.webp の２つが用意されている: https://github.com/coderdojo-japan/coderdojo.jp/tree/main/public/img/dojos

https://coderdojo.jp/img/dojos/maebashi.webp

<img src='https://coderdojo.jp/img/dojos/maebashi.webp' alt='前橋' loading='lazy' width='100px' />

↑ GitHub ではそもそもサポートされてなかった 😂

https://coderdojo.jp/img/dojos/maebashi.png

<img src='https://coderdojo.jp/img/dojos/maebashi.png' alt='前橋' loading='lazy' width='100px' />

分かったこと: 外部の WebP 画像読み込みは色々設定が必要? 内部からなら WebP 画像は読み込める e92aaa0

追記: こういう書き方でブラウザに適切な読み込み方法を対応する方法もあるっぽい 👀 ✅ けどいずれにせよコレだけでは別ドメインにある画像は読み込めないっぽかった 😂

<picture>
  <source srcset='#{dojo[:logo]}'                       type='image/webp'>
  <source srcset='#{dojo[:logo].gsub('.webp', '.png')}' type='image/png'>
  <img src='#{dojo[:logo].gsub('.webp', '.png')}' alt='#{dojo[:name]}' loading='lazy' width='100px'>
</picture>