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

Блок «**Изображение**» позволяет добавить к лонгриду картинку и настроить её внешний вид.

### Как выглядит блок?

[![image1-look.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image1-look.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image1-look.gif)

### Как добавить блок?

Наведите курсор на линию между блоками и нажмите на появившийся значок "**плюс**", чтобы открыть меню с блоками. [Подробнее о добавлении блоков](https://wiki.scroll-tool.ru/books/razdel-longridy/page/kak-dobavlyat-kontentnye-bloki).

<details id="bkmrk-"><summary>Как выглядит блок в меню</summary>

![image0-menu.jpg](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-10/scaled-1680-/image0-menu.jpg)

</details><details id="bkmrk-%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0-%D0%A7%D1%82%D0%BE"><summary>Добавление блока</summary>

[![image2-new.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image2-new.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image2-new.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как изменить содержимое?

Чтобы добавить своё изображение, нажмите на стартовую картинку и выберите нужный файл в проводнике.

<p class="callout info">Вы можете использовать изображения в формате **JPG**, **PNG**, **GIF**, **WEBP** и **SVG**.</p>

<p class="callout info">Максимальный размер файла изображения - **50Mb**</p>

<details id="bkmrk-%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F-%D1%80%D0%B0%D0%B7"><summary>Заполнение блока</summary>

[![image3-fill.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image3-fill.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image3-fill.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>Еще есть возможность сгенерировать картинку с помощью нейросети.

<details id="bkmrk-%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8"><summary>Генерация картинки</summary>

[![bandicam 2024-06-24 09-59-08-886.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/bandicam-2024-06-24-09-59-08-886.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-06/bandicam-2024-06-24-09-59-08-886.gif)

</details>### Как изменить внешний вид?

В блоке «**Изображение**» можно изменить:

- размер картинки

<details id="bkmrk-%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5-%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0-%D0%A7%D1%82"><summary>Размер картинки</summary>

Чтобы изменить размер изображения, двигайте ползунок ширины в правую или левую сторону. Или просто нажимайте на него в нужном месте. Текущая ширина указана в пикселях слева от ползунка. При изменении размера исходные пропорции сохраняются.

[![image4-size.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image4-size.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image4-size.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Как настроить?

Вы можете запретить ученикам **увеличивать изображение**. В таком случае они смогут посмотреть его только в том размере, который вы укажете.

По умолчанию увеличение изображения разрешено. Чтобы его запретить, нажмите на соответствующий переключатель.

<details id="bkmrk-%D0%97%D0%B0%D0%BF%D1%80%D0%B5%D1%82-%D1%83%D0%B2%D0%B5%D0%BB%D0%B8%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BA%D0%B0"><summary>Запрет увеличения картинки</summary>

[![image5-download.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image5-download.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2024-03/image5-download.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

<p class="callout info">**Совет**: если вы оставляете возможность для просмотра в полном размере **включенной**, то лучше не загружать в блок изображения с прозрачным фоном (такие изображения могут быть в формате png, gif, webp). Иначе при увеличении они не будут иметь фона.</p>

Пример с прозрачным фоном:

[![image3-transparent.gif](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)](https://wiki.scroll-tool.ru/uploads/images/gallery/2023-07/image3-transparent.gif)

*<span style="color: rgb(149, 165, 166);">Чтобы увеличить демонстрацию, нажмите на нее.</span>*

</details>### Есть ли альтернативные варианты этого блока?

Да. Вы можете добавить другой тип контентного блока [«Текст с изображением»](https://wiki.scroll-tool.ru/books/razdel-longridy/page/tekst-s-izobrazeniem).

### Как я могу использовать этот блок?

Этот блок хорошо подходит:

- Чтобы повысить наглядность лонгрида.  
    Например, вы можете поместить в этот блок схему процесса или образец вашей продукции.
- Чтобы украсить лонгрид.  
    Блок не обязательно должен содержать полезную для обучения картинку. Можно разместить просто красивое изображение в тему лонгрида. Например, в конце урока можно поместить картинку, которая сообщает об окончании урока. Красиво и функционально!

---

<p class="callout success">Если у вас остались вопросы, напишите нам на почту <info@scroll-tool.ru>.</p>