お久しぶりです。土曜日の昼下がり、マックでバッテリー残量27%のmacを開いてる金欠ダメ人間です。 
(結局40分弱でバッテリー5%になったため夜投稿)
色々と窓際初心者エンジニアの所感についてどばどば書き連ねたいことばかりなのですが、
ひょんなことから、
ページの読み込みスピードアゲるぜッ、
→画像小さくするぜッ()
→なんか画像色々あるぜッ()
→WebPまじすげー(イマココ)
という運びとなり、(お付き合いいただきありがとうございます)
この感動を書き留めるために書き連ねていきたいと思います。
WebPとは
WebP(ウェッピー)は、Googleが開発しているオープン標準の静止画像フォーマット。ファイルの拡張子は「.webp」。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、・・・非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。
https://ja.wikipedia.org/wiki/WebP
な、なんとこのWebPさん、Google先生が2010年に出されていたんですね。。。
というか2010年からSEOのために策が練られていただなんて。。
対応ブラウザ (2023年10月時点)
感動的な対応ですね。(適当)
⬇️ WebP (2023年10月時点)
https://caniuse.com/?search=webp
⬇️ AVIF (2023年10月時点)
https://caniuse.com/?search=avif
そうなんです。
どうせ画像フォーマットを変換するなら、WebPより優秀と言われるAVIFがいいのではないかと、Google検索をするたびにひしひしと感じました。。
こんな記事や
あんな記事
しかし、CDNやJSを記載し、非対応ブラウザへの懸念を抱くよりは、容量が少しは削減できて、今んとこEdgeなども対応してもらえているWebPでいっか、という所感です。
未来に洪水よきたれ。。。(?)
WebP拡張子への変更方法 ※macでPhotoshopを利用する場合
フォトショ開く > ファイル > コピーを保存(or command + opt + S) > 画質設定 > 完
各画像形態と元画像との比較
〜劣化なし・劣化あり(最高(100)、高(75)、中(50)、低(25)、最小(0))、ついでにPNG、SVG、GIFも添えて〜
「劣化なし」を選ぶと元画像のJPGより容量を食ってしまうが、「劣化あり」かつ「最高」もしくは「高」にした場合には容量はなんと半分イカ。
そして画質はイカの場合だとあまり気にならず。
最高でも半分イカになるのはとても胸アツ。
| 種類 | 状態 | 容量 | 画像 |
|---|---|---|---|
| JPG | 元画像 | 952KB | - |
| WebP | 【劣化なし】 | 1.3MB |
|
| WebP | 【劣化あり】 最高(100) | 445KB |
|
| WebP | 【劣化あり】 高(75) | 52KB |
|
| WebP | 【劣化あり】 中(50) | 38KB |
|
| WebP | 【劣化あり】 小(25) | 27KB |
|
| WebP | 【劣化あり】 最低(0) | 14KB |
|
| PNG | - | 2.1MB |
|
| SVG | - | 1.3MB |
|
| GIF | - | 996KB |
|
結論
被写体選びを間違えました。。。。
イカは高画質でも低画質でもまぁ。。。いっか (🦑💢)
画像のイカについて
イカの名誉のためにこの比較画像のサンプルたらしめた理由をお伝えしたいと思います。
今季秋アニメ「葬送のフリーレン」のテンプレドワーフキャラ、「アイゼン」にくりそつだったからです。
参考にした記事
この方の記事のおかげで、フォトショ開いて「command・option・S」の冬の直角三角形さながらにWebPを分で量産できました(メモリさえあれば秒でできますTT)
この方の「次世代画像フォーマット戦争」なる表現と一覧、とても参考になり、柴犬(?)とも猫とも言えないキャラクターのグラフが鬼カワでした
"weppi"読み論争の部分で拝読。GIFにも読み方論争あったんですかね。。調べよう
余談
PNGのことを「ぺんぐ」、
WebPのことを「ウェブピー」、
だと思っていました。
「ウェッピー」だと知ってからは陽キャがポリっぴー食べてるイメージで発音してます(ウェイ卍)
何を隠そう、ど底辺窓際インキャダメ人間です。とほほ