---
title: Изображения
description: Как подключать изображения через Next.js Image в проекте.
---

# Изображения

Как подключать изображения через Next.js Image в проекте.

## Назначение

Изображения рендерятся через компонент `Image` из `next/image`. Это сохраняет единый API для размеров, `alt`, lazy-loading и `priority`, даже если оптимизация изображений отключена.

В проекте оптимизация Next.js Image отключается через `unoptimized`, чтобы сборка и рантайм не зависели от встроенного image optimizer.

## Настройка

Отключение оптимизации задаётся глобально в `next.config.ts`:

```ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  images: {
    unoptimized: true,
  },
}

export default nextConfig
```

После этого `unoptimized` не нужно повторять на каждом `Image`.

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

Статические изображения, доступные по URL, размещаются в `public/`:

```text
public/
└── images/
    └── user-avatar.png
```

```tsx
import Image from 'next/image'

export const UserAvatar = () => {
  return (
    <Image
      src="/images/user-avatar.png"
      alt="Аватар пользователя"
      width={96}
      height={96}
    />
  )
}
```

## Правила

- Использовать `Image` из `next/image`, не обычный `<img>`.
- Для контентных изображений всегда писать осмысленный `alt`.
- Для декоративных изображений использовать `alt=""`.
- Указывать `width` и `height`, если изображение не использует `fill`.
- При `fill` задавать `sizes` и контролировать размеры родителя стилями.
- `priority` ставить только для изображений первого экрана.
- SVG-иконки не оформлять как изображения — для них используется раздел [SVG-спрайты](./svg-sprites/svg-sprites-intro.md).

## Пример с `fill`

```tsx
import Image from 'next/image'
import styles from '../styles/article-card-cover.module.css'

export const ArticleCardCover = () => {
  return (
    <div className={styles.root}>
      <Image
        src="/images/article-cover.jpg"
        alt="Обложка статьи"
        fill
        sizes="(min-width: 768px) 33vw, 100vw"
      />
    </div>
  )
}
```

```css
.root {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
```