Конвертация PNG24/32 в PNG8 с сохранением прозрачности



    Открылся веб-сервис TinyPNG, на котором можно быстро конвертировать полноцветные PNG24 в индексные PNG8 с сохранением альфа-прозрачности. Сайт работает на известных open source утилитах, так что квантование палитры можно сделать и без него, но здесь это просто удобнее.

    На Хабре неоднократно публиковались статьи о квантовании палитры PNG как способе оптимизации файлов в этом формате. Существует ряд программ, которые сжимают с PNG24 до PNG8 с сохранением альфа-прозрачности, одна из них — pngnq. К сожалению, многие веб-дизайнеры не готовы работать с такими программами и обрабатывать файлы в пакетном режиме bash-скриптом, поэтому для них появление такого веб-сервиса станет приятной новостью.

    Сами разработчики TinyPNG говорят, что используют для квантования утилиты pngquant, optiPNG и advpng.

    Все эти утилиты можно использовать и самостоятельно. Есть даже GUI для pngquant.

    Поскольку Photoshop не умеет нормально работать с 8-битными PNG, то можно сохранять обычные PNG24 с альфа-прозрачностью (через меню Save for Web), после чего прогонять их через TinyPNG или одну из перечисленных программ. Полученные файлы корректно отображаются во всех браузерах, прозрачность PNG сохраняется даже в IE6.
    Метки:
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 50
    • +3
      > прозрачность PNG сохраняется даже в IE6.
      Кто нибудь может прояснить этот момент?
      • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Интересно, интересно. Надо будет сравнить с punypng.com, у последних качество сжатия весьма высокое.
        • 0
          Всё, punypng по сравнению с этим фигня, но они только оптимизировали. А эти перегоняют в более лёгкий формат — все картинки что протестил ужались минимум на 64%, среднее 70% экономии для 24 битных PNG.
          • 0
            У punypng есть API. Закачивать каждую PNGху вручную, когда необходимо на сервер-сайде все автоматизировать не по фен-шую!
            • 0
              Так да, но зато у них ограничение в 150KB :( Мне вот помешало это пару картинок оптимизировать сейчас когда тестировал.
              Я просто брал заливал по 20 картинок за заход на tinypng.org. Ограничение кстати касается только единовременной заливки, а если обработалось 20 штук и залить ещё 20 без обновления страницы — всё отлично пашет. Минус только один — нельзя скачать архивом всё сразу.
            • +1
              punypng.com отказался глотать тестовый файл из-за того, что размер оказался выше 150 кб.

              А TinyPNG сделал сразу. Файл уменьшился в весе на 54%. При чем я разницы не вижу. Вот исходник, 267 кб, вот результат, 124 кб. А вот результат на сайте. Я не вижу ухудшений.

              В закладки, однозначно.
              • +1
                Честно говоря, ухудшения есть, артефакты появились какие-то, прямо как на jpeg.
                • +1
                  Посмотрите на тень снизу — она покарёжилась. Но неплохо, да
                  • 0
                    Ну, вообще, да, сейчас заметил внизу в тенях недостатки. Это, кстати, и есть самое узкое место, потому что сверху все ясно − там нет полупрозрачности и цвета близкие по оттенку. А внизу тени, при чем сделанные именно полупрозрачностью процентов на 20%. Макет спасает то, что внизу подложка серая с вактуркой. Если бы фон был более контрастный, то недостатки были бы более заметны.
              • 0
                Спасибо! Сколько лет занимаюсь дизайном и проектами, а подобный финт даже в голову не приходил.

                Хорошая эффективность, где-то на 50% уменьшило размер пнгшек, а изменения качества на глаз не заметно.
                • 0
                  Изменение качества заметно по размеру…

                  +80% «оптимизации». Сам оригинал сохранял для веба в фотошопе.



                  Вот файл оригинала, кому нужно.



                  Кстате проверил размер файлов оригинала после фш и после оптимизации habrastorage. Так вот хабрасторейдж из файла размером 2,67 кб сделал 2,37 кб
                • +3
                  Adobe Fireworks умеет!
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • +2
                      Умеет, да. Но стоит около $300, если не ошибаюсь. К тому же иногда, к сожалению, конвертировать приходится не дизайнеру, а другому человеку, к тому же после запуска проекта, когда (внезапно!) оказывается, что сочные странички с оригинальной нарезкой слишком долго грузятся на телефонах или жрут трафик. Сервис может оказаться полезным.
                      • +2
                        Простите, конечно, но на мой скромный взгляд, Adobe Fireworks — единственная программа от Adobe, которая должна быть нужна веб-дизайнеру в его непосредственной работе.
                    • 0
                      Так он что делает то? пнг24 переводит в пнг8, делая полупрозрачные пиксели непрозрачными?
                      • 0
                        Png8 с альфой. То есть картинка 8-битная, а палитра (256 цветов) RGBA, с полупрозрачными цветами.
                        • –5
                          Для теста сделал градиент о белого к прозрачному, закинул в tinypng, выдал пнг8 без полупрозрачностей. И разве в пнг8 есть полупрозрачность? По-моему только 2 состояния прозрачный и не прозрачный.
                          • 0
                            Есть, вот например:
                            • 0
                              Ещё более мерзкой картинки не было?
                              • 0
                                Простите, первая что попалась с полупрозрачной тенью.
                                • 0
                                  Не знаю, может я 1 такой. Но от всего что касается глаз, в не их нормального состояния, меня просто передёргивает. Я бы такое хранить не стал точно :)
                                  • +1
                                    А некоторые таким питаются :(
                        • +2
                          PNG8 в палитре могут быть полупрозрачные цвета, в отличие от GIF. То есть в png8 ЕСТЬ полупрозрачность.
                          • +2
                            Если так, то спасибо, не знал.
                            • +1
                              Есть, но не все приложения поддерживают. Например, если откроете такой файл в фотошопе, то полупрозрачность пропадёт…
                              • 0
                                А во всех основных браузерах(и обозревателях) есть поддержка?
                              • 0
                                Вот да, пару примеров нашел, и тут скинули симпатичный глазик =), на сайте с полупрозрачностью, а открываешь в acdsee, фотошопе — прозрачность пропадает. Для меня это открытие)
                          • 0
                            Пикселы остаются прозрачными, причём на глаз без дефектов (как в случае если сохранять в png8 в Photoshop-е), а размер уменьшается солидно. У меня получилось сжать 108KiB файл в 36KiB. Был правда и 1 мелкий png, где размер увеличился на 10% :)
                          • +3
                            Автоматика это хорошо, но для наилучшего результата стоит всё же квантовать ручками с помощью программ вроде Color Quantizer авторства x128. Для некоторых картинок и 128 цветов достаточно, а иным и 2048 мало. Но в целом квантование, как правило, даёт заметный эффект.
                            • 0
                              Ещё хорош для этих целей Image Optimizer от xat.com. Много лет пользуюсь.
                            • 0
                              Отличный сайт! Спасибо. Сильно огорчает только то что максимальный размер картинки 1мб(
                              • –8
                                Визуального толку как от гифа.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • 0
                                    Ладно, ладно, попробовал пожать свои текстуры из игры. Доходит до -70-80% уменьшение размера. Беру свои слова обратно.
                                    • 0
                                      А вообще, конечно, гадит по краям. Вот попробовал на проекте.
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                  • 0
                                    optiPNG пользуюсь постоянно, даже одно время прикручивал его к mapnik, пока нагрузка была не велика, а вот про pngquant и advpng узнал впервые. Спасибо, будем пробовать.
                                    • 0
                                      Большое спасибо!
                                      • 0
                                        Найти бы утилиту, которая, не трогая цветовую палитру, только чистила бы альфа-канал.
                                        • +1
                                          Из этого ничего хорошего не получится. Если просто дропнуть а-канал, то вылезут артефакты связанные с оптимизацией размера — то место где альфа 255 может иметь какой-то цвет (который при н/у будет прозрачным). Для всего остального есть pngcrush
                                          • –2
                                            Кто сказал дропнуть?
                                            «Чистить альфа-канал» = убирать цветовую информацию из пикселей с alpha=0.
                                            • +1
                                              Фотошоп (начиная с cs4) так и делает. Да и все остальные вменяемые утилиты, думаю тоже. Это если говорить о 32bit RGBA. Если речь о Paletted RGBA (как в статье), то это выполняется by design — полностью прозрачному будет соответствовать один цвет из палитры.
                                              • +1
                                                > Да и все остальные вменяемые утилиты, думаю тоже.
                                                Увы, нет. Во всяком случае, популярные pngout, optipng и pngcrush этого не делают.
                                                • 0
                                                  Про pngcrush я даже вам сначала не поверил. Уж слишком очевидная оптимизация, чтоб её не сделать. Но, вы правы, я проверил, pngcrush не убивает цвета в полностью прозрачных областях. :-\
                                                  pS: Фотошоп, кстати, эти области упрощает до минимальных описанных прямоугольников.
                                          • 0
                                            Ну, теоретически такую утилиту вполне можно написать самостоятельно, используя ImageMagick например. Грубо, это решается следующим образом:
                                            — исходное изображение разделяется на RGB- изображение и альфа-канал
                                            — альфа-канал обрабатывается так, чтобы все, что светлее черных пикселей, стало белым (есть разные пути) и сохраняется в еще один файл, назовем его «маской полной прозрачности»
                                            — делаем из альфа-канала еще одну копию, сконвертировав его из восьмибитного greyscale в RGB
                                            — теперь, используя эту маску, накладываем сконвертированный в RGB альфа-канал на исходное RGB-изображение, но не как канал прозрачности, а как обычную картинку
                                            — возвращаем в получившуюся картинку исходный альфа-канал.

                                            Все это дает нам вот что: там, где в канале прозрачности был ноль, мы получили 0,0,0 как-бы скопировав значение A в R,G,B
                                            Способ может быть несовершенен или не слишком оптимален, но реализуется просто batch (или bash) скриптом на готовой команде convert из ImageMagick.
                                          • –1
                                            Пользуюсь PngOutWin. Ставишь в очередь хоть по 300 файлов любого размера. Оптимизированный пример с сайта tinypng.org/images/example-shrunk-ec364794.png уменьшила еще на 1 кб. А так, конечно, полезно если нет программы под рукой сжимать в онлайне.

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.