1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. JPEG/PNG形式の画像をWebPへ一括変換できるソフト「WebPconv」が便利!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
リモコン付きUSB電源LEDテープ(16色)でPCデスクをカスタマイズしよう!

リモコン付きUSB電源LEDテープ(16色)でPCデスクをカスタマイズしよう!

今回は以前紹介した最強のPCデスクである「FLEXISPOT 電動式昇降デスク E3シリーズ」をカスタマイズするためにUSB電源で動作するLEDテープをPCデスクにつけてみました。LED...

Lecone Type-C ハイレゾ対応イヤホンを使ってみた!(限定クーポンあり)

Lecone Type-C ハイレゾ対応イヤホンを使ってみた!(限定クーポンあり)

今回紹介するのはLeconeのUSB Type-Cイヤホンを紹介したいと思います。近年スマホのイヤホンジャックが廃止されつつあり、今後の主流はType-CイヤホンやBluetoothイヤホン...

VideoProcでYoutubeなどの動画をダウンロードする方法!

VideoProcでYoutubeなどの動画をダウンロードする方法!

今回はVideoProcの機能を紹介するシリーズの第三弾で、今回はVideoProcの動画ダウンロード機能についての紹介したいと思います。第一弾ではVideProcの録画機能を使ってテレ...

Lecone モバイルバッテリー&LEDライト化粧鏡を使ってみた!(クーポンコードあり)

Lecone モバイルバッテリー&LEDライト化粧鏡を使ってみた!(クーポンコードあり)

今回紹介するのはLeconeが販売している4000mAh大容量モバイルバッテリーにLEDライト付きメイクアップミラーが搭載されている「HPB0066A」です。現代社会では常にスマホなど...

Google Chrome v76からオムニバーでPWAのインストールができるように!

Google Chrome v76からオムニバーでPWAのインストールができるように!

Gooogle Chromeの最新版であるバージョン76からオムニバーでPWAのインストールができるようになりました。これによりPC版でも簡単にPWA対応サイトのPWAインストールを行う...

7時間限定で「竹書房マンガ全作品読み放題」を実施することを発表!

7時間限定で「竹書房マンガ全作品読み放題」を実施することを発表!

電子書籍サイトのBOOK☆WALKERでは、2019年8月5日(月)の19時から7時間限定で竹書房マンガ全作品読み放題キャンペーンを実施することを発表しました。竹書房といえば、ポプテ...

フォルダ内のファイルサイズを表示できる「Folder Size for Windows」!

フォルダ内のファイルサイズを表示できる「Folder Size for Windows」!

Windowsを使っていてよく不便に思うのがエクスプローラーでフォルダ内のファイルサイズの合計を表示できない点です。普通のファイルは一覧表示すればファイルサイズが出ま...

VideoProcのDVDコピー・リッピング機能で簡単にバックアップ!

VideoProcのDVDコピー・リッピング機能で簡単にバックアップ!

前回はVideProcを使ってクロマキー合成を行ってみたり、VideoProcの録画機能を中心に紹介しました。今回はVideoProcの機能を紹介するシリーズの第二弾で、今回はVideoProc...

Amazonで送料込み50円のHDMI延長コネクターを買ったみた!

Amazonで送料込み50円のHDMI延長コネクターを買ったみた!

前回の記事に引き継きAmazonで中国発送の安いものシリーズを買ってみた記事です。前回の記事ではアイマスクを送料込み50円で購入したのですが、今回はHDMI延長コネクターの...

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

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。