🔍 Введение

Tailwind Starter Blog имеет встроенную поддержку встроенного компонента изображений Next.js и автоматически заменяет стандартные теги изображений в markdown или MDX-документах на предоставляемый компонент Image.

🛠️ Использование

Для использования в новом маршруте страницы или JavaScript-файле просто импортируйте компонент изображения и используйте его, например:

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>Моя главная страница</h1>
      <Image src="/me.png" alt="Фотография автора" width={500} height={500} />
      <p>Добро пожаловать на мою страницу!</p>
    </>
  )
}

export default Home

Для markdown-файла можно использовать стандартный тег изображения, и тег img будет автоматически заменён на компонент Image во время сборки.

Предположим, у нас есть файл ocean.jpg в static/images/ocean.jpg, следующая строка кода сгенерирует оптимизированное изображение:

![океан](/static/images/ocean.jpg)

Альтернативно, поскольку мы используем MDX, мы можем напрямую использовать компонент Image! Обратите внимание, что в этом случае вам нужно будет указать фиксированные ширину и высоту. При использовании тега img размеры определяются автоматически.

<Image alt="океан" src="/static/images/ocean.jpg" width={256} height={128} />

Примечание: Если вы попытаетесь сохранить изображение, оно будет в формате WebP (если ваш браузер его поддерживает)!

Фото YUCAR FotoGrafik на Unsplash

✅ Преимущества

• Меньший размер изображений с WebP (примерно на 30% меньше, чем JPEG)
• Адаптивные изображения - загружается подходящий размер в зависимости от области просмотра пользователя
• Ленивая загрузка - изображения загружаются по мере прокрутки к ним
• Избегает кумулятивного сдвига макета (CLS)
• Оптимизация по запросу вместо оптимизации при сборке - без увеличения времени сборки!

⚠️ Ограничения

• Из-за зависимости от next/image, если вы не используете внешний CDN для изображений, такой как Cloudinary или Imgix, практически необходимо использовать Vercel для хостинга. Это связано с тем, что компонент действует как serverless-функция, которая обращается к высокооптимизированному CDN для изображений.

  Если вы не хотите быть привязанным к Vercel, вы можете удалить imgToJsx в remarkPlugins в файле lib/mdx.js. Это позволит избежать замены стандартного тега img.

  Альтернативно можно дождаться поддержки оптимизации изображений во время сборки. Другая библиотека, next-optimized-images, предоставляет такую возможность, хотя она требует преобразования изображений через webpack, что не реализовано в данном шаблоне.

• Изображения с внешних ссылок не обрабатываются через next/image

• Все изображения должны находиться в папке public, например: /static/images/ocean.jpeg