Как готовить картинки, чтобы страница оставалась быстрой

Фон — это и есть почти вся страница

Страница-ссылка в био — это имя, короткая строка о себе и столбик кнопок. В виде текста это пара килобайт. Добавьте один фоновый снимок на весь экран, и страница вырастет в сотню раз. Фон к тому же самый крупный элемент на экране, а значит именно его браузер ждёт, прежде чем решить, что страница отрисовалась.

Картинки на карточках ссылок идут вторыми. Каждая на экране маленькая, но на странице с десятью ссылками их десять, и десять посредственных файлов набирают вес быстрее, чем один плохой.

Что на самом деле выдаёт камера телефона

Снимок прямо с современного телефона — это обычно три-шесть мегабайт и несколько тысяч пикселей по ширине. Телефон, на котором открывают вашу страницу, показывает примерно тысячу пикселей. Всё, что сверх этого, скачивается, распаковывается и выбрасывается.

Загрузить оригинал как есть — самая частая ошибка на странице-ссылке, и автор её не видит. Снимок и так лежал у него на устройстве, поэтому открывается мгновенно. Платит за это посетитель в электричке, на слабой мобильной связи, у которого страница пару секунд остаётся пустой.

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

Уменьшение размера даёт самый большой выигрыш, и это не компромисс: картинке, которую показывают шириной в 1080 пикселей, четыре тысячи ничего не добавляют. Дальше важно перекодирование. AVIF обычно даёт заметно меньший файл, чем JPEG с камеры, при том же визуальном качестве, и мобильные браузеры поддерживают его уже несколько лет.

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

Сжатие работает так: выбрасывает детали, которых глаз, скорее всего, не хватится. Снимок, полный мелкой фактуры — листва, гравий, толпа, — этому сопротивляется и остаётся тяжёлым. Лёгкое размытие фона убирает ровно ту деталь, которая стоила байтов, и файл при том же качестве заметно уменьшается.

Второй эффект — самый полезный. Текст поверх резкой фотографии читается плохо: буквы спорят с границами предметов за ними. Лёгкое размытие плюс затемняющий слой дают тексту спокойную поверхность. Обе задачи — файл поменьше и читаемый текст — требуют одного и того же.

Контраст лучше проверять, а не оценивать на глаз. Белый текст поверх светлого неба выглядит нормально на ярком экране ноутбука и исчезает на телефоне на улице. Если сомневаетесь, усиливайте затемнение, пока текст не станет очевидно читаемым, и отступите на шаг назад.

Что лежит в файле кроме самой картинки

Снимок с телефона — это не только пиксели. Блок EXIF хранит модель камеры, точное время и очень часто координаты GPS того места, где сделан кадр. Опубликовать фотографию собственного подъезда с приложенными координатами — риск вполне практический.

Вместе с EXIF снимается и флаг ориентации — поэтому картинка иногда оказывается повёрнутой после обработки. Правильный конвейер сначала применяет поворот к самим пикселям и только потом выбрасывает тег. Поворот — единственное, что из EXIF обязано уцелеть, но в изображении, а не в метаданных.

Картинки карточек: единообразие важнее разрешения

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

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