ついにSafari 14で次世代画像フォーマットWebPに対応！画像フォーマット戦争が終結し歓喜したお話。

珍しくちゃんとフロントエンジニア（まーくあっぷおじ）らしいことを記事にします。(^ρ^)

先日のApple社の発表、WWDCご覧になりましたか？

Safari 14でついにWebP （ウェッピー）に対応！

そもそもWebP （ウェッピー）ってなんぞやってお話なのですが、
WebP は Google によって作成された画像フォーマットのことで、透過してアニメーションもできる jpg に近いというものです。

で、結局の所なにが言いたいかと言うと、jpg でなくてもほとんどのWebサイトやアプリ上で利用する画像フォーマットはもう今後ほぼ WebP + svg で統一できるのではないかというお話です。

そもそも世の中に蔓延る画像フォーマットとは

Webに特化したフォーマットのお話になりますが、
・jpg（jpeg ともいうやつ）
・gif（じふって読むよ。岐阜じゃないよ。）
・png（ぴんぐ。後ででてくる APNG も近しいものだよ。）
・svg（えすぶいじー。スケーラブル・ベクター・グラフィックス。厳密には画像じゃない）
大まかに言うとこの4種。

で、この内殆どのWebサービスで色んな人が目にしたことがあるメジャーなフォーマット名「jpg」というのがあると思うのですが、こやつが「WebP」にとって変わられるのではなかろうかというお話です。

「WebP」どれぐらいいいやつなの？

んなら、比較としてどの程度違うものなのか。ここのかとうか。

■jpg
・フルカラーの1,677万色
・非可逆圧縮（圧縮前の状態に戻せない圧縮のやり方）
・アルファチャンネル無し（いわゆる一部だけを透かす透過処理などができない／アルファチャンネル有りにすると保存形式が JPEG2000 ＝ JPF になるので今回は割愛）
・どんなブラウザでも描画、利用できる

写真など色合いにグラデーションがある画像に適しているファイル形式。
どのブラウザでも使える汎用規格というのが魅力だった。

■WebP
・フルカラーの1,677万色（jpg と同じ）
・非可逆圧縮（jpg と同じ）
・アルファチャンネル有り
・透過してアニメーションもできる（静止画の WebP は1フレームのアニメーション）
・圧縮率が jpg より高い＝データが軽い（ jpg と比較して25-34%小さくなるほとんど場合で）



な　　　ん　　　や　　　こ　　　れ
という超ハイスペック。


・透過できる
透過する画像を利用する場合は予てから png という別のフォーマットを利用していましたが、それよりも軽いのに透過できるなら WebP でええやんということになります。

・データが軽い
既存のファイルよりもデータが軽いということはより重いデータを取り扱ったリッチなコンテンツを描画しやすくなります。
ただ、これには諸説あって条件によっては大したこと無いんじゃね？という見解もあったりはします。
参考サイト：Is WebP really better than JPEG?
https://siipo.la/blog/is-webp-really-better-than-jpeg

・動かせる
アニメーション画像として利用できるということです。Webサービスやアプリケーション上で動画ファイルではなく、画像でアニメーションしているものはほぼすべて gif or APNG（アニメーション png）でした。
それらを WebP で統一できる。

ていう化け物です。

ついに日の目を見る時が来た。

この「うぇっぴー＾＾」さんは今までずーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーっと
「商売敵 Google はんが作ったやつやし、うち（Apple）のSafariでは使えるようにしてまへんねや！」
と言うてたかはさておき、macOS や iPhone、iPad の Webブラウザ「Safari」でだけは動かない（描画できない）フォーマットでした。

参考サイト：Can I use

他のブラウザ（Edge/FireFox/Opera/Google Chrome）では動くのに。
（IE？ぜっっったいにゆるさ…だから論外です）

が！！！！！！！重い腰があがったのか、
次世代の「macOS Big Sur」で実装される「Safari」バージョン 14で利用可能となるとディベロッパーサイトでアナウンスがされましま！！！
今回の1枚目の画像です。

Safari だけ非対応だからいくらデータが軽くても WebP の利用を見送る…。もしくは基本的に WebP を描画させてSafariでアクセスしてきたユーザーに対しては「jpg or png」を表示させるというめんどーーーーーーーーーーーーーーーなことをやってきていたのですが、2021年からリリースするやつはWebP で全部いけるんじゃーーーーーーってなるということです。

最も規格の入れ替わりというわけですから、実装やそもそも各種生成デバイスやソフトウエアが整わないと使いにくいものですが、それは年末に向けてエンジニアの皆様が開発を進めてくれるはずアンド実装が楽な生成手段が増えるので期待したいところです。

完全に今進めている実装がマッチしてHighになった

で、わたしの場合は現在絶賛構築中の案件で Gatsby.js を用いて超絶軽くて楽しい静的サイトを作っていて、メイン画像フォーマットが
 WebP ！！！！！！！！！！！！！！！！！！！！！！

gatsby-image

gatsby-imageは、GatsbyのGraphQLクエリとシームレスに連携するように特別に設計されたReactコンポーネントです。Gatsbyのネイティブ画像処理機能と高度な画像読み込み技術を組み合わせて、サイトの画像読み込みを簡単かつ完全に最適化します。gatsby-plugin-sharp をgatsby-image使用して画像変換を強化します。

何が言いたいかと言うと自分が先見の明があったとか、そういうちゃちなことではなく、

Gatsby.js を用いて今実装を進めていたサイトやフレームワークが
完全に未来と合致して全く無駄にならずに知見が高められるというミラクルにたどり着いた

のが、すごおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおくうれしい！！！ということなのです。
これを神に感謝せずに誰に感謝するのか。

もしAppleが「WebP 使わん。Safariは前から推してる JPEG 2000 だけじゃい！！」って言うてたら、別にわたしの実装は無に帰するわけではありませんが、「Sam の作るサイト、Safari ではなんか読み込み遅くね？」ってならなくて済むのです！！！！
（最も、Safari 14が公開されてからシェアが一定水準に到達するまではWebP と jpg の出し分けをフロントエンド側で行う仕組みを残したままにはなりますが。。）

結論。

Webサービスエンジニアやアプリエンジニアのみんな！
WebP、つかってくれよな！！！！！