1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. JPEG/PNG形式の画像をWebPへ一括変換できるソフト「WebPconv」が便利!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

今回紹介するのは全世界で1,000万以上のユーザーがいるBlu-rayコピーソフトであるLeawo Blu-rayコピーです。Leawo Blu-rayコピーを使用すると、簡単にBlu-rayディスクのバ...

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

現在LEAWO製品が最大50%オフになる新年応援スペシャルキャンペーンを実施しています。キャンペーン期間は2020年2月3日(水)までとなっています。また、SNSでLeawoを応援して...

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

3,4ヶ月前のことになりますが、MOTOROLA Moto Zのバッテリーが死んでバッテリーを交換する手順の記事を書きました。当時は充電ケーブルを抜くと5分もせずに落ちるという状...

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

先日の記事で199円のミニ三脚についてのレビューにおいて、三脚上部の角度などが変更できればもっと自由度が上がって使いやすくなるということを書きました。そこで今回は...

無料でもらえるGoogle Nest miniが届いたのでレビュー!

無料でもらえるGoogle Nest miniが届いたのでレビュー!

先日の記事のGoogle Nest Miniが無料で手に入る!YouTube PremiumとGoogle Play Music会員が対象!でも紹介したGoogle Nest miniが届いたのでレビューを書きたいと思います...

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

Bluetoothでスマホ連動可能なBeyeahスマート体組成計&体重計が792円の超激安で販売中です。スマホとBluetoothで連動させることで、体重や体水分量・BMI・筋肉量・推定骨量...

Fire TV StickでIEEE802.11acが認識されない問題!

Fire TV StickでIEEE802.11acが認識されない問題!

先日のレビューも書いたFire TV Stickですが、実は一つ気になることがあったので同じようなことで困っている人の役に立てばと思い記事で残しておきたいと思います。それはF...

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

現在BOOK★WALKERでは、1月10日よりTVアニメが放映開始となる「とある科学の超電磁砲T」を記念して、とあるシリーズが最大80%オフのキャンペーンを実施しています。とある科...

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

今回は完全防水IPX7に対応したBluetoothスピーカーであるTribit StormBox bluetoothスピーカー BTS30を紹介したいと思います。お風呂場などで使用可能なIPX7に対応しており...

ダイソーで買えるライトニングとMicroUSBが両方使えるケーブルがすごい!

ダイソーで買えるライトニングとMicroUSBが両方使えるケーブルがすごい!

先日ダイソーですごいケーブルを見つけたので紹介したいと思います。それはなんとライトニングケーブルとMicroUSBケーブルが一本で両方使えるという製品です。先頭の端子を...

NetaGear RSS News

Now Loading

Article

JPEG/PNG形式の画像をWebPへ一括変換できるソフト「WebPconv」が便利!

Webデザイン > html+CSS+javascript 
webpconv_000.png

今回紹介するのはJPEG/PNG形式の画像を次世代画像フォーマットである「WebP」(ウェッピー)に一括変化することができるソフトである「WebPconv」を紹介したいと思います。WebPはGoogleが開発しているオープンな静止画フォーマットで、ファイルの拡張子は「.webp」となっています。

WebPの特徴としてはPNGやJPEGの良いところ取りしたような仕様で圧縮性能が高く、同じ画質でも画像ファイルサイズを小さくすることができます。このサイトでもトップページの画像はすべてWebPを採用して、表示の高速化に役立っています。

WebPの特徴について


google_webp_000.png

PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう!

WebPを導入するメリットについては別の記事で詳細にまとめているのでぜひそちらをご覧ください。WebPのメリット・デメリットやWebPの圧縮性能の高さについての説明や「なぜ今WebPの話題が出ているのか?」という点にも着目してまとめてあります。

正直なところ将来的にはWebPだけあれば他の画像形式は必要ないんじゃないかと私は考えています。画像が多いサイトでは画像ファイルサイズの削減は、サイトの表示高速化においてかなりの割合を占める重要な部分です。重いJPEGやPNGをWebPに置き換えるだけでも読み込み量が約30%程度減らすことが可能になります。画像が重いとモバイルでは特に表示速度に影響があるので、しっかり最適化する必要があります。

