JPEG/PNG形式の画像をWebPへ一括変換できるソフトWebPconvが便利！
今回紹介するのはJPEG/PNG形式の画像を次世代画像フォーマットである「WebP」(ウェッピー)に一括変化することができるソフトである「WebPconv」を紹介したいと思います。WebPはGoogleが開発しているオープンな静止画フォーマットで、ファイルの拡張子は「.webp」となっています。
WebPの特徴としてはPNGやJPEGの良いところ取りしたような仕様で圧縮性能が高く、同じ画質でも画像ファイルサイズを小さくすることができます。このサイトでもトップページの画像はすべてWebPを採用して、表示の高速化に役立っています。
WebPの特徴について
PNGやJPEGより圧縮性能が高い次世代画像フォーマットの「WebP」を使おう！
WebPを導入するメリットについては別の記事で詳細にまとめているのでぜひそちらをご覧ください。WebPのメリット・デメリットやWebPの圧縮性能の高さについての説明や「なぜ今WebPの話題が出ているのか？」という点にも着目してまとめてあります。
正直なところ将来的にはWebPだけあれば他の画像形式は必要ないんじゃないかと私は考えています。画像が多いサイトでは画像ファイルサイズの削減は、サイトの表示高速化においてかなりの割合を占める重要な部分です。重いJPEGやPNGをWebPに置き換えるだけでも読み込み量が約30％程度減らすことが可能になります。画像が重いとモバイルでは特に表示速度に影響があるので、しっかり最適化する必要があります。
「WebPconv」のインストール方法！
WebPconv公式サイトにアクセスします。
WebPconv WebPファイル一括変換アプリ - Romeolight
http://www.romeolight.com/ja/products/webpconv/
「Download Now」を押してインストーラーをダウンロードします。
WebPconvSetup.exeを起動して、「Next」を押します。
「Next」を押します。
インストール先を指定して「Next」を押します。
「Install」を押します。
インストールが終わるまでしばらく待ちます。
「Finish」を押します。
「WebPconv」を使って一括変換する方法！
WebPconvを起動します。WebPに変換するときは「ENCODE」、WebPからPNG/JPEGなどに変換する「DECODE」とタブが別れています。
右上の設定画面を開いてみます。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. サイズを変更します。
圧縮したい画像を用意します。今回は記事のトップ画像で使っている画像で試してみたいと思います。
圧縮したい画像をドラッグ&ドロップします。
左上の三角ボタンを押すとエンコードが開始されます。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の発展のためにもこういうのは早く対応して欲しいところですね。