忍者ブログ

4次元ラボ

webpって結構良い...

Googleが推している割に全然流行らないwebp形式の画像ファイル。
pngと同じような無劣化での圧縮もでき、jpgのように劣化させてサイズを減らすこともできる。
無劣化、劣化、問わずpngのような綺麗な透過にも対応している。もちろんアニメーションも。

さらに表示にかかる時間まで高速になるらしい。

完全に上位互換です。

肝心の圧縮率ですが、これが思ったより良いんですよね。
最近までガン無視してたんですがwebpに興味持ちました。
ただ、対応しているブラウザが少ない...Chrome、Opera、Androidは対応。
Firefox、IE、MS Edgeなどは表示に対応していない。(何で)

以下に比較を置いておきます。
(可逆圧縮の事を「無劣化」、不可逆圧縮の事を「劣化」と記します。)
(クリックで拡大)

PNG(1920x1080 無劣化 1.48MB)


WEBP(1920x1080 無劣化 637KB)




PNG(1920x1080 無劣化 3.17MB)


WEBP(1920x1080 無劣化 1.25MB)



↓RAW(CR2)(17.9MB)から変換

JPG(4752x3168 劣化  画質100  9.97MB)


WEBP(4752x3168 劣化  画質100  3.52MB)




色数の多い画像や解像度の高い画像ほど効果は大きいようですね。
画質を保ったままファイルサイズは半分から1/3くらいにまで小さくなりました。

最終更新:2018/12/6
12/6:画像のリンク切れ修正
11/8:間違い修正

無題

先日出たばかりの(といっても重大なバグで取り下げられましたが)Win10の最新版のEdgeではWebPに対応するらしいです。
そしてFirefoxもそう遠くない将来対応するとか
https://applech2.com/archives/20181005-edge-and-firefox-ready-google-webp.html

ただ実際に使う場合は対応したブラウザにはWebPを、そうでないブラウザにはJpegやPNGを表示させるという使い方になるでしょうね。
今は便利になったものでjavascriptとかの助けなしにhtmlのタグだけで出来るみたいです。忍者ブログで使えるかは知りませんが
参考:https://junzou-marketing.com/usage-of-picture-tag

WebPを使わなくてもオンラインでJpegやPNGの軽量化を行えるサイトもあるのでそれを使うという手もありだとは思います
参考:https://naifix.com/jpeg-lossy-compression/

Re:無題

>先日出たばかりの(といっても重大なバグで取り下げられましたが)Win10の最新版のEdgeではWebPに対応するらしいです。
>そしてFirefoxもそう遠くない将来対応するとか

タイムリーですね!でもMS Edge使ってる人かなり少ないらしいですよね・・・
現段階じゃほぼ下位互換なんだからもっとペース上げて機能改善してほしいですね^^;
Firefoxも早く対応してくれればwebp気兼ねなく使えるんですがね~

>ただ実際に使う場合は対応したブラウザにはWebPを、そうでないブラウザにはJpegやPNGを表示させるという使い方になるでしょうね。
なるほど、そういう手もあるんですね。
自分、最近の技術には少し追いついてない気がします..

>WebPを使わなくてもオンラインでJpegやPNGの軽量化を行えるサイトもあるのでそれを使うという手もありだとは思います
GIGAZINとかでよく見かけていましたが、使ったことなかったです..
試しに3.17MBのPNG投げてみたら1.68MBで返ってきました!
よく見ないと劣化が分からないくらいに色数を減らしていますね。

沢山の情報ありがとうございます!とても勉強になります^^

この記事にコメントする

  • お名前
  • メール

  • 本文
PR

- HOME -

最終更新:2019年1月1日

(2019年 01/01)
(2018年 12/26)
(2018年 12/26)
(2018年 12/08)
(2018年 11/18)
(2018年 10/25)
(2018年 10/22)
(2018年 10/07)
(2018年 10/06)
(2018年 10/06)
(2018年 10/04)
(2018年 09/22)
(2018年 09/19)
(2018年 09/19)
(2018年 08/22)

2019年! [01/06 名無しさん]
Minecraftのサーバーを建てたけど参加できない時 [11/16 https://www.getjar.com/categories/all-games/action-games/Rules-of-Survival-Cheat-960889]
超低予算でゲーミングPCを作るには [11/06 ゴヤール スーパーコピー キーケース]

HN:
hаmyuu
自己紹介:
趣味で色々やってる。
最近はHSPでプログラミングしたりアニメみたり。
金と流行りに目が無い。(故に貧乏)

主な生息地 :
Twitter
YouTube
niconico
ひまわり動画
HSPTV!掲示板

好きなもの :
萌えアニメ、ゲーム、PC