次世代フォーマットの画像を表示する

f:id:taberu_salad:20190808180220p:plain

昨日の記事では主要なブラウザ全てに対応しているわけではないため、不採用としました

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の画像を表示する -->
<imgsrc="/images/jpeg2000.jpg">
</picture>

画像の変換

便利なサイトがありました

WebP

JPG WEBP 変換。オンラインフリー — Convertio
数秒でJPGをWEBPファイルへ変換する最良の方法。 100%無料で、安全、そして使いやすい! Convertio — いかなるファイルのどんな問題も解決する高度なオンラインツール。

JPEG 2000

JPG JP2 変換。オンラインフリー — Convertio
数秒でJPGをJP2ファイルへ変換する最良の方法。 100%無料で、安全、そして使いやすい! Convertio — いかなるファイルのどんな問題も解決する高度なオンラインツール。

はてなブログの壁

f:id:taberu_salad:20190808175742p:plain

未対応のようです。

WordPressの壁

では、WordPressならどうか

WordPress環境でも、WebPをアップロードしようとすると

セキュリティ上の理由によりこのファイル形式は許可されていません。

とエラーメッセージが表示されるようです。

まとめ

f:id:taberu_salad:20190808175729p:plain

参考

コメント

タイトルとURLをコピーしました