画像のファイル形式はJPGやPNGだけじゃありません。
次世代のファイル形式としてWebPがあります。
数年前よりブラウザの対応が進み、今ではWebPに対応しているサイトも多く見かけます。
ところが次世代ファイル形式はWebPだけじゃありません。AVIFもあるのです。
結論を先に言うと、WebPよりAVIFの方が優秀です。ブラウザの対応も進んでいますから、JPGやPNGから乗り換えを考えていた方はAVIF導入を検討するといいでしょう。
ジョン齊藤AVIFはまだあまり見かけないね！
Web犬タロウ次世代のファイル形式に対応させる方法は簡単。
対応するだけでも、ページの重さがかなり改善できるよ！
とは言え、AVIFは2020年に発表されたばかりの最新ファイル形式です。
WordPressがまだ非対応、そして対応しているプラグインも有料版のみとなります。
現状はWebPを使い、WordPressやプラグインで対応し始めたら使うのがベストな選択と言えます。
「AVIFが一番いいのであれば今すぐ対応させたい」
という方のために対応させる方法もまとめました。
この記事を最後まで読めば次世代ファイル形式についての知識が一通りわかります。
それでは、さっそく始めていきましょう。
なぜ画像ファイル形式を変える必要があるのか
従来のファイル形式はJPG（ジェイペグ）そして、PNG（ピング）を使うというのが一般的でした。
しかし、それらのファイル形式が発表されたのが1990年代です。
もちろん当時はインターネット黎明期のため、現在のようにググったりネットで画像を見ることが一般化されていることは想定されていません。
| ファイル形式 | 発表 | 圧縮 | 透過 | メモ |
|---|---|---|---|---|
| JPG | 1992年9月18日 | 非可逆圧縮 | 非対応 | 保存を繰り返すと画像が劣化する |
| PNG | 1996年10月1日 | 可逆圧縮 | 対応 | JPNより重い / 保存を繰り返しても劣化しない |
SEOと画像の関係
WordPressの表示速度はSEOにおいて重要です。
ページが重いとサイトの離脱率が上がり、結果ユーザービリティに影響してしまいます。
大きな画像を使ったり画像を多く扱うコンテンツでは、JPGやPNGをそのまま使用するとページがかなり重くなります。
使えば使うほど重くなりそれではSEO的によろしくありませんから、対処法として画像を圧縮するかファイル形式を変更する必要があるわけです。
画像を圧縮する方法はいくつかありますが、Web上の画像圧縮ツールを使うのが一番簡単。
Optimizillaなら簡単便利に画像を圧縮することができます。
とはいえ、圧縮率には限界があります。
Optimizillaは圧縮率を変更することができますが、JPG・PNGともに圧縮率を多くすればするほど画像が劣化してしまいます。
ユーザービリティを考えたら軽いだけでは限界があり、やはり「軽さ＆綺麗さ」この2つをクリアするのが条件になってくるわけです。
そこで使いたいのがWebPやAVIF。
次世代画像ファイル形式なら、画像が綺麗なまま高圧縮で使用することができます。
ジョン齊藤当ブログの画像は全てWebPを使っています。
使った感覚、JPGやPNGの圧縮よりWebPの方がデータサイズが小さいです。
Web犬タロウWebPがどんなファイル形式なのか見てみよう！
次世代画像ファイル形式WebP
WebP（ウェッピー）はGoogleが開発した次世代のファイル形式です。
ファイルの拡張子は「.webp」。2010年に発表されました。
「ページのトラフィック量軽減」「表示速度短縮」
この2つがWebPが作られた目的です。
綺麗な画像を維持したまま高圧縮というのがその特徴。
さらにアニメーション（GIF）と透過（PNG）という、GIFやPNGのいいとこ取りの高性能画像ファイル形式、それがWebPです。
| ファイル形式 | 発表 | 圧縮 | 透過 | アニメーション |
|---|---|---|---|---|
| WebP | 2010年9月30(米国時間) | 可逆圧縮＆非可逆圧縮 | 対応 | 対応 |
Google公式の発表によると、WebPのデータ容量はPNGと比較して26％の縮小。JPGは25～34％の縮小になります。
参考 : ウェブ用の画像形式 | Google Debelopers
ジョン齊藤PNGを圧縮するのにWebサービスを使っています。
PNG・JPEGをWebP画像に一括変換というWebツールを利用していますが、WebP実際の圧縮率は公式発表よりかなり大きくだいたい1/2から1/10の圧縮率です。
Web犬タロウ「WebPはメリットだらけ」でも対応していないサイトも多い！Webpにするだけで差が付く、ワン！
現在は多くのブラウザに対応している
このWebPは、条件としてユーザーが使用するブラウザが対応していないと表示させることができません。
数年前までは少なかった対応ブラウザも、現在では多くのブラウザが対応しています。
画像引用 : WebP image format | CanIUse
いまだWebPに対応していないのは、IEのみ。
元々IEユーザーだった人も、Windows10から標準搭載のEdgeに移行しているでしょうから、現在ほぼ全てのブラウザがWebPに対応しているというのが正しいかと思います。
Web犬タロウWebPはメリットだらけだワン！
ほぼ全てのブラウザに対応しているなら、使わない理由はないね！
ジョン齊藤最近WebPに対応しているWebツールやページを見る機会が増えましたから、ここまではわりと知られている情報かと思います。
次の章からはもう少し踏み込んで
「AVIFとは何なのか」「結局WebPとAVIFどっちがいいの？」
というところまでまとめでいきたいと思います。
次世代ファイル形式AVIF
AVIF（エーブイアイエフ）は、2019年2月に発表された新しい次世代ファイル形式です。
AVIFは「AV1 Image File Format」の略で、ファイル拡張子は「.avif」。
AVIFはWebPの後継的な立ち位置で、その圧縮率はWebPより優れているとされています。
| ファイル形式 | 技術 |
|---|---|
| WebP | VP8 |
| AVIF | VP9 |
参考 : WebP | Wikipedia
参考 : AV1 | Wikipedia
Web犬タロウAVIFの方が新しいファイル形式なんだよ！
AVIFはデジカメやIPhoneカメラなどで使われているファイル形式HEIFが元になっています。
HEIFは、動画圧縮を静止画像に応用した技術です。動画を書き出すときにH.265という形式がありますね。
動画がHEVCで画像版がHEIFというわけです。
画質を落とすことなく、かなり圧縮することができます。
圧縮は可逆圧縮か非可逆圧縮を選択できることができて、もちろん透過やアニメーション対応です。
| ファイル形式 | 発表 | 圧縮 | 透過 | アニメーション | メモ |
|---|---|---|---|---|---|
| AVIF | 2020年2月 | 可逆圧縮か非可逆圧縮を選択できる | 対応 | 対応 | HDR対応（光をリアルに再現する次世代技術） |
また、AVIFについている機能で注目したいのがHDR。
これは次世代の技術で、光をリアルに再現することができるというもの。
それにより写真の光具合いを再現できる幅が広がりますから、とにかく綺麗な画像にこだわりたいというコンテンツはAVIF一択です。
ジョン齊藤WebPより圧縮率が高く、HDRに対応しているならAVIFで決まりだね？
Web犬タロウちょっと待って！AVIFはまだ発表されたばかりのファイル形式。デメリットもあるんだよ
結論→AVIFの方がいい「導入の壁」
このようにWebPとAVIFを比べると、圧縮率が非常に高いAVIFの方が断然いいです。
ですが、WordPressはAVIF非対応。対応プラグインも数が少ない上に有料版ばかりです。
いずれWordPressやプラグインで対応されるでしょうから、それまではWebPを使って対応したらAVIFを使うというのが現時点で考えられるベストな対応なのではと思います。
また、AVIFにはまだ対応していないブラウザもあります。
AVIFの2つのデメリット
すでにWordPressやブラウザの対応化が済み、あとは普及するだけというWebPに比べ、まだ比較的新しいファイル形式のAVIFには2つのデメリットがあります。
- 非対応ブラウザがある
- WordPressが対応していない
非対応ブラウザがある
まずはブラウザの対応表を見てみましょう。
緑色がすでに対応しているバージョン。下に行くほど最新バージョンになります。
参考 : AVIF image format | CanIUse
ご覧のように、わりと対応していますがEdgeやいくつかのブラウザがまだ未対応です。
ChromeやSafari、Firefoxなどが最新バージョンで完全対応していますから問題ないとも言えますが、ページ画像をAVIFに対応させるとEdgeユーザーが見れない状態になってしまいます。
Edgeユーザーもわりといることが予想できますので、これは現時点の大きなデメリットと言えます。
とは言え、今後AVIF対応ブラウザも普及が進んでいくと思われるので、1～3年後にはさほど気にならない状態になると言えるでしょう。
WordPressに対応していない
そしてAVIFを導入する2つ目のデメリットが、そもそもWordPressに対応していないということです。
試しにPNGをAVIFに変換してみましょう。
AVIFに変換するWebツールの情報はまだ少ないようですが、ググればいくつか出てきます。
WebPに比べさらにデータ量が1/2に圧縮できます。
元のPNGのデータ容量が56KBなのでWebP、そしてAVIFがかなりの圧縮率だということが一目瞭然です。
このようにかなりの圧縮率を誇るAVIFですが、新しいファイル形式のためまだWindowsやWordPressに対応していません。
WindowsでAVIFを開くためには、拡張機能やソフトをインストールする必要がありますし、WordPress公式でまだ非対応なのでアップロードすることができません。
AVIFをWordPressに対応させる方法
WebPのようにAVIFもいずれはWordPressに対応する可能性があるかと思いますが
「そんなの待てない！今すぐ対応させたい」という方のために、今すぐ対応させる方法をご紹介したいと思います。
プラグインで対応
AVIFを対応させるためのプラグインとして、提供されているのがConverter for Mediaです。
Converter for Mediaは、JPGやPNGといった従来のファイル形式をWebPやAVIFに対応させサイトを高速化することが目的のプラグインになります。
このプラグイン、導入するのは簡単でインストールして有効化して少し設定をいじればその後にアップロードした画像を全て次世代ファイル形式に自動変換してくれます。
次世代ファイル形式がブラウザ非対応だった場合は、元のJPGやPNGで表示されるという仕様。
緑色のロケットアイコンが目印です。
WordPress管理画面左メニューから「設定」→「Converter for Media」→「一般設定」
デフォルトで「WebP」にチェックが入っているので「/themes」にチェックを入れるだけです。
画像
お目当てのAVIFは有料版のみ利用できるようです。
月額または年額のサブスクで、月額なら5ドル～25ドルになります。
すでにアップロードされているJPGやPNGをWebPに変換することもできるので、過去の記事数が多くて次世代ファイル形式を導入したいという場合はおすすめのプラグインです。
それ以外にも「ShortPixel Image Optimizer」など、AVIFを対応させるプラグインがあります。
ただし、有料版が多く日本語の情報が少ないので使用する場合はしっかり調べてからすることをおすすめします。
「.htaccess」や「functions.php」をいじる
また、プラグインではなく「.htaccess」や「functions.php」を直接いじって、WordPressにAVIFを対応させる方法もあります。
ジョン齊藤今回色々試してみましたが、無理でした。
試した環境テーマはSWELLですが、テーマによってできるできないがあるかもしれません。
Web犬タロウ「functions.php」は間違えると画面がホワイトアウトする可能性があるので気を付けよう！
まとめ
まとめです。
今回は、次世代ファイル形式「WebP」と「AVIF」どっちがいい？
というお題で解説しました。
結論としてはAVIFの方が画像ファイル形式として優秀で、できることならAVIFに対応させた方が良いです。
ですが、新しいファイル形式なのでまだWordPress未対応で、対応しているプラグインも少ない上に有料版というのが現状。
現時点で考えられるのは、WordPressやプラグインのAVIF対応を待ちながらWebPで画像をアップするのがベストではないかと思います。
また、Googleが開発していた次世代ファイル形式「JPEG XL」の対応を外すことを決めました。
今後は今回紹介した「WebP」や「AVIF」の機能を向上させたりすることに注力するようです。
Googleは現在「WebP2」の開発を進めていますが、それを今後実装させる予定は今のところないとのこと。
WebP 2 は、WebP に基づく実験的な画像コーデックです。WebP 2 は画像形式としてはリリースされませんが、画像圧縮実験の遊び場として使用されます。
このパッケージには、他のプログラムで Webp 2 画像をエンコードまたはデコードするために使用できるライブラリと、コマンド ライン ツールが含まれています。
引用 : WebP 2 | Google Git
今回の記事は以上です。
最後までありがとうございました。
