WebP画像形式

WebPは、Googleで開発されたオープンソースの画像形式であり、JPGやPNG形式に比べてサイズが小さい画像を生成すると同時に、見栄えの良い画像を生成することを約束します。

前書き

WebPは、Googleで開発されたオープンソースの画像形式であり、JPGやPNG形式に比べてサイズが小さい画像を生成すると同時に、見栄えの良い画像を生成することを約束します。

WebPはサポートします透明性、PNGやGIF画像のように。

WebPはサポートしますアニメーション、GIF画像のように

また、WebPを使用すると、画像の品質比を設定できるため、画像の品質を向上させるか、サイズを小さくするかを決定できます(JPG画像の場合と同様)。

そうWebPはすべてのGIF、JPG、PNG画像を実行できます、単一の形式で、生成します小さい画像。取引のように聞こえます。

さまざまな形式で画像がどのように見えるかを比較したい場合は、これがGoogleの素晴らしいギャラリーです

WebPはそうではありません新着、それはもう数年前からあります。

どれくらい小さいですか?

小さい画像を生成するという前提は非常に興味深いものです。特に、Webページのサイズの大部分は、ユーザーがダウンロードする必要のある画像アセットの量とサイズによって決まると考える場合はなおさらです。

Googleは比較研究この結果で100万枚の画像の結果について:

WebPは、JPEGまたはJPEG 2000よりも全体的に高い圧縮率を実現します。ファイルサイズの最小化の向上は、Webで最も一般的な画像である小さな画像で特に高くなります。

提供しようとしている画像の種類を試して、それに基づいて意見を形成する必要があります。

私のテストでは、PNGと比較してロスレス圧縮では、50%小さいWebP画像が生成されます。 PNGは、不可逆圧縮を使用する場合にのみそのファイルサイズに達します。

WebP画像の生成

最新のグラフィックおよび画像編集ツールはすべて、にエクスポートできます。.webpファイル。

画像を直接WebPに変換するコマンドラインツールもあります。グーグルツールのセットを提供しますこのため。

cwebp画像をに変換するためのメインコマンドラインユーティリティです.webp、で使用

cwebp image.png -o image.webp

を使用してすべてのオプションをチェックしてくださいcwebp -longhelp

ブラウザのサポート

WebPは現在によってサポートされています

  • クロム
  • オペラ
  • Opera Miniは
  • UCブラウザ
  • サムスンインターネット

ただし、Chrome forDesktopとOpera19 +のみがWebPのすべての機能を実装しています。

  • 非可逆圧縮
  • 可逆圧縮
  • 透明性
  • アニメーション

他のブラウザはサブセットのみを実装します。 SafariとIEはWebPをまったくサポートしておらず、これらのブラウザーにWebPがすぐに実装される兆候はありません。

ただし、Firefoxはバージョン65(2019年1月)以降のWebPとバージョン18以降のEdgeをサポートしています。

したがって、これらのユーザーに最適化された画像を提供し、サービスの提供を高速化し、帯域幅の消費を減らすことができれば、それは素晴らしいことです。ただし、実際に画像サイズが小さくなるかどうかを確認してください。

JPG / PNG画像最適化ツールの結果を確認し、WebPによって導入された複雑さのレイヤーを追加することが役立つかどうかを確認してください。

今日、WebPをどのように使用できますか?

これを行うには、いくつかの異なる方法があります。

JPGやPNGの代わりにWebP画像を提供するサーバーレベルのメカニズムを使用できます。HTTP_ACCEPTリクエストヘッダーにはimage/webp

1つ目は、あなたとあなたのWebページに対して完全に透過的であるため、最も便利です。

もう1つのオプションは、Modernizrを使用して、Modernizr.webp設定。

Internet Explorerをサポートする必要がない場合、非常に便利な方法は、<picture>タグ、現在サポートされていますOpera MiniとIE(すべてのバージョン)を除くすべての主要なブラウザによる。

ザ・<picture>タグは一般的にレスポンシブ画像に使用されますが、WebPにも使用できます。HTML5Rocksのこのチュートリアル説明します。

画像のリストを指定すると、それらが順番に使用されるため、次の例では、WebPをサポートするブラウザーが最初の画像を使用し、そうでない場合はJPGにフォールバックします。

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル: