Начните с одной страницы, которую действительно посещают люди. Попытка сразу обработать весь сайт затрудняет проверку: если что-то изменится не так, сложно понять, какой файл виноват. Сначала найдите несколько тяжёлых изображений, оцените экономию и только затем расширяйте работу.
1. Проверьте страницу
Введите публичный URL в анализатор изображений. Он покажет исходный размер доступных изображений и пробный результат WebP-кодирования на ограниченной выборке. Это ориентир, а не полный отчёт обо всех ресурсах сайта.
Откройте страницу в обычном и мобильном размере и сравните список найденных изображений с теми, что действительно видны пользователю. Картинки, которые подставляет JavaScript после действия, и некоторые CSS-фоны могут требовать отдельной проверки. Для каждого крупного файла запишите URL, текущий размер, формат и место использования. Такой короткий список позволит повторить измерение после изменений и понять, какой файл дал экономию.
2. Начните с крупных файлов
Изображения с наибольшим исходным размером обычно дают заметный эффект. Проверьте, не загружается ли файл в разрешении, намного превышающем размер его отображения.
Сначала выделите изображения первого экрана и те, которые часто повторяются в карточках. Для первого экрана важны и размер файла, и момент начала загрузки; для повторяющейся миниатюры — правильные размеры и эффективное кэширование. Если блок показывает картинку шириной 400 пикселей, а браузер получает оригинал в несколько тысяч пикселей, создайте подходящий вариант до конвертации формата. Иначе часть лишних данных останется.
Как выбрать первый шаг
- Большой файлЗапишите его вес и сравните форматы на одинаковом разрешении.
- Слишком широкий исходникПодготовьте размер под блок до повторного сжатия.
- Файл не изменился на страницеПроверьте кэш и адрес, который скачивает браузер.
3. Сравните готовые версии
Сжатие и конвертация могут дать разный результат на фотографиях и графике. Сравните размер и видимое качество, сохраните исходник для возможного восстановления.
Проверяйте качество результата на готовой странице, а не только в окне сжатия. Сравните переданные байты, резкость текста и фактуру фотографии; прозрачные края осмотрите на разных фонах. Сохраните исходник и отметьте, где он лежит, чтобы при спорном качестве можно было вернуться к нему. После публикации очистите нужный кэш и убедитесь, что браузер действительно запрашивает новую версию файла.
Зафиксируйте итог в небольшой таблице: URL страницы, адрес изображения до и после, переданные байты и результат визуальной проверки. Повторите проверку на телефоне и компьютере, потому что сайт может выдавать им разные размеры. Если изображение стало легче, но на странице всё ещё загружается исходник, исправьте шаблон или атрибуты responsive images. Это полезнее, чем повторно сжимать файл, который браузер не использует.
Что делать по результату проверки
- Тяжёлая фотография
- Сравните готовые варианты и оцените детали на странице.
- Избыточные размеры
- Исправьте вариант для мобильного и настольного блока.
- Позднее начало загрузки
- Проверьте HTML, скрипты и момент появления URL.
Разберём на примере
Например, на главной виден баннер шириной 700 пикселей, а браузер загружает исходник шириной 3000 пикселей. Даже хорошее сжатие не исправит лишние пиксели полностью. Сначала отдайте подходящий размер, затем сравните WebP и исходный формат. После публикации проверьте именно переданные браузеру байты, а не только размер файла на диске.
Проверьте перед публикацией
- Запишите исходный размер и URL файла до замены.
- Проверьте одну страницу в мобильной и настольной ширине.
- Сохраните исходник и повторите замер после очистки кэша.
Повторяйте проверку после изменений
После публикации оптимизированных файлов откройте страницу и убедитесь, что изображения отображаются правильно и действительно стали меньше.