Модуль @nuxt/image в Nuxt

Модуль @nuxt/image предоставляет оптимизированное решение для работы с изображениями в ваших Nuxt приложениях. Он предлагает автоматическую оптимизацию, различные стратегии доставки (включая CDN), ленивую загрузку и адаптивные изображения, что позволяет значительно улучшить производительность вашего сайта.

Установка

Для начала установите модуль @nuxt/image:

npm install --save @nuxt/image
# или
yarn add @nuxt/image

Затем добавьте @nuxt/image в секцию modules вашего файла nuxt.config.js:

export default {
  modules: [
    '@nuxt/image'
  ],
  image: {
    // Настройки модуля (см. ниже)
  }
  // ... другие настройки
}

Настройка (nuxt.config.js)

Модуль @nuxt/image имеет множество опций конфигурации, которые позволяют настроить его под ваши нужды. Некоторые из основных опций включают:

export default {
  modules: [
    '@nuxt/image'
  ],
  image: {
    provider: 'auto', // Автоматическое определение провайдера (local, ipx, cloudinary и др.)
    domains: [],      // Список разрешенных доменов для внешних изображений
    presets: {        // Пресеты для различных размеров изображений
      small: {
        modifiers: {
          width: 320,
          format: 'webp'
        }
      },
      medium: {
        modifiers: {
          width: 768,
          format: 'webp'
        }
      },
      large: {
        modifiers: {
          width: 1200,
          format: 'webp'
        }
      }
    },
    screens: {         // Брейкпоинты для адаптивных изображений
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280
    }
  },
  // ... другие настройки
}

Основные опции:

• provider: Определяет, как будут обрабатываться изображения. Значение 'auto' пытается автоматически определить лучший провайдер на основе доступных зависимостей. Другие варианты включают 'local' (для локальных изображений), 'ipx' (встроенный оптимизатор), а также интеграции с CDN (например, 'cloudinary', 'imgix', 'contentful').
• domains: Массив строк, содержащий домены, с которых разрешено загружать внешние изображения. Это важно для безопасности.
• presets: Объект, определяющий именованные наборы модификаторов (например, ширина, формат) для изображений. Вы можете использовать эти пресеты в компоненте <nuxt-img>.
• screens: Объект, определяющий брейкпоинты, используемые для генерации атрибута srcset для адаптивных изображений.

Использование компонента <nuxt-img>

Основной способ отображения оптимизированных изображений - использование компонента <nuxt-img>. Он предоставляет множество пропсов для настройки отображения и оптимизации изображений.

Пример базового использования:

<template>
  <nuxt-img src="/images/my-image.jpg" alt="Описание изображения" />
</template>

Основные пропсы:

• src: Путь к изображению (локальному или внешнему, если домен разрешен).
• alt: Альтернативный текст для изображения (важен для SEO и доступности).
• width: Желаемая ширина изображения (может использоваться для указания соотношения сторон).
• height: Желаемая высота изображения (может использоваться для указания соотношения сторон).
• format: Желаемый формат изображения (например, 'webp', 'jpeg', 'png', 'gif'). Модуль попытается преобразовать изображение в этот формат, если это поддерживается.
• quality: Качество сжатия изображения (от 1 до 100).
• sizes: Атрибут sizes для адаптивных изображений.
• loading: Атрибут loading для ленивой загрузки ('lazy', 'eager'). По умолчанию 'lazy'.
• preset: Имя определенного пресета из конфигурации модуля.
• modifiers: Объект с дополнительными модификаторами, которые переопределяют настройки по умолчанию или пресеты (например, { width: 600, blur: 10 }).
• provider: Позволяет переопределить провайдера для конкретного изображения.

Пример использования пресета:

<template>
  <nuxt-img src="/images/my-image.jpg" alt="Маленькое изображение" preset="small" />
</template>

Пример адаптивных изображений:

<template>
  <nuxt-img
    src="/images/responsive-image.jpg"
    alt="Адаптивное изображение"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px"
    :width="1200"
    :height="800"
  />
</template>

Модуль @nuxt/image автоматически генерирует атрибут srcset на основе указанных sizes и настроек screens, предоставляя браузеру различные версии изображения для разных размеров экрана.

Использование функции $img()

Помимо компонента, модуль также предоставляет глобальную функцию $img(), которую можно использовать в JavaScript коде или в шаблонах для получения URL-адресов оптимизированных изображений.

Пример использования в <script setup>:

<script setup>
const imageUrl = $img({ src: '/images/my-image.jpg', width: 400, format: 'webp' });
</script>

<template>
  <img :src="imageUrl" alt="Оптимизированное изображение">
</template>

Провайдеры изображений

Модуль @nuxt/image поддерживает различных провайдеров для обработки и доставки изображений:

• local: Обрабатывает локальные изображения с помощью встроенных оптимизаций.
• ipx: Мощный встроенный провайдер, предоставляющий множество возможностей для обработки изображений.
• CDN (Content Delivery Networks):
  • cloudinary
  • imgix
  • contentful
  • storyblok
  • prismic
  • sanity
  • strapi
  • imagekit
  • gumlet

Для использования CDN вам необходимо установить соответствующий пакет (например, @nuxtjs/cloudinary) и настроить провайдера в nuxt.config.js. Каждый CDN имеет свои специфические опции конфигурации.

Ленивая загрузка

По умолчанию компонент <nuxt-img> использует ленивую загрузку (loading="lazy"), что означает, что изображения загружаются только тогда, когда они становятся видимыми в области просмотра. Это может значительно улучшить время начальной загрузки страницы.

Оптимизация

Модуль @nuxt/image автоматически оптимизирует изображения, применяя сжатие и преобразование форматов (например, в WebP) для уменьшения размера файла без заметной потери качества.

Заключение

Модуль @nuxt/image является essential инструментом для оптимизации изображений в ваших Nuxt приложениях. Он упрощает процесс создания адаптивных, быстро загружающихся и SEO-дружественных изображений, что в конечном итоге приводит к лучшему пользовательскому опыту и улучшению производительности вашего сайта.