Формат ВебП и вес картинок на сайте

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

Почему это важнее, чем кажется

Связь прямая: медленный сайт теряет посетителей, а вместе с ними обращения.

Человек с телефона на среднем мобильном интернете ждёт открытия несколько секунд. Если за это время ничего не появилось, он возвращается в поиск и открывает следующую компанию. Причём чаще всего он даже не осознаёт, что «не дождался» — просто уходит.

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

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

И четвёртая, организационная: тяжёлые изображения раздувают размер сайта, замедляют резервное копирование и в какой-то момент упираются в ограничения тарифа.

Из чего складывается вес

Прежде чем оптимизировать, стоит понять, что именно влияет.

Размер в пикселях. Главный фактор. Снимок с телефона имеет ширину несколько тысяч точек. На сайте он показывается в блоке шириной, скажем, восемьсот. Браузер скачивает полный файл и уменьшает его при отображении — то есть человек качает в разы больше, чем видит.

Формат. Разные форматы по-разному эффективны. Фотографии, схемы, логотипы и иконки требуют разного подхода.

Степень сжатия. Для фотографических форматов можно задать качество: чем ниже, тем меньше вес и заметнее артефакты. Разумный компромисс обычно находится в районе 75–85 процентов, и разница с оригиналом на глаз не видна.

Лишние данные внутри файла. Снимки с камер и телефонов содержат служебную информацию: модель устройства, настройки съёмки, иногда координаты места. Для сайта она не нужна, а вес добавляет. Координаты, кстати, стоит удалять и по соображениям приватности.

Количество изображений на странице. Галерея из ста снимков тяжела даже при хорошей оптимизации каждого.

Форматы: что для чего

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

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

Векторный формат. Для логотипов, иконок, схем, графиков. Не теряет чёткости при любом увеличении, весит мало, редактируется текстом. Лучший выбор для всего, что нарисовано, а не сфотографировано.

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

Более новые форматы сжимают ещё сильнее, но поддержка пока неполная, и для большинства корпоративных сайтов переходить на них рано.

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

Как перейти на ВебП

Есть три подхода, и выбор зависит от того, как устроен сайт.

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

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

Подмена на стороне сервера. Сервер смотрит, поддерживает ли браузер новый формат, и отдаёт соответствующий файл по тому же адресу. Удобно тем, что не требует менять вёрстку.

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

В ХостСМС работа с изображениями устроена штатно: при загрузке система создаёт уменьшенные копии нужных размеров, а формат и степень сжатия задаются настройками. Менеджер просто загружает снимок с телефона, а система сама приводит его к нужному виду. Это принципиальный момент — оптимизация должна быть частью процесса загрузки, иначе она не работает. На 1С-Битрикс и ВордПресс задача решается похоже, встроенными средствами или модулями.

Адаптивные изображения: разные размеры для разных экранов

Вторая по важности вещь после формата, и о ней часто забывают.

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

Эффект заметный: телефон вместо изображения шириной две тысячи точек скачивает версию на восемьсот — экономия в несколько раз на каждой картинке.

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

Отложенная загрузка

Третий приём, который заметно ускоряет страницы с большим количеством изображений.

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

Важная тонкость: изображения на первом экране откладывать не нужно. Наоборот, они должны загружаться в первую очередь, потому что именно их человек видит сразу. Массовое включение отложенной загрузки для всех картинок подряд иногда замедляет отображение первого экрана.

Ещё одна: при отложенной загрузке нужно резервировать место под изображение, иначе при прокрутке содержимое будет подпрыгивать.

Организационная сторона: как не сломать всё руками менеджера

Техническая настройка бессмысленна, если каждый день кто-то загружает на сайт снимки по восемь мегабайт.

Что помогает.

Автоматическая обработка при загрузке. Главное. Система должна сама уменьшать, сжимать и конвертировать. Тогда человеческий фактор исключён.

Ограничение на размер файла с понятным сообщением, если оно всё же нужно.

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

Периодическая проверка. Раз в квартал посмотреть вес нескольких последних страниц.

Ответственный. Человек, который отвечает за скорость сайта в целом.

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

Подход «три в одном»: где ещё это отражается

Вес изображений кажется внутренней технической задачей сайта, но он касается всех трёх источников обращений.

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

