お疲れ様です、マツザワです。
桜も満開に近づいているこの頃です。
今回は次世代画像規格の簡単な説明をしてみようと思います。
今まで、webサイトでは.jpgや.pngの画像を使用しておりました。
これらは圧縮率や読み込み速度さらに透過の有無によって使い分けなければならないものでした。
しかし！
次世代画像なら一つの拡張子で済み、さらに高画質・低容量になったのです。
これは！！もう使うしかない・・・のですがここに別の問題が発生しました。
実は規格自体は2000年にはできていたのですが、如何せん次世代画像の規格が乱立して一つにまとまることがなかったのです。
その規格争いはJPEG 2000（safariで対応）、JPEG XR（IEとEdgeで対応）、WebP（ChromeとFireFoxで対応） の三者によるものでした。
とはいえ、今現在はgoogleのWebPが主流（まぁそうなるな）となりつつあり弊社もこちらに対応していく予定です。※ブラウザ対応率は約55％
既存サイトをWebPへ対応させる
対応は比較的簡単です。
WebP画像があればWebPを表示させ、なければjpgやpngを表示させるだけの話
◆手順
１、既存画像を変換しアップする
２、.htaccessに切り替え用の記述を追加する
３、ブラウザ検証ツールのネットワークで切り替わっているか確認する
おわり
なのですが、正直ソースごと書き換わっているわけではないので何かもやもやするところです。もちろん「PageSpeed Insights」ではしっかり適応＋点数向上が確認できます。
詳しくはこのすばらしい記事へ（丸投げ⁉）
WebPへ変換時の注意点
一つ注意しないといけないのは、既存画像のファイル名です。
たとえば一括変換時に「main_bg.jpg」と「main_bg.png」があった場合
「main_bg.webp」になり片方が消えてしまう点です。
ご注意ください。
こちらは「main_bg.jpg.webp」と「main_bg.png.webp」に変換してくれるツールを探しましょう。こことか
以上です。
ちなみにwebpの読みは「ウェッピー」だそうです。
かわいいですね（ﾆﾁｬｱ
それではまた( 0w0)ﾉ ｳｪｯﾋﾟｰ
