1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
リモコン付きUSB電源LEDテープ(16色)でPCデスクをカスタマイズしよう!

リモコン付きUSB電源LEDテープ(16色)でPCデスクをカスタマイズしよう!

今回は以前紹介した最強のPCデスクである「FLEXISPOT 電動式昇降デスク E3シリーズ」をカスタマイズするためにUSB電源で動作するLEDテープをPCデスクにつけてみました。LED...

Lecone Type-C ハイレゾ対応イヤホンを使ってみた!(限定クーポンあり)

Lecone Type-C ハイレゾ対応イヤホンを使ってみた!(限定クーポンあり)

今回紹介するのはLeconeのUSB Type-Cイヤホンを紹介したいと思います。近年スマホのイヤホンジャックが廃止されつつあり、今後の主流はType-CイヤホンやBluetoothイヤホン...

VideoProcでYoutubeなどの動画をダウンロードする方法!

VideoProcでYoutubeなどの動画をダウンロードする方法!

今回はVideoProcの機能を紹介するシリーズの第三弾で、今回はVideoProcの動画ダウンロード機能についての紹介したいと思います。第一弾ではVideProcの録画機能を使ってテレ...

Lecone モバイルバッテリー&LEDライト化粧鏡を使ってみた!(クーポンコードあり)

Lecone モバイルバッテリー&LEDライト化粧鏡を使ってみた!(クーポンコードあり)

今回紹介するのはLeconeが販売している4000mAh大容量モバイルバッテリーにLEDライト付きメイクアップミラーが搭載されている「HPB0066A」です。現代社会では常にスマホなど...

Google Chrome v76からオムニバーでPWAのインストールができるように!

Google Chrome v76からオムニバーでPWAのインストールができるように!

Gooogle Chromeの最新版であるバージョン76からオムニバーでPWAのインストールができるようになりました。これによりPC版でも簡単にPWA対応サイトのPWAインストールを行う...

7時間限定で「竹書房マンガ全作品読み放題」を実施することを発表!

7時間限定で「竹書房マンガ全作品読み放題」を実施することを発表!

電子書籍サイトのBOOK☆WALKERでは、2019年8月5日(月)の19時から7時間限定で竹書房マンガ全作品読み放題キャンペーンを実施することを発表しました。竹書房といえば、ポプテ...

フォルダ内のファイルサイズを表示できる「Folder Size for Windows」!

フォルダ内のファイルサイズを表示できる「Folder Size for Windows」!

Windowsを使っていてよく不便に思うのがエクスプローラーでフォルダ内のファイルサイズの合計を表示できない点です。普通のファイルは一覧表示すればファイルサイズが出ま...

VideoProcのDVDコピー・リッピング機能で簡単にバックアップ!

VideoProcのDVDコピー・リッピング機能で簡単にバックアップ!

前回はVideProcを使ってクロマキー合成を行ってみたり、VideoProcの録画機能を中心に紹介しました。今回はVideoProcの機能を紹介するシリーズの第二弾で、今回はVideoProc...

Amazonで送料込み50円のHDMI延長コネクターを買ったみた!

Amazonで送料込み50円のHDMI延長コネクターを買ったみた!

前回の記事に引き継きAmazonで中国発送の安いものシリーズを買ってみた記事です。前回の記事ではアイマスクを送料込み50円で購入したのですが、今回はHDMI延長コネクターの...

NetaGear RSS News

Now Loading

Article

PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!

Webデザイン > html+CSS+javascript 
google_webp_000.png

一般的なWebサイトに用いられている画像はPNGやJPEGがほとんどですが、今回はWebサイトにおける次世代画像フォーマットのWebP(ウェッピー)の話をしたいと思います。WebPはGoogleが開発しているオープンな静止画フォーマットで、ファイルの拡張子は「.webp」となっています。

WebPの特徴としてはPNGやJPEGの良いところ取りしたような仕様で圧縮性能が高く、同じ画質でも画像ファイルサイズを小さくすることができ、ダウンロード時間やデータ使用量を抑えることができます。Webページの表示おいてダウンロード時間がかかるのは主に画像ファイルなので、その画像ファイルサイズを小さくすることで表示を高速化することができます。

