https://github.com/nuxt/image

Plug-and-play image optimization for Nuxt applications.
https://github.com/nuxt/image

image-optimization nuxt nuxt-module

Last synced: 6 days ago
JSON representation

Plug-and-play image optimization for Nuxt applications.

• Host: GitHub
• URL: https://github.com/nuxt/image
• Owner: nuxt
• License: mit
• Created: 2020-09-04T11:53:52.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-24T19:48:01.000Z (10 days ago)
• Last Synced: 2024-10-24T21:47:00.612Z (10 days ago)
• Topics: image-optimization, nuxt, nuxt-module
• Language: TypeScript
• Homepage: https://image.nuxt.com
• Size: 23.3 MB
• Stars: 1,337
• Watchers: 21
• Forks: 271
• Open Issues: 362
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        
[![nuxt-image-social-card](https://github-production-user-asset-6210df.s3.amazonaws.com/904724/261574805-5af726c5-0113-4676-9ee9-c464393caee0.png)](https://image.nuxt.com)

[![npm version][npm-version-src]][npm-version-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![License][license-src]][license-href]

[![Nuxt][nuxt-src]][nuxt-href]

[![Volta][volta-src]][volta-href]

# Nuxt Image

Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.

- [📖  Read Documentation](https://image.nuxt.com)

- [👾  Playground](https://stackblitz.com/github/nuxt/image/tree/main/example)

## Features

- `` drop-in replacement for the native `` element

- `` drop-in replacement for the native `` element.

- Built-in image resizer and transformer with [unjs/ipx](https://github.com/unjs/ipx)

- Support 20+ providers

- Generate responsive sizes

- Optimize using modern formats such as webp and avif

- [... and more](https://image.nuxtjs.org)

## Nuxt 2

**Note:** This branch is for **Nuxt 3** compatible module. Checkout [`v0` branch](https://github.com/nuxt/image/tree/v0) for **Nuxt 2** support. ([Announcement](https://github.com/nuxt/image/discussions/548))

### Contributing

- Clone this repository

- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`

- Install dependencies using `pnpm install`

- Run `pnpm dev:prepare` to generate type stubs.

- Use `pnpm dev` to start [playground](./playground) in development mode.

## 📑 License

Published under the [MIT License](./LICENSE)

[npm-version-src]: https://img.shields.io/npm/v/@nuxt/image/latest.svg?style=flat&colorA=18181B&colorB=28CF8D

[npm-version-href]: https://npmjs.com/package/@nuxt/image/v/latest

[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxt/image.svg?style=flat&colorA=18181B&colorB=28CF8D

[npm-downloads-href]: https://npm.chart.dev/@nuxt/image

[license-src]: https://img.shields.io/npm/l/@nuxt/image.svg?style=flat&colorA=18181B&colorB=28CF8D

[license-href]: https://npmjs.com/package/@nuxt/image

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js

[nuxt-href]: https://nuxt.com

[volta-src]: https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg

[volta-href]: https://volta.net/nuxt/image?utm_source=nuxt_image_readme