Як готувати зображення, щоб сторінка залишалася швидкою

Фон — це і є майже вся сторінка

Сторінка-посилання в біо — це ім’я, короткий рядок про себе і стовпчик кнопок. У вигляді тексту це пара кілобайтів. Додайте один фоновий знімок на весь екран, і сторінка виросте в сотню разів. Фон до того ж найбільший елемент на екрані, а отже саме на нього чекає браузер, перш ніж вирішити, що сторінка домалювалася.

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

Що насправді видає камера телефона

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

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

Перевірити себе просто: подивіться властивості файлу перед завантаженням. Ширину в пікселях і вагу в мегабайтах видно одразу, і майже завжди обидва числа надлишкові для сторінки, яку дивляться з телефона.

Зменшення розміру дає найбільший виграш, і це не компроміс: зображенню, яке показують завширшки 1080 пікселів, чотири тисячі нічого не додають. Далі важить перекодування. AVIF зазвичай дає помітно менший файл, ніж JPEG з камери, за тієї самої візуальної якості, і мобільні браузери підтримують його вже кілька років.

Розмиття — прийом не лише дизайнерський

Стиснення працює так: відкидає деталі, яких око, найімовірніше, не помітить. Знімок, повний дрібної фактури — листя, жорства, натовп, — цьому опирається і залишається важким. Легке розмиття фону прибирає саме ту деталь, яка коштувала байтів, і файл за тієї самої якості помітно меншає.

Другий ефект — найкорисніший. Текст поверх різкої фотографії читається погано: літери сперечаються з межами предметів за ними. Легке розмиття плюс затемнювальний шар дають тексту спокійну поверхню. Обидва завдання — менший файл і читомий текст — потребують одного й того самого.

Контраст краще перевіряти, а не оцінювати на око. Білий текст поверх світлого неба виглядає нормально на яскравому екрані ноутбука і зникає на телефоні надворі. Якщо вагаєтеся, посилюйте затемнення, поки текст не стане очевидно читомим, і відступіть на крок назад.

Що лежить у файлі крім самого зображення

Знімок з телефона — це не лише пікселі. Блок EXIF зберігає модель камери, точний час і дуже часто координати GPS того місця, де зроблено кадр. Опублікувати фотографію власного під’їзду з доданими координатами — ризик цілком практичний.

Разом з EXIF знімається і прапорець орієнтації — тому зображення інколи виявляється поверненим після обробки. Правильний конвеєр спершу застосовує поворот до самих пікселів і лише потім викидає тег. Поворот — єдине, що з EXIF мусить уціліти, але в зображенні, а не в метаданих.

Зображення карток: однаковість важливіша за роздільність

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

• Кадруйте в одне співвідношення сторін до завантаження, а не після.
• Тримайте головне ближче до центру: на вузьких екранах картки обрізаються інакше.
• Не вміщуйте текст усередину зображення: у такому розмірі він нечитомий і не перекладається.
• Дивіться на сторінку загалом, а не на кожен знімок. Одна надто яскрава картка ламає порядок погляду.
• Знімок, який працює лише в повний розмір, замініть заливкою або простою іконкою.