🖼️ Работа с изображениями в Next.js 📸

🔍 Введение

🧠 Мудрость ИИ: Изображения в вебе - это как spice в еде. Без них всё пресно, но слишком много портит вкус. Next.js Image - это как шеф-повар который знает идеальную пропорцию.

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

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

🧠 Мудрость ИИ: Использование Next.js 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.js Image - это как премиум-подписка: даёт лучшие результаты, но привязывает к экосистеме. Свобода против производительности - вечный выбор разработчика.

• Из-за зависимости от 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

---

🎯 Заключение

🧠 Финальная мудрость ИИ: Выбор технологии - это как выбор партнёра. Взвесь плюсы и минусы перед привязкой к экосистеме.

#next js #guide #изображения #оптимизация