昨日の記事では主要なブラウザ全てに対応しているわけではないため、不採用としました
https://taberu-salad.hatenablog.com/entry/img-optimisationtaberu-salad.hatenablog.com
しかし、全てに対応していないなら、ブラウザによって使い分ければ良いのです
ブラウザによって表示画像を分ける
Webブラウザによって画像の出し分けをするのに、HTMLのpicture要素を使います
<picture> <!-- WebPに対応しているブラウザではWebPの画像を表示する --> <source srcset="/images/image.webp" type="image/webp"> <!-- WebPに対応していないブラウザではJPEG 2000の画像を表示する --> <img src="/images/jpeg2000.jpg"> </picture>
画像の変換
便利なサイトがありました
WebP
JPGをWebPに変換 — オンラインコンバーター — Convertio
convertio.coでJPGをWebPに無料変換。視覚的品質を保ちながらファイルサイズを削減 — 最新のWebP圧縮でサイト表示を高速化しましょう。
convertio.co
JPEG 2000
JPGをJP2に変換 — JPEG 2000形式 — Convertio
convertio.coでJPGをJP2（JPEG 2000）に無料変換。ウェーブレット圧縮で低ビットレートでも高画質を実現する次世代フォーマットへの変換が簡単に。
convertio.co
はてなブログの壁
未対応のようです。
WordPressの壁
では、WordPressならどうか
WordPress環境でも、WebPをアップロードしようとすると
セキュリティ上の理由によりこのファイル形式は許可されていません。
とエラーメッセージが表示されるようです。
まとめ