「WebPconv」のインストール方法!


webpconv_007.png
1 WebPconv公式サイトにアクセスします。

WebPconv WebPファイル一括変換アプリ - Romeolight
http://www.romeolight.com/ja/products/webpconv/

webpconv_008.png
2 「Download Now」を押してインストーラーをダウンロードします。

webpconv_001.png
3 WebPconvSetup.exeを起動して、「Next」を押します。

webpconv_002.png
4 「Next」を押します。

webpconv_003.png
5 インストール先を指定して「Next」を押します。

webpconv_004.png
6 「Install」を押します。

webpconv_005.png
7 インストールが終わるまでしばらく待ちます。

webpconv_006.png
8 「Finish」を押します。

「WebPconv」を使って一括変換する方法!


webpconv_010.png
9 WebPconvを起動します。WebPに変換するときは「ENCODE」、WebPからPNG/JPEGなどに変換する「DECODE」とタブが別れています。

webpconv_011.png
10 右上の設定画面を開いてみます。ENCODING OPTIONとDECODING OPTIONが用意されています。

■Quality Factor
Specify the compression factor for RGB channels between 0 and 100. The default is 75.
画像品質を0~100で設定できます。デフォルトは75です。

■Compression Method
Specify the compression method to use. This parameter controls the trade off between encoding speed and the compressed file size and quality. Default value is 4.
このパラメータは、エンコード速度と圧縮ファイルのサイズおよび品質との間のトレードオフで制御します。デフォルト値は4です。個人的には6がおすすめです。

■Strength of Deblocking filter
Specify the strength of the deblocking filter, between 0 (no filtering) and 100 (maximum filtering. A value of 0 will turn off any filtering.
デブロッキングフィルタの強度を0(フィルタなし)から100(最大フィルタ)の間で指定します。値0はフィルタを無効にします。

■Preserve Metadata
A comma separated list of metadata to copy from the input to the output if present.
入力から出力にメタデータをコピーします。

■Lossless Mode
Encode the image without any loss.
画像を損失なくエンコードします。その分ファイルサイズは大きくなります。

■Auto Filter
The filtering strength of reach a well-balanced quality.
フィルタリング強度をバランスのとれた品質にします。

■Alpha Cleen Update
Modify unseen RGB values under fully transparent area, to help compressibility.
圧縮率を高めるために、完全に透明な領域の下に見えないRGB値を変更します。

■Resize
Change Dimensions.
サイズを変更します。

webpconv_012.png
圧縮したい画像を用意します。今回は記事のトップ画像で使っている画像で試してみたいと思います。

webpconv_013.png
圧縮したい画像をドラッグ&ドロップします。

webpconv_014.png
左上の三角ボタンを押すとエンコードが開始されます。webPに変換が完了すると下にComplete:Total 215.95Mbytes decreasedと表示されました。これで全ファイルで215MB削減できたことが分かります。

WebPにファイル出力する以外にもbase64形式でも出力可能です。data:image/webp;base64から始まるデータ形式で、小さい画像を文字データとしてhtml上に保存することでhttpリクエスト数を減らす際に役に立ちます。


今回の個人的感想




今回はJPEG/PNG形式の画像を次世代画像フォーマットである「WebP」(ウェッピー)に一括変化することができるソフトである「WebPconv」の紹介でした。「WebPconv」についてですが、ドラッグ&ドロップで一括でWebPに変換できるのでとても便利ですね。サイトで使う画像を一個一個変換していくのは手間がかかるので、こうやって一気に変換できるのはとてもありがたいです。

私のサイトでもかなりWebPを導入しており、特にトップページではすべての画像をWebPに置き換えたのでかなりファイルサイズを削減できて高速化できました。WebPは優秀なのでみんなも使ったほうが良いですね。

対応ブラウザについても主要ブラウザであるGoogle Chrome、Microsoft Edge、Mozilla Firefox、Operaが対応しているので基本的には問題ないですね。Safariだけがまだ未対応ではありますが、Microsoft EdgeとMozilla Firefoxが対応した現状の状況を見る限り、Safariも近い将来対応されるような気がします。Webの発展のためにもこういうのは早く対応して欲しいところですね。

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...