なぜ今WebPの話題が出ているのか?


WebP


実はWebPは2010年から存在する画像フォーマットなのです。Webに精通している人なら何度か目にした事があると思います。しかしながら、WebPは圧縮率も高くて優秀なのに今までそんなに話題になっていませんでした。それにはしっかりとした理由があります。それは対応ブラウザの少なさでした。公開された当初はGoogle Chromeのみの対応で、WebPを使ってもほとんどのブラウザで表示されないという問題がありました。

ですが、2018年10月に状況が一変する大事件が起こります。今までWebPに対応してこなかったMicrosoft EdgeがWindows 10 October 2018 Updateで正式にサポートすることを発表しました。その発表の影響を受けてMozilla Firefox 65でのWebPの対応を発表し、ついに1月31日のMozilla Firefox 65へのアップデートで正式に対応しました。つまりこれでPCの主要ブラウザたちであるGoogle Chrome、Microsoft Edge、Mozilla Firefox、Operaと対応ブラウザが一気に増え、そろそろWebPを実際に使い始めてもいいレベルにブラウザ対応度が上がったわけです。

2019年2月現在のWebPの対応ブラウザについて


google_webp_002.png

Can I use... Support tables for HTML5, CSS3, etc - WebP
https://caniuse.com/#search=webp

2019年2月現在の対応ブラウザです。対応ブラウザについてはCan I use... Support tables for HTML5, CSS3, etcで見ることができます。Internet ExplorerはMicrosoftに見捨てられて今後アップデートがなく未来のない廃れゆくブラウザなので無視できるとして、ここで問題となるのはSafariです。なぜSafariが問題なのかというと日本ではiPhone率が諸外国に比較しても異常に高いので、スマホからのSafari利用者がかなりの数いるのです。WebPはスマホなどの回線の弱い環境のほうがその効果が輝きますし、SafariのWebP対応はユーザーには良いことしかないので、Safariには早急に対応してもらいたいですね。

対応ブラウザ


Google Chrome
Mozilla Firefox 65以降
Microsoft Edge 18以降
Opera

非対応ブラウザ


Safari
Internet Explorer


WebPは圧縮率が高く、アルファチャンネルも扱えてとても優秀


Excellent


WebPはWebサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格としてGoogleが開発しています。ファイルサイズは非可逆圧縮モードで同等画質のJPEGやPNGと比較して約30%程度小さくできます。Webサイトの表示において、ダウンロードサイズの大多数を占める画像ファイルサイズを小さくすることは、サイトの表示速度を高速化する上で絶大な効果を発揮します。現在のJPEGやPNGを最適化するかWebPに置き換えることでサイトの高速化においてはかなり有効な手段の一つと言えます。

また、JPEGとは異なり非可逆圧縮でもアルファチャンネルを扱えるのも大きな特徴です。アルファチャンネルが使えるとどう変わるのかというとPNGのように画素の不透明度(opacity)を設定できて、一部透過画像などを扱えるようになります。


PNG/JPEGとWebPでの画像品質とファイルサイズの比較


google_webp_010o.jpggoogle_webp_014.png

こちらがオリジナルのJPEGとPNGです。この画像をJPEGとWebPの品質75で変換した際の違いと、PNGを最適化したOptiPNGとWebPの品質75で変換した画像を比較してみたいと思います。画質とファイルサイズはトレードオフなので、同程度の画質でどれだけファイルサイズが小さくできるかが注目点となります。

JPEG


google_webp_010j.jpg

JPEGとWebPのエンコード後の比較です。左がJPEGを品質0.75で変換したもの、右がWebPに品質75で変換したものです。JPEGの品質75で変換した際の圧縮率は78%で41.5KB、WebPに変換して圧縮した結果の圧縮率は83%で31KBでした。双方の画像を見比べて見るとオリジナル画像に比べるとやはり同程度モスキートノイズが出ています。しかし、ファイルサイズは圧縮後のJPEGとWebPでは25%程度WebPの方が軽量になっています。

