> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Додавання зображень

Додавання зображень на сайт — чудовий спосіб проілюструвати те, про що йдеться на вашій сторінці, а також зробити акценти на її окремі частини. За допомогою нашого редактора ви можете додати зображення майже до будь-якого з готових блоків.

Перш ніж ви почнете, варто відзначити, що краще не перевантажувати сторінки великою кількістю графічного вмісту. Це не тільки суттєво погіршує швидкість завантаження сайту, але й зменшує рівень сприйняття користувачами текстового вмісту, який також є на сторінці.

Перегляньте відео нижче, щоб побачити, як ви можете додавати та редагувати зображення:

${youtube}[Додавання та редагування зображень на сайті](u-5FjRz4t9w)

# Додавання зображень

1. Спочатку слід обрати з галереї блок, що містить контейнер для зображення, і додати його на свій сайт:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot1-1_1sye1gh.png)

... або ви можете додати зображення як елемент до наявного блоку:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot2_14y4tnh.png)

| ${color}[#1aa900](Підказка:) перегляньте статтю про [Додавання елементів](https://help.weblium.com/uk/article/dodavannya-elementiv-1ebqukm/), щоб дізнатися, як можна покращити вигляд вашого блоку, збагачуючи його новими елементами.

2. Тепер натисніть на сам елемент, а потім на кнопку **Завантажити** у меню, що з'явиться:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot3-1_l7l39v.png)

3. У новому вікні ви побачите **Медіагалерею** свого сайту. На вкладці **Безкоштовні фотографії** ви можете переглядати стокові зображення на платформі [Unsplash](https://unsplash.com/), використовуючи ключові слова:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot4_3f860z.png)

4. Щоб завантажити власне зображення, перейдіть у вкладку **Мої зображення** та натисніть **Перегляд файли**, щоб вибрати фотографію зі свого комп’ютера:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot5_1xlr8vy.png)

Ви також можете просто перетягнути зображення з комп’ютера в галерею.

||| ${color}[#f97700](Важливо:)  підтримувані формати файлів: PNG, JPG, SVG, WebP, GIF та AVIF. 

5. Зачекайте, поки редактор завантажить та оптимізує ваше зображення, а потім натисніть на нього, щоб додати зображення до блоку:

![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/screenshot6_tntteu.png)

Готово! Продовжуйте налаштування зображення, дотримуючись кроків у статті [Редагування зображеннь](https://help.weblium.com/uk/article/redaguvannya-zobrazhen-1x7wx8g/).