Оптимизация по весу и качеству векторных и растровых изображений для веб-разработки
Рассмотрим основные инструменты обработки графики, доступные техническому дизайнеру.
Базовая процедура – это оптимизация изображений перед следующей отправкой на сервер и публикацией в готовом продукте (для тестирования).
Зачем на практике нужна оптимизация графики
Рассмотрим статистику по данным международной организации HTTP Archive. Примерно 60% объема веб-страниц – это графика в форматах JPEG, PNG и GIF. По состоянию на июль 2017 года изображения составляли 1,7 Мб на средней веб-странице объемом 3,0 Мб.
Рисунок 7.1 – Доля потери в экономии трафика и времени при загрузке веб-ресурсов по причине отсутствия или недостаточной оптимизации графики (JPEG, PNG, GIF)
Более половины трафика составляет графика веб-ресурсов, остальное – код и сопутствующие файлы. Это позволяет сделать логичный вывод: чем лучше проведена оптимизация графики в пакетной автообработке на ПК или на сервере до публикации в веб-ресурсе, тем выше уровень исполнения цифрового продукта в направлении mobile friendly (критерий удобства для мобильных пользователей сети Интернет).
Технические задачи процедуры оптимизации
Процедура оптимизации (в англ. optimization) примечательна универсальным подходом к большинству графических форматов.
Оптимизация изображений включает в себя следующие задачи.
1. Изменение размера до необходимого в верстке. Этот шаг может быть пропущен, если изображение в масштабе 1:1 к необходимому результату. Речь идет о функции resize средствами языка программирования PHP (в серверном исполнении процедуры) или изменении размеров в графическом редакторе (в ручном исполнении).
2. Сжатие размера файлов по весу до порогового уровня (баланса по соотношению: размер/качество изображения).
3. Оптимальная выдача изображений на основе размера с помощью тегов
![]()
В среде веб-разработчиков общепринято: оптимизацию графики необходимо автоматизировать. Это соответствует философии экономия данных при передаче графики по цепочке разработчик > сервер > клиент.
Процесс оптимизации графики должен быть поставлен на конвейер как автоматическая процедура. Важным условием оптимизации графики является сжатие до порогового уровня, ниже которого уже портится качество изображения. В приоритете – соблюдение технического и визуального баланса между уменьшением объема графического файла и сохранением приемлемого качества изображения.
Чем меньше размер графических файлов, тем удобнее пользователям веб-ресурса (или мобильного приложения). В особенности это относится к активным пользователям смартфонов.
Все цифровые документы, содержащие графические элементы в растровом и векторном форматах и предназначенные для оперативной передачи по интернету, на практике нуждаются в оптимизации графики перед публикацией в веб-ресурсах или отправке по электронной почте.
Логическим исключением в данном рассмотрении являются специальные документы (CDR, AI, PDF, TIF) для полиграфической печати и видеофайлы (MPEG, AVI и др.), в настройках которых уровень сжатия (%) информации назначается на весь видеоряд файла (при выборе параметров рендеринга экспортируемого результирующего видеофильма).
В чем отличие сжатия без потерь и с потерями
Техническое решение оптимизации графических файлов условно характеризуется по признаку:
• сжатие без потерь;
• сжатие с потерями.
Сжатие с потерями характерно для графических форматов JPG, PNG и WebP. Описывается математически индексом структурного сходства (SSIM) до и после сжатия изображения.
Сжатие с потерями характеризуется следующими артефактами[3]:
• визуальные помехи в изображении;
• смазанные линии в рисунках объектов.
Консольные утилиты OptiPNG и Inkscape сжимают размеры исходного графического файла в формате PNG путем удаления невостребованных для следующего воспроизведения функций и другие атрибуты файла:
• EXIF-данные о владельце файла;
• полноцветность (24 bit) для черно-белых изображений;
• сопутствующие комментарии в коде (как, например, указание программы-экспортера Corel Draw и др.).
По определению термин индекс структурного сходства (сокр. SSIM от англ. термина structure similarity) является одним из инструментальных методов сопоставления схожести между двумя изображениями.
Рисунок 7.2 – Сравнение до и после сжатия с потерями
По другому определению SSIM-индекс – это математический метод полного сопоставления координат точек, т. е. с его помощью проводится измерение качества на основе исходного изображения (не сжатого или без искажений). По умолчанию сжатие изображения без потери качества является преимущественно привлекательным для технического дизайнера. Но допустимо и с потерей качества – например, оптимизация JPEG-файла красочного фона для инфоблока до качества 20–50% от полных 100% в случае, где текст размещается поверх затемненного фона белым цветом, как в примере на рис. 7.2.
В таком случае визуальный приоритет смещается с детализации и качества изображения на передний план с текстом, т. к. дизайнер убирает на дальний план размытое изображение (фоном) и создает разумно воспринимаемый эффект второго плана.
Рассмотрим детально код HTML реализации инфоблока с фоном, содержащим JPG с потерей качества (после оптимизации изображения).
Вышла новая модель Hyundai Creta 2022
Честная авторассрочка.
Официальный дилер Hyundai в Санкт-Петербурге.
Только в сентябре Суперцены на Creta.
Гарантия 5 лет. Гарантия. Без выходных.
Выгодные цены.
.illustration { display: block; width: 100%; max-width: 530px; min-height: 320px; padding: 0; background-color: #333; /* Следующее свойство задает фон блока с изображением (с потерями качества) */ background-image: url('hyunday_creta_1280x747_after-compression.jpg'); background-size: auto 100%; color: #fff;}.fade { display: block; width: calc(100% – 60px); /* Задает ширину: 100% минус отступы слева и справа */ min-height: 290px; /* Задает минимальную высоту блока */ padding: 15px 30px 20px 30px; /* Задает внутренние отступы в блоке до текста */ /* Следующее свойство задает затемнение фона на 60% полупрозрачным слоем черного цвета с автомобилем */ background-color: rgba(0,0,0,0.6);}h1 { margin-bottom: 0; font-family: Arial,sans-serif; font-size: 20px; font-weight:normal; line-height: 1.15em;}h1 i { display: block; padding-top: 5px; font-size: 26px; font-style: normal; color: #ffc107;}p { width: 100%; font-family: Arial,sans-serif; font-size: 15px; line-height: 1.5em;}Как следует из представленного примера, есть технические реализации, требующие использовать фотоизображение с потерями для вывода на фоне блока рекламного объявления.
По мнению разработчика Google Ильи Григорика, автора «Руководства по оптимизации изображений», основополагающим является утверждение:
«Правильный формат сочетает в себе желаемый визуальный результат и функциональные требования».
Выбор формата для графики плюс интерпретация результата оптимизации графики находятся на уровне баланса между визуальной схожестью до и после оптимизации изображения и необходимым уровнем сжатия для достижения оптимальной скорости загрузки на клиентском устройстве.
Рисунок 7.3 – Настройки сохранения Save for web в графическом редакторе Adobe Photoshop для полноцветного растрового изображения с потерями качества (20%) с параметром Progressive JPEG (для быстрой загрузки), в палитре RGB, с размытием границ силуэтов в изображении на уровне 1 условной единицы измерения
Форматы и программные инструменты оптимизации графики
Рассмотрим средства оптимизации основных форматов растровой и векторной графики для веб-разработки.
Для начинающего веб-разработчика основная работа с графикой сводится к форматам JPG (для полноцветных изображений), SVG (для иллюстраций и элементов интерфейса), PNG (для полупрозрачной графики). GIF отходит в прошлое как морально и технически устаревший формат, не отвечающий требованию масштабирования без потерь.
Более опытные веб-разработчики используют SVGz и WebP для решения задач оптимизации и прогрессивных коммерческих продуктов: веб-сервисов и мобильных приложений с высокими требованиями производительности.
Как следствие, установка и настройка базовых утилит для оптимизации графики в форматах JPG, PNG и SVG позволят начинающему веб-разработчику организовать процесс на поток в рамках простых проектов, для сложных проектов – по идее автоматизации, оптимизация должна быть настроена в серверном решении при загрузке изображений на сервер через веб-интерфейс.
Формат WebP является перспективным по сравнению с JPEG. Следует следить за ИТ-новостями по развитию технологии прогрессивного формата применения и вывода полноцветной графики в веб- и мобильных продуктах.
Как выбрать оптимальный из доступных инструментов для оптимизации графики?
Задайте критерии (факторы) отбора и воспользуйтесь факторным анализом вариантов (инструментов) оптимизации графики.
Расставьте их по приоритетам в табличном виде в первую колонку и далее разместите варианты, декомпозируйте выбор по анализу каждого важного вам фактора в каждом из вариантов – и далее по сумме плюсов сделайте собственный выбор оптимального инструмента.
Как правильно провести вручную процедуру оптимизации серии растровых изображений для веб-ресурса?
По опыту автора, оптимальная схема оптимизации растровых изображений (например, в формате PNG) выглядит следующим образом (см. рис. 7.4).
Рисунок 7.4 – Схема оптимизации растровых изображений
По умолчанию не известно, все или ни один из входной серии изображений в растровом формате (например, PNG) являются изображениями без сжатия (без потерь). Поэтому необходимо их рассмотреть внимательно на глаз и разделить на группы. Если все изображения без потерь до оптимизации, можно действовать по схеме (на рис. 7.4). Для этого необходимо и достаточно использовать графический редактор Corel Draw для трассировки (перевода из растрового в векторный вид) изображений. Эта процедура выполняется вручную для каждого изображения с визуальной проверкой и настройками по ситуации (по балансу детализации и качества трассировочных изображений).
Экспорт в формат SVG с необходимой и достаточной детализацией 1000 точек на дюйм (1:1000). Таким образом получим изображения в виде масштабируемой векторной графики без потерь с характеристикой высокая четкость при любом масштабе. Далее используем любой доступный конвертер из SVG в формат WebP с настройкой детализации (на максимум) и качества на среднее значение. При экспорте после оптимизации в WebP получим сжатые изображения с минимальными потерями в качестве и эффективной оптимизацией.
В ходе подобного эксперимента были получены следующие результаты.
Исходные 8 логотипов в PNG (24 bit + альфа-канал): 94,7 Кб.
Трассировка: PNG > SVG.
Вес 8 x SVG: 159 Кб.
SVG > PNG > grayscale 8bit > 42,5 Кб.
PNG > WebP > 8 файлов (*.webp) = 16,1 Кб.
Оптимизация на 82% от исходного размера группы файлов.
Для оптимизации использован веб-сервис Squoosh: https://squoosh.app.
Подходит для ручной настройки и оптимизации поштучно каждого изображения (из короткой серии на обработку).
Факторный анализ основных графических форматов для применения в решении задач веб-разработки
Для расширения кругозора и ясности в применении основных графических форматов JPG, PNG, SVG, GIF, WebP рассмотрим проведенный автором факторный анализ по ключевым критериям:
• сжатие без потерь;
• сжатие с потерями;
• анимация;
• прозрачность (альфа-канал);
• масштабируемость.
Результаты факторного анализа основных графических форматов представлены в таблице.
• Прозрачность в формате SVG реализуется через свойство opacity с диапазоном значений от 0 (нулевая, т. е. полностью прозрачный слой) до 1 (полная непрозрачность слоя). Более детально свойства формата SVG представлены в спецификации формата Scalable Vector Graphics.
• Отсутствие сжатия с потерями для SVG не является прямым недостатком, т. к. есть отличная масштабируемость векторно-моделируемой графики в контейнере SVG, что позволяет конкурировать с WebP в визуализации плоской графики.
Выводы
В завершение темы представим достаточно явные выводы из факторного анализа (сравнения) форматов для веб-разработки.
• WebP приходит на смену формату JPEG (следует анализировать поддержку формата браузерами по сервису I can do).
• GIF как популярный формат остается в прошлом на уровне 2000-х годов.
• SVG является наиболее популярным наряду с WebP и конкурирует в плане вывода без потерь оптимизированной плоской графики (SVGz) для веб-интерфейсов.
Подведем итоги. В этой лекции вы познакомились с форматами воспроизведения графики для веб-разработки, факторным анализом.
Рекомендуется самостоятельно изучать спецификации форматов графики и проводить более детальный факторный анализ для выбора оптимальных решений в специфических задачах коммерческих проектов. Выбор форматов для перспективной коммерческой веб-разработки остается за техническим дизайнером – на основании факторного анализа по ключевым критериям и результатам A/B-теста, скорости загрузки и другим факторам, влияющим на обработку, хранение и вывод графики в веб- и мобильном продукте. Кроме случаев, жестко закрепленных в ТЗ.
Теорию по теме необходимо подкрепить самостоятельной работой и практически освоить консольный инструментарий пакетной оптимизации утилитами JPEGoptim, optiPNG, Inkscape и т. д.
Рекомендуемая литература
1. Оптимизация графики для веба: самое важное. Статья в переводе на русский язык. Автор оригинала: Адди Османи, руководитель разработки веб-браузера Chrome в корпорации Google. Опубликовано 6 сентября 2018. Режим доступа: https://habr.com/ru/post/422531
2. Пакетная оптимизация веса изображений формата JPEG (JPG), PNG. Веб-инструмент пакетной оптимизации графики. Режим доступа: http://compressjpeg.com
3. Пакетная оптимизация веса изображений формата JPEG (JPG), PNG. Веб-инструменты пакетной оптимизации графики. Режим доступа: https://tinyjpg.com/ и https://tinypng.com/
4. Руководство по оптимизации изображений. Автор: Илья Григорик, веб-разработчик Google. Режим доступа: https://web.dev/fast/#optimize-your-images
Лекция № 8