Comments 13
Тинни и прочие пнг оптимизаторы, не дадут такого процента сжатия. Рассказ, как я понял, именно о том, как это сделать лучше чем позовляют подобные утилиты.
Есть такая замечательная софтина FileOptimizer, куда для png встроена куча консольных утилит (pngout и т.д.) которая подбирает из их комбинации максимально эффективную.
Но, справедливости ради, нужно затестить. По этому предлагаю автору взять какую-либо png и сжать, выложив сюда, а потом сжать этим софтом. Будет сразу виден профит и будет с чем сравнивать.
У меня перед выкладывание в прод, картинки прогоняются через эту штуку — в среднем, без потери качества — 30-40% он оптимизирует.
Но, справедливости ради, нужно затестить. По этому предлагаю автору взять какую-либо png и сжать, выложив сюда, а потом сжать этим софтом. Будет сразу виден профит и будет с чем сравнивать.
У меня перед выкладывание в прод, картинки прогоняются через эту штуку — в среднем, без потери качества — 30-40% он оптимизирует.
Тестовый пример в виде двух файлов весит 13.8кб и требует 3 запроса на сервер (2 картинки + js), тини сжало оригинальный файл до 15.6кб. И при этом никаких приседаний с дополнительной обработкой js-ом и всего 1 запрос.
Я не говорю что идея плохая, просто хотелось бы увидеть более впечатляющий пример.
Я не говорю что идея плохая, просто хотелось бы увидеть более впечатляющий пример.
Судя по всему, у нас одинаковая метода. Единственная разница — они тестируют, будет ли разумно смотреться результат с индексированными цветами RGB или его сразу жать jpgом — и ставят один из нескольких пресетов. У меня же этот этап предполагается с участием рук и собственной оценкой качества. В общем, думаю, имеет право на существование. Буду допиливать.
Вот ссылка на их оригинальную панду: cdn.tinypng.com/images/example-orig.png?9478e6a
Весит 56,9
Вот ссылка на обработанное ими изображение, на котором, кстати, видны ступеньки альфа-канала на тени.
Весит 15,4
Вот картинка, обработанная моей методой: hello.kz/alpha_spriter/test.html
Картинки весят 12,4
Скрипт можно ужать до трех и получится примерно то же самое — на малых объемах
Еще немного скачет насыщенность альфа-канала, это отчасти из-за особого мнения Стива Джобса на счет цветовых модулей маков, с которым я никак не разберусь и отчасти, конечно, из-за сырости.
В качестве сырья использованы два jpg, с уровнем компрессии: 60 для RGB и 22 для альфа-канала — из-за чего, собственно, и нет лесенки альфа-канала.
Вот ссылка на их оригинальную панду: cdn.tinypng.com/images/example-orig.png?9478e6a
Весит 56,9
Вот ссылка на обработанное ими изображение, на котором, кстати, видны ступеньки альфа-канала на тени.
Весит 15,4
Вот картинка, обработанная моей методой: hello.kz/alpha_spriter/test.html
Картинки весят 12,4
Скрипт можно ужать до трех и получится примерно то же самое — на малых объемах
Еще немного скачет насыщенность альфа-канала, это отчасти из-за особого мнения Стива Джобса на счет цветовых модулей маков, с которым я никак не разберусь и отчасти, конечно, из-за сырости.
В качестве сырья использованы два jpg, с уровнем компрессии: 60 для RGB и 22 для альфа-канала — из-за чего, собственно, и нет лесенки альфа-канала.
Ссылка на пожатую панду (отчего-то пропустилась): cdn.tinypng.com/images/example-shrunk.png?9478e6a
pngquant
Ну и генератор спрайтов заодно:
draeton.github.io/stitches
draeton.github.io/stitches
Небезызвестный papabubadiop решал эту задачу с другой стороны — советую обратить внимание на пост: habrahabr.ru/post/227577
Картинка примера специфичная. С другой стороны, похоже, стоит задача баланса между альфой и собственно холстом. Обычными инструментами это не решается, но… «у нас есть такие приборы»: png, 10,1 Кб — 16 цветов — из которых половина прозрачных.
dl.dropboxusercontent.com/u/13729396/pic/habr-259613.png
Автор просил рассказать о 10 аналогичных решениях, и о том, что они не нужны. Как пожелаете, расскажем:
www.artlebedev.ru/tools/technogrette/img/png-2
См. последний пример.
dl.dropboxusercontent.com/u/13729396/pic/habr-259613.png
Автор просил рассказать о 10 аналогичных решениях, и о том, что они не нужны. Как пожелаете, расскажем:
www.artlebedev.ru/tools/technogrette/img/png-2
См. последний пример.
Интересно было бы сравнить с BPG
Sign up to leave a comment.
Как я png в 4 раза уменьшал