search

coderdojo-japan / map.coderdojo.jp

🗾 地図から探す CoderDojo『DojoMap』 - A map for visitors to find out a CoderDojo nearby.
https://map.coderdojo.jp
MIT License
9 stars 3 forks source link

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

Closed yasulab closed 1 year ago

yasulab commented 1 year ago

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

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

image

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

image

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 ではそもそもサポートされてなかった 😂

image

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

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

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

image

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

<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>