Самым тяжелым местом, как правило, на сайте являются картинки, их очень много, сайт загружается дольше, на сеть нагрузка выше, в конечном итоге не только страдает конкретный единичный клиент, но и все остальные, если их много, т.к. нагрузка на трафик возрастает, трафик забивается и сервер в целом затыкается передачей статики...
PNGQuant (80к ->28k)
Я решил поиздеваться над сайтом одного магазина и попробовать оптимизировать картинку, не важно какой сайт, главвное нужен пример PNG и как он будет выглядеть. В примере будет только часть картинки без названия бренда, чтобы это не было рекламой...
Изначально картинка вот такая (80 килобайт, 16 бит RGBA, non-interlaced)
ls -sh logo2.png && file logo2.png
80K logo2.png
logo2.png: PNG image data, 281 x 56, 16-bit/color RGBA, non-interlaced
Многие выступают против JQuery, т.к. он целую сотню килобайт отъедает ресурсов, а тут один логотип маленький... Просто верстка, очевидно, была торопясь и шаблон просто резался быстро со всеми установками по-умолчанию из фотошопа...
- Попробуем прогнать через pngquant
pngquant --speed 1 -f -v --ext .png --quality 60-80 logo2.pngПолучилось вот так, в 3 раза меньше размер, 8 битный цвет и индексированная карта цветов...
28K logo2.png
logo2.png: PNG image data, 281 x 56, 8-bit colormap, non-interlaced
2. Попробуем откатить результат на оригинал и прогнать немного иначе, до этого программа pngquant выдала нам то что сохранила картинку в 256 цветах...
pngquant --speed 1 -f -v --ext .png 128 logo2.png24K logo2.png
logo2.png: PNG image data, 281 x 56, 8-bit colormap, non-interlaced
Изменение цветов с 256 на 128 не дало ощутимого прямо 2х кратного падения размера, внешне это тоже не совсем отобразилось.
Попробуем совсем радикальное решение - 16 цветов
pngquant --speed 1 -f -v --ext .png 16 logo2.png 20K logo2.png
logo2.png: PNG image data, 281 x 56, 4-bit colormap, non-interlaced
Дальше картинка жутко деградирует по цветам, а мы выигрываем какие-то жалкие 30%, из чего следует, что перегон в индексированную 8 битную палитру из 16 битной RGBA дает 3х кратное урезание картинки, тогда как дальнейшее уменьшение цветности результата совсем не дает, а только портит изображение...
Я бы отнес эту утилиту к хорошему решению для уменьшению картинок в 3 раза без потери качества...
OptiPNG
optipng -o7 -strip all logo2.png
56K logo2.png
logo2.png: PNG image data, 281 x 56, 16-bit/color RGB, non-interlacedOptiPng совсем толком не помолгла, но смотрите что я сделаю дальше, а дальше я снова повторю то что делал раньше....
pngquant --speed 1 -f -v --ext .png logo2.png
12K logo2.png
logo2.png: PNG image data, 281 x 56, 8-bit colormap, non-interlacedВсего 12 килобайт и вот результат, примерно как при 24 килобайтах...
Исследовав дальше, я понял, что в pngquant тоже есть опция, но у меня стоит старая версия...
Дальше я обратил внимание вот на такие картинки!
Всего 2 килобайта и нет размытия, а всё потому, что у нас двухцветное изображение, есть таких много изображений на сайте без градиентов и переливов, которые могут в формате PNG быть компактнее JPEG, после прогона через pngquant примерно такой командой (если картинка не 2х цветная, то часто достаточно 64-256 цветов). Утилита optipng, в данном случае, используется для срезания всех мета-данных, но в новой версии pngquant эта опция присутствует и можно обходиться только этой утилитой...
pngquant --speed 1 -f -v --ext .png 2 logo2.pngfile banner_bg1.png
banner_bg1.png: PNG image data, 180 x 179, 1-bit colormap, non-interlacedНекоторые объекты на сайте типа крестиков, стрелочек, кружков можно вообще сделать через SVG, об этом постараюсь написать статью чуть позже...
ИТОГ
После двух дней опытов на двух своих проектиках я пришел к выводу, что PNG очень компактный и крутой формат, и если делать примерно вот так
optipng -o7 -strip all logo2.png
А потом вот так
pngquant --speed 1 -f -v --ext .png 2 logo2.pngТо сперва из файла вырежется всё лишнее и он сам оптимизируется, а потом еще через pngquant будет создана палитра цветов, которые присутствуют в файле и по ним будет сверхкомпактная картинка, я картиночки некоторые с 12 килобайт до 670 байт упростил, без появления размытия и потери качества, просто там нет градиентов, есть только двухцветная картинка... С JPEG я еще разберсь позже, но он вроде изначально вполне хорошо жмется, только мета-информация и теги при использовании с камеры, но протой ресайз средствами PHP очень хорошо вырежет всё лишнее.