WebP画像フォーマットを使用するための完全ガイド

WebP、または非公式に おかしな, 5年前にGoogle Developersによって導入された画像フォーマットです。あなたがWebデザイナー、またはあなたの画像ファイルサイズを縮小し最適化しようと努力する開発者であるならば、WebPが可能であるものはあなたの顔を笑わせるべきです.

手短に言えば、これはあなたがこの新しくはないがまだクールな画像フォーマットについて知る必要があるいくつかの重要なものです：

WebPは.webpのファイル拡張子で行きます.
WebPは非可逆圧縮と可逆圧縮の両方を採用しています.
WebP非可逆画像は潜在的に JPEGより25〜34％小さい.
WebPロスレス画像は潜在的に PNGと比較して25％小さい.
WebPはロスレス透明度、すなわちアルファチャンネル付きPNGをサポートします.
WebPはアニメーションをサポートしています。すなわちアニメーションGIF.

一言で言えば、WebPはJPEG、GIF、PNGの画像ファイルサイズを大幅に減らすことができます。これがWebPについての復習です。私たちが楽しいものに入る前に、あなたがチェックアウトするべきです.

実験

Web上での主張についての最も良いことは、私たちはいつでも実験を実行して真実性と信憑性をチェックすることができるということです。これが私が見つけたいくつかの実験です。 画像がどのくらい小さくなる可能性があるか さまざまな画像形式（JPEG、PNG、GIF）からWebPに変換された後.

1. JPEG - ロッシーイメージ

Pexelsから入手したランダムなJPEG画像です。. 元のファイルサイズ - 165kb. ↓

画像はJpegMiniで最適化されています. 新しいファイルサイズ - 101kb. ↓

最後に、同じ画像がWebPフォーマットに変換されます. 最終ファイルサイズ - 70kb. ↓

補足説明： 同じ画像が次の形式に変換された場合のファイルサイズは次のとおりです。

GIF - 285kb
PNG 8 - 241.2kb
PNG 24 - 657.6kb

2. PNG - ロスレスイメージ

それでは、透明性のあるPNGを試してみましょう。（ソース）. 元のファイルサイズ - 587kb. ↓

これはtinypngで最適化された画像です。. 新しいファイルサイズ - 278kb. ↓

そして最後に、画像はWebPフォーマットに変換されました. 最終ファイルサイズ - 112kb. ↓

3.アニメーションGIF

WebPに変換すると、JPEG画像は165kbから70kbに、PNG画像は587kbから112kbになりました。.

アニメーションGIFの運賃を見てみましょう。

元のファイルサイズ - 6.8mb
WebPファイルサイズ - 6.3メガバイト

概要：

実験全体を要約するための表です。

	ロッシー（JPG）	ロスレス（PNG）	アニメーションGIF
元の	165kb	587kb	6.8メガバイト
ツールで最適化	101kb	278kb	-
WebPフォーマット	70kb	112kb	6.3メガバイト

数学的計算に多くの時間を費やすことなく、これらの図はファイルサイズの大幅な縮小を示しており、画像から判断すると、明瞭さと解像度の点で違いを見分けることはできません。同じレベルの画質を持つ、より小さく、より軽いファイルサイズでは、WebPは確かに検討する価値があります。.

ツールを使ってWebPに変換する

WebP形式の画像をすでに公開していて、始めようと思っているのであれば、ぜひこの形式に画像を変換する方法を見てみましょう。下記のすべての方法は、コントロール、使いやすさ、および利便性の点で異なります。あなたの毒を選びなさい.

WebPonize にとってマック

WebPonizeは、おそらくMac上で画像をWebP形式に変換するための最も簡単で最速の方法です。あなたがする必要があるのはWebPonizeにあなたのイメージを単にドラッグアンドドロップすることですそしてそれは変換をするでしょう。元のファイルの出力、変更前サイズ、変更後サイズ、および縮小率が表示されます。 [WebPonizeをダウンロードする]

Webpconv にとって Windows

Windowsを実行している場合は、Webpconvがインストールすべきアプリです。あなたはあなたのフラッシュドライブでそれを独立して動かすことができるようにそれはまたポータブル版で来ます。 [Webconvのダウンロード]

コマンドラインで変換する

あなたがこっけいに感じているなら、あなたはおそらくコマンドラインを使用して変換を実行したいかもしれません。. cwebp JPEG、PNG、またはTIFF画像をWebP形式に変換します。 dwebp それらをPNG形式に変換します。これがどのように機能するか見てみましょう.

