Оптимизация графики при верстке

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

В качестве примера возьмем небольшую картинку с эффектом тени

Что же с этой картинкой можно сделать? Можно сохранить ее в PNG-24, но тогда возникнут проблемы с IE и будет большой размер у результата. Мы попробуем два варианта: сохранение в GIF и сохранение в JPG

Первым делом будем экспериментировать в JPG

На скриншоте ниже приведено сравнение результатов при разном качестве сохранения. Для JPG оно варьируется от 0 до 100. Стандартное значение при сохранении 60

Как видите результат по размеру и качеству различается довольно сильно. На левом примере со стандартным качеством сохранения видна “грязь”, нечеткость картинки, на правом же все хорошо, но и размер больше на 3 с лишним килобайта

Теперь будем сохранять в GIF. При сохранении в GIF у нас нет выбора качества, зато есть выбор количества цветов. По-умолчанию в фотошопе стоит сохранение со 128 цветами, но ведь можно попробовать и поменьше

Вот здесь результат действительно разительный. Качество что со 128 цветами, что со 32 цветами одинаковое, но размер последнего почти в два раза меньше, что существенно скажется на скорости загрузки при такой оптимизации всей графики на сайте

Теперь о оптимизации фоновой графики с различными градиентами и тенями. Её в gif сохранять получается очень накладно, размер большой получается. Здесь самым оптимальным вариантом будет сохранение в JPG при качестве от 60, но надо поставить размытие в одну единицу. Ниже представлено два скриншота с примером сохранения в GIF и JPG

По увиденным выше результатам можно смело заявить, что для фона в этом случае лучше JPG ничего нет, и это будет правдой

Заключение

Только оптимизацией графики часто не обойтись. Можно (а скорее даже нужно) оптимизировать файлы стилей (это можно сделать с помощью оптимизера у меня на сайте), сжать ява-скриты. Все это даст вам увеличение скорости загрузки от 30% от изначального варианта