1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

2012年から発売しているSONYのネットワークレコーダーの「nasne」がついに近日出荷が終了するとのアナウンスがされました。nasneとプレイステーション、スマートフォンをつ...

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

現在ソースネクストでは、VEGAS全製品を安く入手できるスーパーチャンスのキャンペーンを実施しており、最大で92%オフでVEGASシリーズの製品を販売しています!キャンペー...

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

EaseUS Softwareは、PC引っ越しソフト(データ移行ソフト)であるEaseUS Todo PCTrans Pro 10.5の最新版の公開にあたって、EaseUS Todo PCTrans Pro 10.5のライセンスコード...

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

先日の記事でNetaGearやDuelLinks.netでも「ホーム画面に追加」を実装して、WEBサイトをアプリのようにスマホのホーム画面に簡単に追加可能な「ホーム画面に追加」ボタンを...

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

久しぶりにNetaGearのアップデートを行いました。主な変更点は3つでNetaGearに何度かアクセスしている人に表示される「ホーム画面に追加する」ボタンが表示されて、スマホ...

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazonでは、Amazon Music Unlimitedへの新規登録で対象のAmazon Echoシリーズが50%OFFになるキャンペーンを開催中です!キャンペーン期間は2019年6月11日(火) 00時00分~6...

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

今回は、Google Chromeで通信ができない(オフライン)時にだけ表示されるゲームについて紹介したいと思います。すでに知っている人もいるかも知れませんが、Google Chromeに...

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

本日2019年6月8日より遊戯王デュエルリンクスのカード検索サイトであるDuelLinks.net(デュエルリンクスどっとねっと)を公開しました!遊戯王デュエルリンクスのゲーム内で...

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

今回紹介するのは初心者でも誰でも簡単に動画編集が可能なソフトのMovavi Video Edittorを紹介したいと思います。動画編集ソフトもプロ用な多機能なものなど色々なものがあ...

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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。