Блог студии 77

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

4 ноября 2015

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

слои

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

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

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

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

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

svg-маска

В итоге у нас получился 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 пикселями.

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

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

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

svg-маска

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

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

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

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

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

svg-маска

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

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

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

Другие статьи автора: