Pull to refresh

Comments 50

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

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

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

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

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



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



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

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

Articles