画像型式webpの画質サンプル
顧客向けに作成したwebp画質サンプルですが、
せっかくなので公開します。
顧客向けに作成したwebp画質サンプルですが、せっかくなので公開します。
以下のリンク先に記載している「1300w-webp80-80k」といった記述は、横幅1300ピクセル-webp型式で画質80で出力して-データ量的には80kである、という意味です。各サンプルで4枚写真をアップしていますが上からjpg、webp(下に行くほど画質が下がる)といった順番でサンプルを掲載しています。
Webp型式の対応状況ですが、WebP完全対応:日本90.58%、世界92.31%のようです。日本が世界より対応率が低い点、これはwebp非対応環境として、IE すべてのバージョン、MacOS Catalina以前のバージョン、iOS iOS 13以前、となっています。
つまりMac環境はOSが影響します。WindowsはIEを使用しなければOSバージョンは影響しません。なので、Macユーザーが多いエリアはどうしても非対応が発生します。アジアやアフリカなどは、Macユーザーはほぼ存在しなくて、WindowsとAndroidなのでほぼWebp対応と推察します。

人物のサンプルです。webpにすることで彩度が減少しているようですので次のサンプルは彩度をあげています。
https://itup.me/faq_cms/sample-design/img-quality-test/persons1300w/

彩度を上げた人物写真のサンプルです。
https://itup.me/faq_cms/sample-design/img-quality-test/persons1300wa/

横幅1920ピクセルの人物写真のサンプルです。彩度は調整していません。
https://itup.me/faq_cms/sample-design/img-quality-test/persons1920w/

渋谷風景写真のサンプルです。かなりwebpで画質レベルを落としてもなんとか見えるレベルです。彩度の調整はナシです。
https://itup.me/faq_cms/sample-design/img-quality-test/1920w/