Оптимизация изображений для сайта Print World

В процессе анимации на сайте Print World для эффекта параллакса (помимо статичных изображений интерфейса) используется до 6 больших картинок: три текущей и три следующей сцены.

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

Формат изображений

Наиболее привычный формат с полупрозрачностью – PNG24. Но, в нашем случае, файлы в данном формате весят до мегабайта. 3–4 мегабайта на одну анимацию – непозволительно много. Поэтому нам нужно было придумать другое решение. Вариантов было два: ужимать png, или использовать svg с растровыми масками.

SVG с растровыми масками

На момент разработки сайта PrintWorld технология SVG нами ранее была не изучена и не испробована. Тем не менее, в ходе экспериментов, удалось сократить размер файлов примерно в 5 раз. Для этого мы сохранили изображение в JPEG'е, после чего наложили на него черно-белую маску – PNG-файл, в котором черный проявляет непрозрачные участки JPEG-файла, белый – прозрачные, а оттенки серого отвечают за полупрозрачность.

В итоге у нас получился JPEG с прозрачностью в формате SVG в пять раз меньшего веса, чем аналог в PNG.

Но с другой стороны, вставленный в веб-страницу SVG генерировал огромный блок кода, примерно сопоставимый с весом PNG-файла. Плюс к тому, браузеров с поддержкой SVG (в 2013 году) несколько меньше, чем с поддержкой традиционных форматов веб-графики. А вносить правки в SVG – куда сложнее, чем в PNG-изображение.

PNG

Наигравшись с новыми технологиями мы вернулись к PNG. Уменьшение изображения происходило в несколько этапов:

1. Подбор минимально допустимого размера В×Ш изображений;
2. Обрезка перекрытых областей;
3. Пастеризация и сжатие PNG.

Подбор минимально допустимого размера изображений

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

Основные маленькие разрешения:

• 1024×720
• 1024×768
• 1366×768
• 1280×800

Останавливаемся на высоте экрана 768 px. Отнимаем высоту шапки и футера сайта, панель браузера и операционной системы. Итого, для маленьких разрешений экранов высоты наших картинок ограничиваем в 550 px. Если, например, панели браузера нет – появляется дополнительное пространство – его заполняем растягивая футер. Если картинка не вмещается полностью – обрезаем её.

Основные большие разрешения:

• 1280×1024
• 1920×1080
• 1600×1200

Берем за среднестатистическую высоту 1080 px. Вычитаем высоты шапки, футера и панелей. Приходим к высоте картинок 853 px. Если панелей браузера нет, или если экран 1200 в высоту (редко такое бывает) - появляется дополнительное пространство – его заполняем футером. Если картинка не вмещается полностью, как в случае с 1024 – обрезаем.

Исходя из этих данных и имеющихся у нас изображений сцен, мы выбрали два оптимальных формата, под которые будем проводить оптимизацию: 1600×900 и 1200×550. Т.е. два комплекта сцен, покрывающие разрешения от 1024 до 1200 и от 1200 до 1600. Для экранов с большими диагоналями мы ограничили ширину сайта 1600 пикселями.

Обрезка перекрытых областей

Лишние пиксели по вертикали, которые все равно не вмещаются в наиболее распространенные экраны, нам не нужны – они прибавляют изображениям вес и увеличивают анимируемый блок – а это замедляет анимацию.

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

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

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

Пастеризация

Наиболее действенный метод уменьшения размера png-изображения – пастеризация. Суть этого процесса заключается в уменьшении количества используемых цветов и шумов.

Здесь очень важно подобрать баланс, при котором итоговый вес файла будет меньшим, а качество картинки приемлемым.

Пастеризация в Фотошопе срабатывает с общей интенсивностью на все изображение (слой) сразу. Поэтому мы делали ее в несколько этапов – разбивали изображение на несколько слоев, и каждому по отдельности делали свои настройки. Т.о. для менее значимых, либо темных участков эффект можно было усиливать без особых переживаний за потерю детализации, а для более значимых, таких, как лицо, либо плавные градиенты – эффект применялся особенно аккуратно. Впоследствии, детали дополнительно обрабатывались вручную жесткой кистью.

В результате проделанных действий, без особых потерь в качестве общий вес изображений анимации удалось значительно сократить. И это хорошо!