Lighthouse で画像フォーマット (webp) で怒られるんですが...

[wadackel]

質問をしたいAMAブース

• [ ] Web Payments / Payment Request API について何でも訊いて下さい by えーじ
• [ ] AbemaTVだけど質問ある？（AbemaTV関係ない質問でもいいです）by Kenichi Kato, Tetsuharu OHZEKI, and Shota Kubota
• [ ] 日経電子版の高速化について何でも聞いてください by sisidovski and cssradar
• [ ] Fastly のエッジクラウドについて何でも聞いてください by Fastly
• [x] Web パフォーマンスについて何でも訊いて下さい by Ayumu Sato and Shogo Sensui
• [ ] freeeのアクセシビリティ、いまとこれから by 伊原 力也
• [ ] 現場の ES201x とアーキテクチャの変遷と未来 by mizchi
• [ ] デザインとエンジニアリングのワークフローについて語りましょう by Hidemi Atarashi, Kensuke Takada, Masanari Hamada
• [ ] コンポーネント座談会 by pirosikick, 伊藤康太, 加藤佑典

質問

Lighthouse で画像フォーマットで webp にしてくれ、と指摘が入るのですがまだブラウザサポートの関係で導入が難しいです...。 そのせいで100点を達成できないのが悔しいです。

[wadackel]

回答

• 必ずしも webp に拘らな過ぎなくてよいかと思います。 (By 1000ch)
• Lighthouse は必ずしも100点を取る必要はありません。(By @agektmr)

高いスコアを目指すべきではありますが、あくまで改善の指標として使用できるのが良いかなと思います。

対策

• jpg と webp を用意して <picture> で出し分ける
  • ただし工数が増えてしまうので、Pros, Cons を考慮する必要がある
    • <picture> に対応していないと駄目
    • CSS、HTML での扱いが煩雑になる
    • 画像の入稿が必要な場合に、jpg に加えて webp もアップロードする必要があったりする
• WebAssembly で変換するという方法がある..!?
  • ブラウザサポート... :innocent:

どちらも作業工数、運用コストに大きく影響が出るので、諦めざるを得ないというのが今のところ現実的かもしれません。