昨日の記事では主要なブラウザ全てに対応しているわけではないため、不採用としました
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
数秒でJPGをWEBPファイルへ変換する最良の方法。 100％無料で、安全、そして使いやすい！ Convertio — いかなるファイルのどんな問題も解決する高度なオンラインツール。
convertio.co
JPEG 2000
JPG JP2 変換。オンライン フリー — Convertio
数秒でJPGをJP2ファイルへ変換する最良の方法。 100％無料で、安全、そして使いやすい！ Convertio — いかなるファイルのどんな問題も解決する高度なオンラインツール。
convertio.co
はてなブログの壁
未対応のようです。
WordPressの壁
では、WordPressならどうか
WordPress環境でも、WebPをアップロードしようとすると
セキュリティ上の理由によりこのファイル形式は許可されていません。
とエラーメッセージが表示されるようです。
まとめ
