> ## 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).

# Редагування зображень

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

|| ${color}[#ffa800](Примітка:) попри те, що Weblium автоматично оптимізує зображення, які ви додаєте на сайт, велика кількість медіафайлів на сторінці все одно може вплинути на [швидкість завантаження сайту](https://help.weblium.com/uk/article/shvidkist-zavantazhennya-sajtu-rlvnq4/).

Використовуйте інструменти, доступні в редакторі, щоб редагувати зображення та покращувати дизайн вашого сайту.

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

# Редагування зображень

Якщо зображення було додано як самостійний елемент або як частину галереї, натисніть на нього та відкрийте **Налаштування зображення** за допомогою «шестерні»:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/redzob-ukr-1_1g4ft1y.png)
|| ${color}[#ffa800](Примітка:) якщо ви хочете відредагувати фон блоку, перегляньте статтю [Зміна дизайну блоку](https://help.weblium.com/uk/article/zmina-dizajnu-bloku-1tpp5tl/).

### Можливі варіанти налаштування

1. Накладання кольору на зображення може значно покращити його читабельність:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/redzob-ukr-2_aiydrk.png)
2. Додавання фільтра може суттєво змінити вигляд вашого зображення, якщо ви налаштуєте його яскравість, різкість, насиченість або прозорість:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/redzob-ukr-3_169utw7.png)
3. Зміна режиму масштабування дозволяє вирішити, як зображення буде розміщуватися в контейнері — чи буде воно повністю його заповнювати, чи залишатися у своїх оригінальних пропорціях:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/redzob-ukr-4_15fed27.png)

4. Зміна стилю зображення вмикає або вимикає закруглені кути:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/redzob-ukr-5_3eiv1l.png)
|| ${color}[#ffa800](Примітка:) ця функція працює лише в тому разі, якщо зображення буде заповнювати увесь фон відповідно до налаштування, згаданого вище.

### Зміна відображення зображення

1. Ви можете розтягнути зображення, перетягнувши маркер знизу:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/drag_f1oeih.png)
2. Ви також можете встановити зону для відображення за допомогою «лупи»:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/magn_ikm6re.png)
3. Змініть відображення, перетягуючи саме зображення в контейнері та одночасно утримуючи ліву кнопку миші:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/move_w30bb5.png)
[Опублікуйте сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), щоб застосувати зміни.