【Nuxt.js】画像データをwebPで軽量化よう

前置き

ファイル形式の1つ。
pngとかgifとかのあれです。
gif同様にアニメーションにも対応で、
画質は保ったまま、
容量を2, 3割程度で
圧縮できるものです💫

簡単にですが、
流れとコードを載せていきます✍️

参考サイト:
WebP（ウェッピー）とは？変換方法と使用するメリットのまとめ
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう
srcsetとsizes属性でサイズ(解像度)ごとに画像を出し分ける方法
レスポンシブの画像切り替えができるsrcset属性

webp形式に変換

用意したデータを
webPに変換したり
生成する必要があります💡

変換サイトで変換しましょう🧚‍♀️
https://squoosh.app/
画像を圧縮・最適化しよう（Squoosh編）

実際に試したところ、
80KB→11KBまで軽量化に成功👏

WPなどのCMSで使用する場合は
プラグインで変換&webp対応もできます。
画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

コード

staticの直下に
画像icon.webpを置いています。

画像の数が多く、
変換が面倒な場合は
gulp-webpなどを使用するのも
良いかもしれません🌟

こちらを参考に試してみましたが
上手く動かなかったので、
他で似たものがあれば使ってみたいです🤔💭
Nuxt.jsで画像をwebpで圧縮する

ただ表示だけしてみる

loading属性をlazyにし、
遅延読み込みをしています。

見えていない画面の画像まで
読み込む必要はないですよね？💡
表示している画面内(viewport)に
画像が入りそうになったら読み込むので、
パフォーマンスが向上します✨

遅延関連については
ここが分かりやすいです🍀
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説

srcset属性を使う

srcの場合は画像を1つ
指定するだけでしたが、
srcsetを使うことで
複数指定することができます🌟

画像のURLと記述子(デスクリプタ)をセットとして
カンマで区切って指定していきます✍️
使用可能な単位はviewportの横幅w、
またはデバイスピクセル比のxです。

端末の幅or比率に応じて
表示を変えるので
Chromeの検証でも
他の表示を確認することはできません👀
これを簡単に確認できるものが
ありそうですが…🤔💭

sizes属性

srcsetがある場合に使用できる属性です💫
srcsetを必ずwの単位にし、
viewportの半分のサイズで表示するなら
sizes="50vw"と書きます✍️

まとめ

webp形式と遅延読み込みで
サイト自体の軽量化ができるのは良いですね✨