JPEG(Orijinal):182KB
JPEG(quality=75):41.5KB
WebP(quality=75):31KB


PNG


google_webp_014op.png

PNGとWebPのエンコード後の比較です。左がPNGを最適化したもので、右が右がWebPに品質75で変換したものです。
PNGは最適化したことで圧縮率は22%で9.2KB、WebPは品質75なので圧縮率は73%で3.1KBでした。PNGは最適化しただけなので画質の劣化はないのですが、WebPは品質75とJPEGの時のように劣化しているかと思いきや、オリジナルと比較しても違いはほぼわかりませんでした。これはすごいですね。ちなみに画質劣化のないLosslessでWebPに変換した際も圧縮率59%で4.9KBと素晴らしい結果でした。

PNG(Orijinal):11.9KB
PNG(Optimaize):9.2KB
WebP(Lossless):4.9KB
WebP(quality=75):3.1KB


WebP非対応ブラウザに対応するPictureタグ


Picture Tag


非対応ブラウザが残っている状況でWebPにすべてを置き換えてしまうと、非対応ブラウザでは画像が表示できないという問題が発生してしまいます。以前私が作ったNetaGearのように画像を一切使わずCSSだけでデザインされているサイトなら問題ないですが、現代のWebサイトで画像が表示されないというのはかなりの問題です。

<picture>
<source srcset="webpの画像ファイル" type="image/webp">
<img src="jpg/pngの画像ファイル" width="350" height="230">
</picture>


それらの解決してくれるのがPictureタグです。Pictureタグを用いることでWebP対応ブラウザはWebPを読み込み、WebP非対応ブラウザでは通常のimgタグでJPEGを読み込ませることが可能なのです。この記述ならば非対応ブラウザがあってもきちんと画像が表示されますし、WebP対応ブラウザでは軽量なWebPを読み込むので、画像の表示を高速化することができます。

google_webp_001.png

Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/#search=picture

Pictureタグはすでに殆どのブラウザで対応済になっていますし、Internet Explorerだけは対応してないのですがブラウザではimgタグとして認識されているのか画像はしっかり表示できているようです。このサイトでも実験的にWebPの導入を試しており、トップページの画像はすべてPictureタグでWebPとJPEG&PNGに変えているのですが、私の確認した限りではInternet Explorerを含め問題なく表示できています。


WebPの変換方法!


Encodeing


画像のWebP形式への変換方法についてですが、基本的には2通りあります。一つはブラウザ上で変換を行う方法です。もう一つはPC内でソフトを使って一括変換する方法です。一つ一つ丁寧に変換する場合は「Squoosh」がおすすめです。大量の画像をWebPに一括変換したい場合は「WebPconv」が便利です。用途によって使い分けるのが良いと思います。




使い方については上記記事にまとめているので、ぜひそちらをご覧になってWebPへ変換を試してみてください。

今回の個人的感想




今回は次世代静止画フォーマットのWebPの紹介でした。今回はサイト運営者向けの記事でしたね。実際にWebPを使ってみるとほぼ同じくらいの画質でファイルサイズがかなり小さくできるのでおすすめです。このサイトでも記事以外の画像などはすべてWebPにしました。トップページはすべての画像をWebPに置き換えましたので、以前より表示速度が上がっていると思います。

記事内の画像の変換についてですが、このブログはFC2ブログを使っているので、記事内の画像はすべて手動で書き換えないといけないため断念しました。このあたりは一括で変換できないのは外部のブログサービスを使っている弱みですね。ちなみにWordpressでは「EWWW Image Optimizer」なるプラグインを入れて、「JPG, PNG から WebP」にチェックをいれるだけで実装可能なのようです。

サイトの高速化というのはかなり大事な要素の一つですし、画像が多いサイトではWebPの導入は効果絶大だと思います。スマホもAndroidユーザーは基本的にブラウザはChromeだと思うので、モバイルユーザーの表示速度が上がるのはうれしいですね。スマホのサイトで表示が遅いとイライラしますので、その打開策になると思います。あとは現状Safariが対応していませんが、こちらも近いうちに対応してくれることを願うばかりです。

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。