スタッフのつぶやき

次世代画像について

  • このエントリーをはてなブックマークに追加
次世代画像について

お疲れ様です、マツザワです。

桜も満開に近づいているこの頃です。

今回は次世代画像規格の簡単な説明をしてみようと思います。

今まで、webサイトでは.jpgや.pngの画像を使用しておりました。

これらは圧縮率や読み込み速度さらに透過の有無によって使い分けなければならないものでした。

しかし!

次世代画像なら一つの拡張子で済み、さらに高画質・低容量になったのです。

これは!!もう使うしかない・・・のですがここに別の問題が発生しました。

実は規格自体は2000年にはできていたのですが、如何せん次世代画像の規格が乱立して一つにまとまることがなかったのです。

その規格争いはJPEG 2000(safariで対応)、JPEG XR(IEとEdgeで対応)、WebP(ChromeとFireFoxで対応) の三者によるものでした。

とはいえ、今現在はgoogleのWebPが主流(まぁそうなるな)となりつつあり弊社もこちらに対応していく予定です。※ブラウザ対応率は約55%

既存サイトをWebPへ対応させる

対応は比較的簡単です。

WebP画像があればWebPを表示させ、なければjpgやpngを表示させるだけの話

◆手順
1、既存画像を変換しアップする
2、.htaccessに切り替え用の記述を追加する
3、ブラウザ検証ツールのネットワークで切り替わっているか確認する
おわり

なのですが、正直ソースごと書き換わっているわけではないので何かもやもやするところです。もちろん「PageSpeed Insights」ではしっかり適応+点数向上が確認できます。

詳しくはこのすばらしい記事へ(丸投げ⁉)

WebPへ変換時の注意点

一つ注意しないといけないのは、既存画像のファイル名です。

たとえば一括変換時に「main_bg.jpg」と「main_bg.png」があった場合

「main_bg.webp」になり片方が消えてしまう点です。

ご注意ください。

こちらは「main_bg.jpg.webp」と「main_bg.png.webp」に変換してくれるツールを探しましょう。こことか

以上です。

ちなみにwebpの読みは「ウェッピー」だそうです。

かわいいですね(ニチャア

それではまた( 0w0)ノ ウェッピー

  • このエントリーをはてなブックマークに追加

建築に特化したホームページで集客&受注へ

実績の99%が建築業界だからわかる、"受注の取れるWebサイト"づくりを行います。
1000サイト以上の制作実績と、豊富なサービス・運営サポートが御社をバックアップ。お気軽にお問い合わせください!

D-Gripシステム Webサイトへ