Уменьшение размера картинок на сайте

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

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, т.к. он целую сотню килобайт отъедает ресурсов, а тут один логотип маленький... Просто верстка, очевидно, была торопясь и шаблон просто резался быстро со всеми установками по-умолчанию из фотошопа...

  1. Попробуем прогнать через 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.png
24K 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-interlaced

OptiPng совсем толком не помолгла, но смотрите что я сделаю дальше, а дальше я снова повторю то что делал раньше....

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 тоже есть опция, но у меня стоит старая версия...

Дальше я обратил внимание вот на такие картинки!

jpeg 10кб
PNG 2kb

Всего 2 килобайта и нет размытия, а всё потому, что у нас двухцветное изображение, есть таких много изображений на сайте без градиентов и переливов, которые могут в формате PNG быть компактнее JPEG, после прогона через pngquant примерно такой командой (если картинка не 2х цветная, то часто достаточно 64-256 цветов). Утилита optipng, в данном случае, используется для срезания всех мета-данных, но в новой версии pngquant эта опция присутствует и можно обходиться только этой утилитой...

pngquant --speed 1 -f -v --ext .png  2  logo2.png
file 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 очень хорошо вырежет всё лишнее.

Показать комментарии