Второй канал — Яндекс.Справочник и карточка в Яндекс Бизнесе. Фотографии в карточке — один из главных факторов выбора, и загружаются они на серверы площадки, где обрабатываются автоматически. То есть о весе там думать не нужно, зато нужно думать о количестве и качестве: карточка с полусотней снимков работает принципиально лучше карточки с тремя. Это ровно те же фотографии, что и на сайте, — одна съёмка обслуживает оба канала.

Третий канал — 2ГИС. То же самое: отдельная аудитория, отдельная галерея, те же снимки.

Практический вывод: обрабатывая фотографии после съёмки, готовьте сразу два набора — оптимизированный для сайта и полноразмерный для карточек. Работа одна, отдача тройная. А компания, у которой сайт медленный из-за картинок, а карточки пустые, теряет и там, и там.

Что делать с уже накопленным архивом

Отдельная ситуация: сайту пять лет, в нём три тысячи изображений, и все загружены как попало.

Порядок действий такой.

Сначала копия. Полная резервная копия файлов и базы. Массовая обработка изображений — необратимая операция, и если что-то пойдёт не так, восстанавливаться придётся именно отсюда.

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

Обработка пакетно. Уменьшение до разумного максимального размера, сжатие, конвертация. Делается скриптом за один проход.

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

Пересоздание уменьшенных копий. Система должна заново сгенерировать версии под разные экраны.

Замер до и после. Чтобы понимать эффект.

На практике такая разовая работа часто уменьшает общий вес изображений в три-пять раз. Побочная выгода: резервные копии начинают делаться быстрее, а место на хостинге перестаёт заканчиваться.

Отдельно стоит пройтись по самым посещаемым страницам вручную: главная, страницы услуг, входные страницы каталога. Там выигрыш от оптимизации ощущается сильнее всего, потому что их открывают чаще.

Видео на страницах

Смежная и не менее важная тема, потому что видео весит на порядок больше изображений.

Главное правило: видео не должно загружаться автоматически при открытии страницы. Человек, который зашёл почитать про услугу, не должен скачивать сорок мегабайт ролика, который он, возможно, не станет смотреть.

Правильный подход — показывать превью-картинку с кнопкой воспроизведения, а сам ролик подгружать по нажатию. Ещё лучше — размещать видео на внешнем сервисе и встраивать его, тогда нагрузка не ложится на ваш хостинг вовсе.

Фоновое видео на первом экране — популярный приём, который почти всегда вредит: на мобильном оно либо не проигрывается, либо съедает трафик и замедляет всё остальное. Если очень хочется, его стоит отключать на телефонах, оставляя статичную картинку.

Как измерить результат

Вес страницы и время загрузки до и после — на телефоне и при медленном соединении, а не на офисном компьютере.

Отчёт по скорости в Яндекс.Метрике. Там есть данные о времени загрузки у реальных посетителей, и это честнее любых синтетических тестов.

Доля уходов в первые секунды. Если она падала из-за медленной загрузки, после оптимизации станет заметно лучше.

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

Количество обращений с мобильных. Конечный показатель, ради которого всё делается.

Переходы из поиска по картинкам — как отдельный источник в Яндекс.Метрике.

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

Частые ошибки

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

Коротко

Изображения занимают основную часть веса страницы, а значит, определяют, откроется ли сайт у человека с телефона. Уменьшение размера в пикселях под реальные размеры показа даёт больше всего, переход на формат ВебП добавляет ещё четверть-треть экономии, адаптивные варианты и отложенная загрузка закрывают остальное. Для логотипов и иконок правильный выбор — векторный формат. Ключевое условие: вся обработка должна происходить автоматически при загрузке, иначе она не будет выполняться. Те же фотографии в полном размере идут в карточки Яндекс Бизнеса и 2ГИС, где чем их больше, тем лучше. Мерить результат следует временем загрузки у реальных посетителей и количеством обращений с мобильных, а не позициями, которые у каждого пользователя свои.

Если ваш сайт долго открывается с телефона, а вы не понимаете, из-за чего, — специалисты компании «Сайты Профессионально» бесплатно замерят скорость, посмотрят, как устроена работа с изображениями, и скажут, что даст наибольший эффект. Мы девятнадцать лет делаем сайты и чаще всего находим причину именно в картинках. Обращайтесь за бесплатной диагностикой, она ни к чему не обязывает.