Webの競争イメージ形式👉 Webp

Webpは品質に妥協せずに小さいファイルサイズを作成する画像圧縮技術です
これは、ファイルのサイズを20 %から80 %

畝

主な特徴

🔷 2010年にGoogleによる開発者
🔷 オープンソース
🔷 拡張モジュール.Webp
🔷 MIMEのタイプ
🔷 可逆圧縮
🔷 サポートアニメーション
🔷 サポートアルファ透明
🔷 グーグル、バインド、Facebookによって使用される
畝

ブラウザサポート

✅ Chrome＞= V 9(2011年)
✅ Firefox = V 65 ( 2019年)
✅ Opera＞v 115(2011年)
✅ EDGE >= V 19 ( 2019年)
✅ サファリiOS >= v 14.4年(2020年)
✅ サファリは、MacOS 11またはそれ以降の必要があります
⛔ インターネットエクスプローラー*(ネイティブサポート)/IEの必要性フォールバック/ポリフィル

畝

使い方

1 )使用<picture> + <img> タグ

<picture>
  <source srcset="img/original.webp" type="image/webp">
  <source srcset="img/fallback.jpg" type="image/jpeg"> 
  <img src="img/fallback.jpg" alt="Alt Text!">
</picture>

注意このオプションは推奨され、ブラウザはそれ自身の
2 )使用<img> タグのみ

<img src="img/fallback.jpg" alt="Alt Text!">

古いブラウザ( Internet Explorerなど)を気にしない場合は、このオプションを選択するだけです
畝

ハウツーとスタイル

Googleは、既存のイメージ(PNG、GIF、JPG)をWebP形式に変えるために使うことができるコマンドラインツールで、Linux、WindowsとMacOSのためにそれ自身のパッケージをつくりました
リンクhttps://developers.google.com/speed/webp/download
このパッケージには

libwebpライブラリは、Webpのエンコードやデコードをプログラムに追加するために使用できます.

WWPエンコーダツール

Webpデコーダツール

vwebp -- Webpファイルビューアー

webpmux -- Webpのミュージングツール

GIF 2 Webp -- GIFイメージを変換するためのツール

使用法( Windowsの例)

cwebp.exe delivery_parcel.png -q 80 -o delivery_parcel.webp

delivery_parcel.png - ソースファイル

-q 80 - 品質param 80 %に設定

-o delivery_parcel.webp - 出力ファイル

オンラインコンバータ

https://cloudconvert.com/webp-converter

https://convertio.co/png-webp/

畝

フレームワークサポート

CMS

Drupalhttps://drupal.org/project/webp

Joomla :https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=webp

マジェントhttps://marketplace.magento.com/catalogsearch/result/?q=webp

ワードプレスhttps://wordpress.org/plugins/search/convert+webp/

JSフレームワーク(最適化された画像コンポーネント)

日本学術振興会

ギャツビー

NUXT

畝

自動変換

いくつかのCDNSは、CloudFlareのようなあなたのイメージの自動次世代変換をサポートしています

Thanks for reading 👍

Follow me on Twitter -