サイト速度改善シリーズ画像編！
今回は画像のフォーマットについてお話したいと思います。
💁♀️
フォーマットを適切に使用することはサイト速度に大切なんだ。今回はどういったフォーマットがあるか、注意点、簡単に変換できる方法などを話すよ。
-
Strory
- 画像のフォーマットの種類
- 主な画像フォーマットの一覧
- 画像フォーマットのファイルサイズの比較
- 各画像フォーマットのブラウザ対応状況
- ブラウザ別の画像の出し分け方法
- 簡単に画像のフォーマットを変換するサービス
画像のフォーマットの種類
一般的に昔から使用されている画像の形式はjpg, png,gifが多いと思いますが、最近では圧縮率が高く、ファイルサイズがより小さい次世代フォーマットでの画像配信に注目が集まっています。
これらのフォーマットを適切に使い分けることがサイトの速度改善の鍵になってきます。
それではフォーマットの種類やファイルサイズの違いを見ていきましょう。
主なフォーマットの一覧
次世代フォーマット含む主な画像フォーマットを一覧にまとめておきます。
- JPG
- PNG
- GIF
- SVG
- WebP（次世代）
- JPEG XR（次世代）
- JPEG 2000（次世代）
サイトの速度を改善する上で、これらのフォーマットを適切に使い分けていくことが必要になります。
まず適切に使い分けるためにファイルサイズの違いを知っておきましょう。
画像フォーマットのファイルサイズの比較
以下の画像（元は横3600px、縦2403px）のフォーマット別のサイズを比較してみました。
| 形式 | JPG | PNG | GIF | WebP | JPEG XR | JPEG 2000 |
|---|---|---|---|---|---|---|
| サイズ（KB） | 2,264 | 13,975 | 6,600 | 2007 | 2000 | 1740 |
JPG、PNG、GIFの3つの比較で見るとJPGが圧倒的にサイズが小さいことが分かります。
さらに次世代フォーマットはJPGよりもサイズが小さくなっています。
「じゃあ次世代フォーマットを使うのが一番だね！」と思っている方、ちょっと待ってください。
次世代フォーマットは新しい画像の配信形式です。
新しいということは、、、みんなが嫌いなブラウザの対応がまだされていない問題に直面します。
各画像フォーマットのブラウザ対応状況
次世代フォーマットについてブラウザの対応状況をまとめてみました。
（2020年3月6日の情報です。）
| ブラウザ | IE (11) |
Edge (80) |
Firefox (73) |
Chrome (80) |
Safari (13) |
iOS Safari (13.2) |
Chrome for Android (80) |
|---|---|---|---|---|---|---|---|
| WebP | × | ○ | × | ○ | × | × | ○ |
| JPEG XR | ○ | × | × | × | × | × | × |
| JPEG 2000 | × | × | × | × | ○ | ○ | × |
結果から言えることは主要ブラウザ全てに対応している次世代フォーマットはない！ということ。
😅
GoogleはWebPを推してて、AppleはJPEG 2000を推してるらしく、なんかもっと、こう、、統一してほしい！
切実に全ブラウザ対応の 次世代フォーマットが出てくることを待っています。
話が少し脱線してしまいましたが、ブラウザ対応を見ると、やっぱり次世代フォーマットはまだ使わない方がいいのかと思う方が多いと思います。
でもブラウザ別に画像のフォーマットを変えて表示することは可能なので、サイト速度の改善に熱意のある方に対してその方法を説明いたします。
ブラウザ別の画像の出し分け方法
いくつか方法があるので、それぞれの対応方法をまとめておきます。
pictureタグを使う
例えば
- webP対応のブラウザではwebPで画像を表示
- webP非対応でJPEG XR対応のブラウザではJPEG XRで画像を表示
- 上記以外のブラウザではJPGで画像を表示
したい場合は以下のようにコードを書きます。
<picture>
<source type="image/webp" srcset="example.wep">
<source type="image/wdp" srcset="example.wdp">
<img src="example.jpg">
</picture>sourseタグは上から順に優先度が高くなるので、一番表示したいフォーマットから順に書いてください。
pictureタグはフォーマット別に画像の準備が面倒ですが、一番簡単な方法です。
ただしIEは非対応なので注意が必要です。
IEでも picture に対応させたい場合は、picturefill という JavaScript のライブラリーを使ってください。
javascriptのブラウザ判別を使う
javascriptを実装したことのある人ならお馴染み、javascriptのブラウザ判別を使って画像を出し分けることも可能です。
が、pictureタグよりかなりめんどくさくなってくるので、あまりおすすめしません。
今回は「javascriptでもできるよ〜！」ということをお伝えして終わろうと思います。笑
ここまで読んで、よし、画像のフォーマットを最適化しよう！と思っている方に向けて、簡単に画像のフォーマットを変換するサービスをご紹介します。
簡単に画像のフォーマットを変換するサービス
コンテンツ最適化配信サービス「Cloudinary」を使えば簡単にフォーマットを変更することができます。
Cloudinaryのメリットとしては
- フォーマット含め画像の加工が楽
- 25クレジット/月まで無料
- プラグインが豊富
個人ブログならばおそらく無料の範囲で使用でき、Wordpressやheroku、PythonやPHPなどのWebフレームワークと簡単に繋げることができるプラグインがあります。
Cloudinaryでフォーマットを変更する方法
まず新規登録後のダッシュボードの上記メニューのMedia Libraryに行きます。
Media Libraryの右上に画像を追加ボタンがあるので、画像を追加してください。
次に追加された画像の編集画面に行くと、画面の左側でサイズやデザインを変えることができます。
その中にFormatの項目があり、そこから好きなフォーマットを選択するだけで、右下にURLが表示されます。
まとめ
画像フォーマットには様々な種類があることをお話いたしました。
画像フォーマットを使い分けるためにはファイルサイズがどれぐらい違うのか、ブラウザの対応状況を把握しておくことが大切です。
もし画像フォーマットを最適化するぞぉー！と熱意のある方はぜひ、Cloudinaryを使ってみてください。