Snig Сообщение 20/05/2011 18:34 Копия темы
Png 8+Alpha – палочка выручалочка. Для опытных верстальщиков (девелоперов) ничего нового, это всего лишь описание моей проблемы и моего решения. Статья написана в произвольном (дебильном и не пригодном для чтения) стиле

С чего все началось:

Y: как говорится, клиент всегда прав!  
X: всегда прав сервер
Bash

Одно дело когда вся работа сделана правильно, а совсем другое если оптимизировано. Черт знает когда кому вдруг захочется оптимизировать свой сайт, но рано или поздно такое происходит (в моем случае сайт посещало 10к новых посетителей в час) и заказчик просит оптимизировать, но какое же удивление было когда я посмотрел на верстку, она была уже сотни раз перекручена. Спрашиваю, что это? Ответ: Мы уже оптимизировали этот сайт, ждем от вас предложений и результатов.

В итоге пошарившись по сайту я понял, что единственное, что можно тут оптимизировать (без фанатизма – важно потраченное время и итог) это картинки, которые были в ПНГ. Благо PSD были.


Все новое – хорошо забытое старое.
Т.к. сейчас заказчики пошли ленивые и скупердяи, еще более ленивые пошли дизайнеры, верстальщики, программисты (этим удается пинать меньше чем предыдущим). Никто уже особо за размерами не следит (он же не имеет значения? :) В лучшем случае мелкие элементы спрячут в спрайты – в худшем всё влепят в отдельные файлы и на тебе 100500 запросов на сервер. Я был не лучшим случаем, но свои ПНГ24 оптимизировал с помощью www.smushit.com/ (Хотя подобных сервисов встречал много, этот считаю самым удобным). Но этого выходит мало.

Бонус в ситуации заключался в том, что сайт не поддерживал ИЕ6 (Не любят пиндосы ИЕ6, а сайт был именно их). Уже не помню как пришло на ум, или как вспомнилось то что когда-то мельком читалось, но почему-то я взялся за PNG8+Alpha. Суть такова: это обычный ПНГ8, но с фильтром, который позволят делать полу-прозрачность, плюс небольшой в том, что полу-прозрачные элементы ЕИ6 заменяет на пустоту, а не на серый фон. Минус – 256 цветов.

Инструментарий

Фотошоп не понимает что такое Альфа канал (по-крайней мере мой), пришлось пользоватся FireWorks. Т.к. на настройки времени нету, пришлось делать все максимально быстро:

File->Save us... ->Flattened PNG -> options -> [PNG 8] [Alpha Transparency] ->save

Что в итоге получилось:
(для примера беру некому неизвестный бренд, чтобы не было нареканий на рекламу ресурсов)

см. первый рисунок

В итоге я свой Sprite распил разбил на 2 части, В одном – четкие рисунки без множественных градиентов, второй – градиенты и тонкие рисунки.

Внезапно! Итог
В итоге хочу сделать вывод, что рисунки стали "легче" в 2.3 раза, кое-где (в отельных файлах) доходило до х5. ( со всех файлов около 250KB)

Ну, а почему вынес кое какие рисунки в второй спрайт будет понятно, по этому скрину:
см. рисунок 2

ЗЫ: Это мой первый адекватный материал, написанный в состоянии аффекта от выполненной работы и от того, как просто и быстро можно срубить бабла оптимизировать. Так что, после тяпницы никто ругаться не будет, а если кто и будет мне как-то...

abbat Сообщение 20/05/2011 19:19 Копия темы
А какие критерии предъявлялись к оптимизации? Т.е. что именно и, самое главное, почему требовалось оптимизировать? Какое значение у оптимизируемого параметра было до и стало после?

Snig Сообщение 20/05/2011 19:27 Копия темы
В итоге долгих споров сошлись с заказчиком на том (понятное дело не все так просто как описано), что нужно уменьшить "размер" картинок + этот метод позволил отказаться от ПНГфикса  для ИЕ (в данном случае не было полупрозрачных элементов на сайте во втором спрайте).

Почему? Насколько я понял они лоханулись с сервером.

abbat Сообщение 20/05/2011 19:31 Копия темы
Т.е. уменьшали расходы на трафик? И каков результат (сколько до и после)?

З.Ы. А заголовки для кэширования картинок включены? Это позволяет уменьшать трафик еще процентов на 30.

Snig Сообщение 20/05/2011 19:38 Копия темы
С основных картинок только (спрайтов) около 250КВ + как сказал заказчик ФФ на 5% меньше стал загружать процессы из-за отключения ПНГфикс (сам не проверял этого).
ЗЫ: да, хотя это уже забота программиста была.

abbat Сообщение 20/05/2011 19:45 Копия темы
Ясно. Еще (вдруг это будет новостью), есть замечательный тул, который рекомендуется гуглом для оптимизаций подобного рода под названием PageSpeed: code.google.com/intl/ru-R... – часто выдает довольно занимательную информацию и рекомендации. С ним так же удобно использовать YSlow: developer.yahoo.com/yslow... от Yahoo как дополнение. Ну и можно померяться с другими сайтами на ShowSlow: www.showslow.com/ :)

Snig Сообщение 20/05/2011 19:47 Копия темы
Благодарю.