Візуальний сайт не обов’язково має бути повільним. Найчастіше проблема не в кількості красивих фотографій, а в тому, як вони підготовлені й завантажуються. Великий оригінал, переданий на телефон для маленької картки, витрачає трафік без помітної користі. Водночас надмірне стиснення руйнує фактуру матеріалів і робить зображення неохайними. Потрібен не абстрактний мінімум кілобайтів, а розумний баланс відповідно до ролі кожного кадру.
Спочатку визначте призначення
Розділіть зображення на головні, інформаційні та декоративні. Головне фото може формувати перше враження, тому його якість важлива. Схема має залишатися читабельною, а мініатюра не потребує деталізації великого постера. Для кожного типу зафіксуйте співвідношення сторін і найбільший очікуваний розмір відображення. Це допомагає редактору готувати матеріали послідовно, а не щоразу експериментувати з обрізанням без зрозумілих правил.
Готуйте кілька розмірів
Адаптивні зображення дозволяють браузеру вибрати відповідний ресурс з урахуванням умов відображення. У документації web.dev описані механізми роботи з такими варіантами. На практиці потрібно перевірити, що мобільний користувач не завантажує без потреби той самий великий файл, що й настільний. Саме зменшення картинки стилями не зменшує обсяг переданих даних. Варіанти мають існувати як окремі підготовлені ресурси або створюватися відповідною системою обробки.
Порівнюйте формати на реальному матеріалі
Фотографія, ілюстрація з текстом та прозорий знак поводяться під час стиснення по-різному. Перевірте доступні сучасні формати й резервний варіант, якщо він потрібен вашій реалізації. Не обирайте налаштування лише за розміром файлу: відкрийте результат на цільовому екрані, подивіться на градієнти, контури та дрібні деталі. Важливі написи краще залишати справжнім текстом сторінки, а не вбудовувати в картинку, де їх складніше читати, копіювати й адаптувати.
Зважайте на порядок завантаження
Зображення далеко нижче першого екрана часто можна завантажувати пізніше. Натомість головний візуальний елемент не слід механічно відкладати разом з усіма іншими. Остаточне рішення приймайте після перевірки сторінки, а не за одним універсальним правилом. Також задавайте передбачуване місце для зображень у макеті, щоб їх поява не змушувала текст і кнопки стрибати. Користувач має зберігати орієнтацію, поки матеріали завантажуються.
Додайте змістовні описи
Альтернативний текст потрібен для змісту зображення в конкретному контексті, а не для механічного повторення ключових слів. Якщо фото показує важливу особливість роботи, коротко поясніть її. Декоративний елемент не повинен створювати зайвий шум для допоміжних технологій. Назви файлів і описи також зручніше впорядкувати під час підготовки матеріалів, ніж виправляти сотні випадкових назв після запуску каталогу.
Після оптимізації перевірте сторінку повторно на повільнішому з’єднанні та реальному телефоні. Порівняйте швидкість появи основного змісту, стабільність композиції та вигляд фотографій. Мета роботи не в тому, щоб сайт отримав красиве число в одному звіті, а в тому, щоб людина швидко побачила потрібне без втрати важливих деталей.