> ## Documentation Index
> Fetch the complete documentation index at: https://poehali.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Работа с изображениями

> Добавление и настройка изображений на сайте

## Редактор изображений

Редактор изображений позволяет добавлять, заменять и настраивать визуальные элементы вашего сайта. Вы можете работать с различными форматами изображений (PNG, JPG, SVG), логотипами и графическими элементами.

<Note>
  Качественные изображения значительно повышают привлекательность вашего сайта и помогают лучше донести информацию до клиентов.
</Note>

## Основные возможности

<AccordionGroup>
  <Accordion title="Добавление новых изображений">
    Прикрепите изображение к текстовому запросу в чате и укажите, где вы хотите его разместить.

    <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-1.png" alt="Прикрепление изображения в светлой теме" />

    <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-1.png" alt="Прикрепление изображения в темной теме" />

    <Note>
      Прикрепить можно:

      * Перетащив файл в чат
      * Через интерфейс
      * Вставкой из буфера (Ctrl+V или CMD+V)
    </Note>

    <Tip>
      Добавь эту картинку в карточку с Куршской косой \[kurshskaya.jpg].

      <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-2.png" alt="Прикрепление изображения в светлой теме" />

      <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-2.png" alt="Прикрепление изображения в темной теме" />
    </Tip>

    <Note>
      Поддерживаемые форматы: JPG, PNG, SVG
    </Note>
  </Accordion>

  <Accordion title="Замена существующих изображений">
    Используйте текстовые запросы с прикрепленным изображением для замены.

    <Tip>
      Замени картинку в карточке с Калининградом на прикреплённую \[kaliningrad.jpg].

      <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-3.png" alt="Замена изображения в светлой теме" />

      <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-3.png" alt="Замена изображения в темной теме" />

      <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-4.png" alt="Замена изображения в светлой теме" />

      <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-4.png" alt="Замена изображения в темной теме" />
    </Tip>
  </Accordion>

  <Accordion title="Настройка параметров изображений">
    Управляйте параметрами отображения и поведения изображений:

    * **Размер и масштабирование**: изменение размеров изображения и его адаптация для разных устройств

    <Tip>
      В разделе "Популярные направления" сделай высоту картинок в два раза меньше.

      <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-6.png" alt="Изменение высоты изображения в светлой теме" />

      <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-6.png" alt="Изменение высоты изображения в темной теме" />
    </Tip>

    * **Выравнивание**: расположение изображения на странице (по центру, слева, справа)

    <Tip>
      Расположение картинок в разделе "Популярные направления" сделай вертикальным.

      <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-7.png" alt="Выравнивание изображения в светлой теме" />

      <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-7.png" alt="Выравнивание изображения в темной теме" />
    </Tip>

    * **Рамки и тени**: добавление границ и теней для выделения изображений

    <Tip>
      Сделай рамки у картинок в разделе "Популярные направления" вот таким цветом #a3b5c2.

      <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-8.png" alt="Рамки на картинках в светлой теме" />

      <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-8.png" alt="Рамки на картинках в темной теме" />
    </Tip>

    * **Альтернативный текст**: добавление описания для улучшения доступности и SEO

    <Tip>
      В качестве альтернативного текста для картинки в карточке с Янтарным напиши "Посёлок Янтарный".

      <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-5.png" alt="Замена альтернативного текста изображения в светлой теме" />

      <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-5.png" alt="Замена альтернативного текста изображения в темной теме" />
    </Tip>
  </Accordion>

  <Accordion title="Работа с логотипами">
    Особое внимание к вашему фирменному стилю:

    <Steps>
      <Step title="Добавление логотипа">
        Загрузите логотип вашей компании и разместите его в ключевых местах сайта.

        <Note>
          Рекомендуется использовать SVG или PNG с прозрачным фоном для наилучшего качества при любом масштабировании.
        </Note>
      </Step>

      <Step title="Настройка отображения">
        Адаптируйте логотип для разных размеров экрана и версий сайта (светлая/темная тема).

        <Tip>
          Добавь версию логотипа для темной темы сайта с белыми элементами вместо черных.

          <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-10.png" alt="Редактирование логотипа в светлой теме" />

          <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-10.png" alt="Редактирование логотипа в темной теме" />

          <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-9.png" alt="Редактирование логотипа в светлой теме" />

          <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-9.png" alt="Редактирование логотипа в темной теме" />
        </Tip>
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Создание и настройка галерей">
    Организуйте коллекции изображений в удобном формате:

    <Steps>
      <Step title="Создание галереи">
        Создайте галерею изображений с помощью текстового запроса.

        <Tip>
          Создай галерею изображений на странице Направления/Калининград с сеткой 3x3.

          <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-11.png" alt="Галерея изображений в светлой теме" />

          <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-11.png" alt="Галерея изображений в темной теме" />
        </Tip>
      </Step>

      <Step title="Наполнение контентом">
        Добавьте изображения в галерею.

        <Tip>
          На странице /destinations/kaliningrad обнови картинку "Остров Канта".
          Вместо неё поставь прикреплённое изображение \[ostrov.jpg].

          <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-12.png" alt="Обновление галереи в светлой теме" />

          <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-12.png" alt="Обновление галереи в темной теме" />
        </Tip>
      </Step>

      <Step title="Настройка поведения">
        Выберите вид отображения (слайдер, сетка, карусель) и интерактивные функции.

        <Tip>
          Сделай галерею на странице /destinations/kaliningrad в виде автопрокручивающейся карусели с подписями под изображениями.

          <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-13.png" alt="Настройка галереи в светлой теме" />

          <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/image-edit-13.png" alt="Настройка галереи в темной теме" />
        </Tip>
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

## Советы

* **Выбирайте подходящий формат**:
  * JPG — для фотографий и плавных цветов
  * PNG — для прозрачности и четких линий
  * SVG — для логотипов и иконок

* **Следите за размером файла**:
  * Большие изображения замедляют загрузку
  * Маленькие могут выглядеть нечетко
  * Размер файла должен соответствовать размеру на странице

* **Соблюдайте единый стиль** — все изображения должны подходить к дизайну сайта

* **Обрабатывайте изображения** — используйте похожие фильтры для всех картинок