1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. JPEG/PNG形式の画像をWebPへ一括変換できるソフト「WebPconv」が便利!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
FLEXISPOT CPU冷却ホルダー CH1Bでデスクの天板からPCを吊るそう!

FLEXISPOT CPU冷却ホルダー CH1Bでデスクの天板からPCを吊るそう!

前回の記事のFLEXISPOT 電動式昇降デスク E3シリーズをより良く使えるようにするために、今回はオプション的なパーツである「FLEXISPOT CPU冷却ホルダー スタンディングデ...

Gmailのメールを一括削除する方法!(スマホ・PC両方に対応)

Gmailのメールを一括削除する方法!(スマホ・PC両方に対応)

Gmailのメールを整理しようと思った際に、一つ一つメールを選択して削除するのはものすごく大変なので、特定のメールを一括選択して削除をしたいですよね。ですが、Gmailの...

最強のPCデスク!FLEXISPOT 電動式昇降デスク E3シリーズを使ってみた!

最強のPCデスク!FLEXISPOT 電動式昇降デスク E3シリーズを使ってみた!

今回は最強のPCデスクであるFLEXISPOT 電動式昇降デスク E3シリーズを紹介したいと思います。このFLEXISPOT 電動式昇降デスク E3シリーズはなんと電動式で高さを調節可能な...

ダイソーのLANケーブル延長コネクターを買ってみた!

ダイソーのLANケーブル延長コネクターを買ってみた!

今回紹介するのはダイソーで売っているLANケーブル延長コネクターです。LANケーブルを少しだけ延長したい場合、長いLANケーブルを買い直すのは少しもったいない気がします...

アンインストールできないソフトをきれいに削除できる「GeekUninstaller」!

アンインストールできないソフトをきれいに削除できる「GeekUninstaller」!

今回紹介するのはソフトウェアのアンインストールをサポートしてくれるソフトのGeekUninstallerです。普通にアンインストールする際にも使えるのですが、このソフトの良い...

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

様々なデバイスに対応したFaviconに一括変換してくれる「Real Favicon Generator」が便利!

今回紹介するのはサイトのFaviconを様々なデバイスに対応した状態で一括変換してくれる「Real Favicon Generator for all platforms」です。スマートフォンのiOS/Android、...

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

プロ用動画編集ソフトのVEGASシリーズが最大90%割引のキャンペーンを実施中!

現在ソースネクストでは、全製品が衝撃プライスのThe Chance Ultraキャンペーンとして、プロ用映像制作ソフトの最新版となるVegas Pro 16シリーズや知識がなくても作曲可能...

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

Windowsで画像ファイルのサムネイル(縮小表示)が表示されない時の解決方法!

今回はWindowsを使っていて画像ファイルのサムネイル(縮小表示)が白くなって正常に表示されない問題が発生したときの解決方法を紹介したいと思います。先日スクリーンショ...

moto modsが30%OFF!春のmoto mods割引キャンペーンが実施中!

moto modsが30%OFF!春のmoto mods割引キャンペーンが実施中!

現在、Motorola公式ショップではモトローラ創立90週年 春のmoto mods割引キャンペーンが実施されています。moto Z、moto Z play、moto Z2、moto Z2 play、moto Z3、moto Z3...

NetaGear RSS News

Now Loading

Article

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

 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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。