1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
心拍計付きスマートブレスレットが72%オフの896円!IP68完全防水!

心拍計付きスマートブレスレットが72%オフの896円!IP68完全防水!

現在AmazonではGiyastar心拍計付きスマートブレスレットが通常価格3,199円のt頃72%オフの896円の超激安で販売されています。このスマートブレスレットはIP68完全防水で色々...

完全防水IPX7のTribit MaxSound Plus Bluetoothスピーカーを使ってみた!

完全防水IPX7のTribit MaxSound Plus Bluetoothスピーカーを使ってみた!

今回紹介するのは防水のBluetoothスピーカーであるTribit MaxSound Plusの最新2019年モデルです。防水はIPX7に対応しており、お風呂場などで水に沈んで使用しても大丈夫な...

Fire TV Stickでプライムビデオなどをテレビで見よう!

Fire TV Stickでプライムビデオなどをテレビで見よう!

今回はAmazonプライムビデオをより便利に活用できるFire TV Stickを購入したので、レビューを書きたいと思います。Fire TV Stickを使えばプライムビデオをテレビの大画面で...

LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

現在、楽天スーパーセールにてLINEが提供するスマートスピーカーClova Friendsが驚異の88%オフの1480円で販売されています。スマートスピーカー「Clova Friends SALLY」と...

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

本日12月6日9時より、Amazonでは年末の大セールとなるAmazon Cyber Monday(サイバーマンデー)2019を実施されます。開催期間は12月6日(金)9時00分から12月9日(月)23時...

日本郵便が無償提供する年賀状ソフト「はがきデザインキット2020」がすごい!

日本郵便が無償提供する年賀状ソフト「はがきデザインキット2020」がすごい!

今年も残すところあと30日間を切り、もうそろそろ年賀状を用意して送らないといけない時期ですね。そこで今回は年賀状作成ソフトについて書きたいと思います。ちなみにみな...

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

前回までにDearMob iPhoneマネージャーでiTunesを使わないバックアップ方法、写真転送、音楽転送と3本シリーズ記事として書いてきました。iTunesを使用せずにDearMob iPhon...

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでは11月26日よりGearbestブラックフライデーセールを実施しています。Gearbestではスマホやタブレット、スマートウォッチなどの製品を数多く取り揃えた中国のネッ...

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

現在AmazonではWWTECKSのUSB充電電熱ベストが通常販売価格4,588円のところ1,294円で購入が可能となっています。超激安の1,294円で購入するには50%OFFクーポンと1000円引き...

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...