Прекрасно снятая, тщательно отретушированная фотография, загружающаяся несколько секунд, уже потеряла часть людей, которые могли бы её увидеть, потому что медленно загружающаяся страница теряет посетителей раньше, чем изображение вообще успевает отрисоваться. Выбор формата файла и настройки сжатия, сделанный однажды при экспорте, влияет на то, сколько людей реально увидит фотографию, больше, чем почти любое другое решение, принятое после самой съёмки.
JPEG, WebP и AVIF на практике
JPEG — давний вариант по умолчанию: поддерживается повсеместно, достаточно эффективен и безопасный запасной вариант там, где совместимость под вопросом. WebP обычно даёт заметно меньший файл, чем JPEG при сравнимом визуальном качестве, и теперь поддерживается практически всеми современными браузерами, что делает его разумным вариантом по умолчанию для большинства веб-задач, а не нишевым выбором. AVIF во многих случаях сжимает ещё сильнее, ценой чуть более тяжёлого кодирования и, в некоторых старых или менее распространённых сочетаниях браузеров и инструментов, менее стабильной поддержки — стоит протестировать на собственном сайте, прежде чем переводить всю библиотеку, а не предполагать, что он ведёт себя одинаково везде.
Где разница в качестве перестаёт быть заметной
Сжатие — не всё или ничего, это плавная шкала, и после определённой точки на этой шкале дальнейшее сжатие экономит размер файла, а зритель не может заметить разницу при обычном размере и расстоянии просмотра. Порог зависит от изображения: фотография с крупными областями ровного цвета или мягким фокусом переносит более сильное сжатие до появления артефактов, чем изображение, полное мелких деталей и резких границ — текста, узоров или сложной текстуры. Практический подход — сжимать до точки, где сэкономленный размер файла перестаёт стоить риска заметной потери качества именно для этого изображения, а не применять одну общую настройку ко всей библиотеке независимо от содержимого.
Подбирайте размер изображения под то, где оно реально показывается
Фотография, экспортированная в полном разрешении съёмки и затем просто уменьшенная браузером, тратит трафик на пиксели, которых никто не видит, — браузеру всё равно приходится скачать полный файл, прежде чем визуально его уменьшить. Экспорт нескольких размеров, соответствующих тому, где изображение реально появится — маленькая миниатюра, карточка среднего размера, полноширинный герой, — и подача подходящего варианта для каждого контекста даёт больший прирост скорости загрузки, чем почти любая отдельная настройка сжатия.
Это решение о доставке, а не только техническое
Выбор формата и размера происходит после завершения творческой работы, но он всё равно определяет, увидят ли эту работу так, как задумано, — прекрасно освещённая фотография, медленно грузящаяся под индикатором загрузки, соревнующаяся с нетерпением посетителя, не представляет съёмку так, как та же фотография, загружающаяся мгновенно. Отношение к настройкам экспорта как к части производственного процесса, а не как к второстепенной детали, отдаваемой на откуп общим настройкам платформы, на которой работает сайт, защищает ценность самой фотографии.
Реальный тест скорости надёжнее предположений
Даже при продуманных настройках экспорта именно измерение реального времени загрузки на относительно медленном соединении — а не предположение, что каждый посетитель заходит по быстрой сети, — показывает, действительно ли выбранных настроек достаточно. Изображение, кажущееся лёгким на рабочем компьютере разработчика с быстрым интернетом, может всё ещё грузиться медленно на телефоне с обычной мобильной связью, и именно эта разница решает, увидит ли посетитель фотографию вообще, прежде чем уйдёт со страницы.
Наша команда экспортирует и подаёт изображения с форматом, сжатием и размером, подобранными под то, как сайт реально их загружает, потому что фотография, которая так и не загрузилась до конца, на самом деле вообще не была увидена — как бы хорошо она ни была снята.
