Squoosh для курса: как подготовить иллюстрации в WebP

Определите детали, которые нельзя потерять

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

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

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

Откройте исходник в Squoosh и сохраните масштаб

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

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

Оставьте исходное изображение с одной стороны сравнения, а у обработанной копии в списке Compress выберите WebP. Перемещайте разделитель по важным участкам и сравнивайте их при одинаковом масштабе. При необходимости верните отображение к 100%, чтобы случайное увеличение одной области не создавало ложное впечатление большей резкости.

Сравните режимы с потерями и без потерь

WebP поддерживает оба режима сжатия и прозрачность. Для схемы с мелкими буквами начните с Lossless. В проверенном интерфейсе Squoosh у этого режима есть параметр Slight loss; для варианта без таких дополнительных потерь оставьте его на нуле. Отдельно убедитесь, что вы не включили уменьшение размеров или палитры на предыдущем шаге.

Для фотографии можно подготовить вариант с выключенным Lossless и выбранным Quality. Например, начните пробу с 75, затем сравните с более высоким значением. Это отправная точка эксперимента, а не универсальная настройка для уроков. Значение Quality 100 не заменяет выбор режима Lossless. Не переносите удачную настройку фотографии на снимок интерфейса без отдельного просмотра.

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

Примите качество по учебным действиям

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

После сравнения в редакторе сохраните пробный WebP и откройте его отдельно. Затем проверьте изображение в том размере, в котором оно будет находиться в уроке. Чёткая картинка шириной 1600 пикселей не гарантирует удобное чтение после отображения на узком экране. Если подписи слишком мелкие, понадобится другой макет, более крупный фрагмент или текстовое пояснение рядом.

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

Посчитайте выигрыш по реальным размерам

Зафиксируйте размер исходного и полученного файла в одной единице. Для условного примера возьмём 800 000 и 520 000 байт. Уменьшение равно 280 000 байт, доля сокращения — 280 000 / 800 000 × 100 = 35%. Полученный файл занимает 65% исходного объёма. Это арифметическая иллюстрация, а не результат сжатия нашего контрольного снимка.

В FAQ разработчиков WebP отдельно разобрано, почему результат иногда бывает больше исходника. Поэтому не обещайте одинаковое уменьшение для всех материалов курса. Если проверенный WebP крупнее подходящего PNG, сохранение прежнего формата может быть разумным решением. Размер сравнивайте вместе с читаемостью, прозрачностью и пригодностью для целевого приложения.

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

Сохраните параметры и текстовую альтернативу

В рабочем реестре достаточно имени исходника, версии результата, размеров в пикселях, режима WebP, значений использованных настроек, числа байт и результата проверки ключевых деталей. Например, запись «номер, статус и граница поля читаются» добавляйте только после фактической проверки собственного материала. Сохраните исходный файл, чтобы следующую пробу не делать из уже ухудшенной копии.

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