1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. JPEG/PNG形式の画像をWebPへ一括変換できるソフト「WebPconv」が便利!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
HTML+CSSだけで実装された走る馬のアニメーションがすごい!

HTML+CSSだけで実装された走る馬のアニメーションがすごい!

今回紹介するのはHTML+CSSだけで走る馬のアニメーションを実装されているClip Clop Clippity Clop [CSS Only]という作品です。CodePenに実物がアップロードされているので...

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

現在AmazonではBluetooth対応のスマート体重計・体組成計がなんとクーポンコードを使用することで衝撃の1290円で販売されています。スマート体重計・体組成計はスマホやタ...

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

前回はDearMob iPhoneマネージャーでiPhoneやiPadを簡単にバックアップする方法を紹介しましたが、今回の記事ではiTunesを使用せずにDearMob iPhoneマネージャーで簡単に写...

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERでは、BOOK☆WALKERとニコニコ書籍のスマホアプリの統合1周年を記念した「祝!結婚1周年!感謝のコイン最大50%還元キャンペーン」を実施しています。このキャン...

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

ニコニコ動画などの運営しているドワンゴのニコトクというサービスで、Amazonなどで通常販売価格8000円の音声マルチエフェクトソフトウェア「Audio Input FX LE」が期間限...

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

前回の記事では「DVDFab 11 Blu-rayコピー」についての紹介を行いましたが、今回はDVDFab動画ダウンローダー(DVDFab Downloader)について紹介したいと思います。DVDFab 11 ...

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

現在、電子書籍ストアのBOOK☆WALKERでは、2019年9月4日までに配信されたKADOKAWA作品が50%コイン還元、それに加えて15,000点以上が50%OFFで購入できるニコニコカドカワ祭...

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

最近10インチで激安タブレットを探していたのですが、10インチタブレットでなんと価格が1万円ちょっとというALLDOCUBE iPlay10 Proをゲットしたのでレビューを書きたいと思...

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

「iZotope Ozone 8 Elements」が無料でゲットできるキャンペーンが実施中!

現在SONICWIREでは、省機能/高性能なマスタリングソフトウェアiZotope ( アイゾトープ )の「Ozone 8 Elements」を無償でプレゼントするキャンペーンを実施中です!Windows/...

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