🏔️
NuxtImgタグ使ってる？
こんにちは、keigoです。私は日常的にNuxt3プロジェクトを触っています。その中で、意外と使われてないかも？と思ったNuxtImgについて紹介します。
Nuxt Imageとは
Nuxt 3フレームワークで使用される画像最適化モジュールです。
導入の仕方や設定などは公式ドキュメントを参照してください。
タグの使い方：以下のような感じで、imgタグのノリで使えます。
<template>
<div>
<NuxtImg src="/path/to/your/image.jpg" alt="説明テキスト" />
</div>
</template>
どんなメリットがあるの？
画像のリサイズ
NuxtImgは、指定された画像のサイズにリサイズし、圧縮することができます。
以下のようなコードを書くことで実現可能です。
<template>
<div>
<NuxtImg src="/path/to/your/image.jpg" width="300" height="200" alt="画像の説明" />
</div>
</template>
毎回画像をローカルでリサイズして、圧縮サイトとか使って圧縮しなくていいんですね、非常に便利
レスポンシブ時に別のサイズの画像を表示できる
PCサイズでmax-width: 800px;とかやっても、スマホのときは800pxも表示させないじゃないですか。その場合に以下のような指定をすることで、画面サイズごとに最適化された画像を表示させることができます。
<template>
<div>
<!-- ビューポートの幅が320px以下の場合、画像は280pxの幅で表示されます -->
<!-- ビューポートの幅が768px以下の場合、画像は600pxの幅で表示されます -->
<NuxtImg
src="/path/to/your/image.jpg"
sizes="(max-width: 320px) 280px, (max-width: 768px) 600px, 800px"
width="800"
alt="画像の説明"
/>
</div>
</template>
webpで配信できる
以下のように、format="webp"と記述すると、
<template>
<div>
<NuxtImg format="webp" src="/path/to/your/image.jpg" alt="説明テキスト" />
</div>
</template>
webp形式で配信されます。非常に便利ですね。
おわりに
基本的に使って損ないので、Nuxt3プロジェクトを使っている方はぜひimgタグじゃなくてNuxtImgタグで画像を最適化しましょう！
Discussion