[PR] > webpって結構良い... > ネット

[PR]

2024年11月26日
20時27分

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

[
]

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:間違い修正

次の記事：【HSP】通常ウィンドウと枠なしウィンドウを動的に切り替える方法
前の記事：「色づく世界の明日から」の作画綺麗～

無題

先日出たばかりの(といっても重大なバグで取り下げられましたが)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/

[
774
URL
2018年10月11日
20時48分
編集
]

Re:無題

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

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

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

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

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

[
管理人
2018年10月11日
23時23分
]

この記事にコメントする

- HOME -

４次元ラボ

[PR]

webpって結構良い...