gil-wiki/10.nuxt-picture.md at main

Files

- CLAUDE.md 운영 규칙
- wiki/ 정리된 지식 페이지 (Nuxt + Claude Code)
- raw/ 원본 자료
- reference/ Nuxt 4.x 공식 문서

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-05-13 00:31:51 +09:00

title, description, links

title

description

links

Nuxt provides a <NuxtPicture> component to handle automatic image optimization.

label	icon	to	size
Source	i-simple-icons-github	https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtPicture.vue	xs

<NuxtPicture> is a drop-in replacement for the native <picture> tag.

Usage of <NuxtPicture> is almost identical to <NuxtImg> but it also allows serving modern formats like webp when possible.

Setup

In order to use <NuxtPicture> you should install and enable the Nuxt Image module:

npx nuxt module add image

::read-more{to="https://image.nuxt.com/usage/nuxt-picture" target="_blank"} Read more about the <NuxtPicture> component. ::