1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
HTML+CSSだけで実装された走る馬のアニメーションがすごい!

HTML+CSSだけで実装された走る馬のアニメーションがすごい!

今回紹介するのはHTML+CSSだけで走る馬のアニメーションを実装されているClip Clop Clippity Clop [CSS Only]という作品です。CodePenに実物がアップロードされているので...

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

現在AmazonではBluetooth対応のスマート体重計・体組成計がなんとクーポンコードを使用することで衝撃の1290円で販売されています。スマート体重計・体組成計はスマホやタ...

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

前回はDearMob iPhoneマネージャーでiPhoneやiPadを簡単にバックアップする方法を紹介しましたが、今回の記事ではiTunesを使用せずにDearMob iPhoneマネージャーで簡単に写...

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERでは、BOOK☆WALKERとニコニコ書籍のスマホアプリの統合1周年を記念した「祝!結婚1周年!感謝のコイン最大50%還元キャンペーン」を実施しています。このキャン...

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

ニコニコ動画などの運営しているドワンゴのニコトクというサービスで、Amazonなどで通常販売価格8000円の音声マルチエフェクトソフトウェア「Audio Input FX LE」が期間限...

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

前回の記事では「DVDFab 11 Blu-rayコピー」についての紹介を行いましたが、今回はDVDFab動画ダウンローダー(DVDFab Downloader)について紹介したいと思います。DVDFab 11 ...

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

現在、電子書籍ストアのBOOK☆WALKERでは、2019年9月4日までに配信されたKADOKAWA作品が50%コイン還元、それに加えて15,000点以上が50%OFFで購入できるニコニコカドカワ祭...

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

最近10インチで激安タブレットを探していたのですが、10インチタブレットでなんと価格が1万円ちょっとというALLDOCUBE iPlay10 Proをゲットしたのでレビューを書きたいと思...

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

現在SONICWIREでは、省機能/高性能なマスタリングソフトウェアiZotope ( アイゾトープ )の「Ozone 8 Elements」を無償でプレゼントするキャンペーンを実施中です!Windows/...

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