注意： 次のガイドはMac OS X用です。WindowsとLinuxのユーザーは、ここをクリックしてください。.

Mac OSXでMacPortを設定する

最初に、Xcodeがインストールされていることを確認してから、次の手順に従います。

MacPortsをダウンロードしてインストールしてください。 MacにMacPortがすでにインストールされている場合は、手順2に進みます。.
起動する ターミナル.
「」と入力しますsudoポートの自己更新「Enterキーを押します。これにより、MacPortsが最新バージョンにアップデートされます。.
次に「」と入力しますsudoポートインストールWebP"そしてenterを押してください。これでインストールされます libwebp （WebPライブラリ）.

それでおしまい。それでは見てみましょう コマンドラインを使用して画像をWebPに変換する方法.

変換/元に戻すコマンド

以下がそのコマンドです。

I - JPEG / PNG画像ファイルをWebP形式に変換する

フォーマット：cwebp -q [画像品質] [JPEG / PNGファイル名] -o [WebPファイル名]

例：

cwebp -q 80 example.png -o example.webp

II - WebPイメージファイルをPNGに変換

フォーマット：dwebp [WebPファイル名] -o [PNGファイル名]

例：

dwebp image.webp -o image.png

もっと：他の方法でconversioniを好むのであれば、GruntとGulpのタスクを使ってJPG / PNGファイルをWebPに変換するための指示があります。.

オンラインツールで変換する

このタスクを実行するためにオペレーティングシステムにアプリケーションをインストールする予定がない場合は、代わりにこれらのオンラインツールを選択してください。これが私が知るようになったいくつかです：

Online-converter.com
Webp-convertor.com
ザムザール

先端： グーグルなら WebPをオンラインに変換 , あなたはおそらくより多くの選択肢を見つけるでしょう.

Photoshopのプラグイン

あなたはPhotoshop経由でWebPフォーマットに画像を保存することを可能にするPhotoshopプラグインもあることを知って喜んでいるかもしれません。このプラグインはMac OS X（CS 2 - CS 6）とWindows（32ビットと64ビット）をサポートします。 [ここからプラグインをダウンロードしてください。]

注意：ちょうどあなたが私がPhotoshop CCでそれを試したことを知っているべきであると思った。そこでは動作しませんでした.

WebPブラウザのサポート

最後に、互換性について話しましょう。現在、WebP形式の画像を以下のブラウザで表示できます（参照）。

iOS用Chrome / Chrome
オペラ/オペラミニ

それほど幸運ではない FireFox そして サファリ, まだWebPフォーマットをネイティブでサポートしていません。ただし、WebPJS Javascriptライブラリを使用すると、 クライアントサイトでWebP画像をdataURI文字列に変換する.

他の画像フォーマットにフォールバックする

サポートされていないブラウザによる画像エラーの表示を避けるために、必ずフォールバックを使用することをお勧めします。この場合、フォールバックはJPGまたはPNG形式の画像になります。これがあなたのやり方です.

  source srcset = "example.webp 1x" type = "image / webp">

このコードについて, images / webp-image-format_13.jpgの使い方ガイド ユーザーがFirefoxまたはSafariを使用している場合はロードされます。.

WebP画像をプレビューする

ChromeブラウザとOperaブラウザでWebP画像をプレビューできます。あなたのマシン上でローカルにそれをしたいのであれば、あなたはいくつかのツールが必要になります.

Macユーザーは、Quick Look機能を使用してWebP形式の画像をプレビューするためにWebPQuickLookを使用できます（画像を選択または強調表示した状態で、スペースキーを押します）。.

Windowsユーザーの場合、WebPCodecはファイルエクスプローラーにWebP画像のサムネイルプレビューを表示します。 WebPとJPEGの両方に相当するものが表示されます。サポートされている特定のWindow OS（Vista、7、8）では、WebP画像をWindows Photo Viewerにも表示できます。.

もっと： ReSCR.itは自動的にWeBPフォーマットで画像を配信し、あなたがMaxCDNであなたの画像を保存するならばそれは利用可能です。（続きを読む）

その他の参考文献

アニメーションGIFからWebPへの変換
WebPのしくみ
コンテンツ交渉を受け入れてWebPを展開する
WebPを使用した、高速、小型、そしてより美しいWeb
Web上での新しい画像フォーマットの配置
WebP APIドキュメント