Сжатие изображений с потерями и прозрачность для Интернета?

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

JPEG, с другой стороны, предлагает отличную сжимаемость для сложных изображений, но не прозрачность.

И, наконец, я видел элементы Flash (пример здесь) с сильно сжатыми изображениями, которые также имеют сглаженные края. и тени. Я мало что знаю о Flash и понятия не имею, как это достигается. По сути, это тот эффект, который я хотел бы получить - большое сложное изображение с прозрачными и / или затененными краями.

Мои вопросы:

Как работает сжатие с потерями и прозрачность во Flash?

Используются ли здесь специальные приемы наслоения flash? Генерируются или растрируются тени в изображение, как я сделал бы с PNG.

Существуют ли какие-либо сценарии создания файлов SWF или SWF, которые могут заменить изображение PNG версией, сжатой с потерями?

Я думаю о прогрессивном улучшении, чтобы повысить скорость загрузки определенных элементов дизайна. Если этого не существует, можно ли было бы это написать?

Существуют ли какие-либо форматы, допускающие сжатие с потерями и прозрачностью?

Мне было сложно найти конкретную информацию по этому поводу. DjVu может быть кандидатом? Следует ли подталкивать производителей браузеров к поддержке другого формата?

Есть ли другие решения этой проблемы?

Текущие варианты - делать все во Flash или принимать файлы огромных размеров. Некоторые другие возможности:

  • SVG и холст могут использовать края, но не поддерживаются IE.
  • Вы можете разрезать PNG по строкам развертки и сжать их с помощью JPEG, оставив края как PNG. Это было бы неприятно в исходном коде, но это будет работать во всех браузерах. Звучит забавный проект, к утру напишу. :)
  • Вы можете написать фильтр изображений с потерями, который может уменьшить сложность цвета вдоль строк развертки алгоритма PNG, чтобы улучшить сжатие в формате PNG. Я просто знал, что это должно существовать, но не мог его найти. Кто-нибудь знает об этом?

Спасибо за вашу помощь!


png transparency flash
person Jerph    schedule 31.03.2009    source источник

Ответы (9)


arrow_upward
6
arrow_downward

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

Ты неправ. Вы можете использовать PNG со сжатием с потерями (8-битные индексированные цвета) и альфа-прозрачностью.

person Ferdinand Beyer    schedule 31.03.2009
comment
С PNG8 вы получаете двоичную альфа-версию, такую ​​как GIF. С PNG24 вы можете сохранить полную альфа-канал и уменьшить глубину цвета только для непрозрачного слоя. Однако это не сильно улучшает сжатие. В моем эксперименте: 200 КБ PNG24 - ›150 КБ PNG24 с 256-цветным непрозрачным слоем -› 50 КБ PNG8 - person Jerph; 31.03.2009
comment
Вы можете иметь PNG с индексированными цветами и 8-битным альфа-каналом. Возможно, ваш редактор изображений не предлагает вам такую ​​возможность для экспорта, но она существует. - person bobince; 31.03.2009
comment
См. Мою демонстрационную страницу. Я не специалист по графике - поправьте меня, если это не то, что вам нужно! - person Ferdinand Beyer; 31.03.2009
comment
Спасибо, Фердинанд и Бобинс - я этого не знал. Я использую GIMP, и на самом деле он преобразует альфа-слой вашего изображения в 1-битный. Полагаю, вы создали его в Photoshop или Fireworks? Вот ссылка, которую я нашел, объясняет, как: sitepoint.com / blogs / 2007/09/18 / png8-the-clear-win - person Jerph; 31.03.2009
comment
Замечательно, вот несколько параметров командной строки pngquant: libpng.org/pub/png /apps/pngquant.html pngnq: pngnq.sourceforge.net - person Jerph; 31.03.2009
comment
@Jerph: Да, я использую Fireworks в тех редких случаях, когда мне приходится манипулировать графикой :-) - person Ferdinand Beyer; 31.03.2009
comment
Просто хотел добавить, что мы создали онлайн-инструмент сжатия PNG с потерями для этой конкретной цели. - person molf; 24.06.2012

arrow_upward
5
arrow_downward

Я разрабатываю pngquant, который генерирует PNG с палитрой с полной альфа-версией.

Преобразование в палитру довольно близко к сжатию с потерями и дает такие же хорошие результаты - вы часто можете уменьшить размер изображения на 60-70% с небольшой потерей качества.

Я также создал для него графический интерфейс Mac, который включает фильтр с потерями для PNG (постеризация с соответствующим образом выбранными уровнями). Этот метод уменьшает изображения примерно на 30%, но работает с 24-битными изображениями.

person Kornel    schedule 19.03.2012

arrow_upward
2
arrow_downward

Используются ли здесь специальные приемы наслоения flash?

Может быть. В ActionScript можно манипулировать растровыми изображениями, поэтому вы можете взять альфа-слой из простого прозрачного PNG без данных цвета и объединить его с данными пикселей из JPEG.

Существуют ли какие-либо форматы, допускающие сжатие с потерями и прозрачностью?

Да, JPEG 2000 и Microsoft HD Photo. Однако не ждите поддержки браузера!

person bobince    schedule 31.03.2009

arrow_upward
1
arrow_downward

Вы можете использовать ming и на лету создавать flash на своем сервере. Вот пример на PHP, который показывает маскировка jpgs

person Shay Erlichmen    schedule 31.03.2009
comment
Спасибо за ссылку, никогда бы такого не нашел. - person Jerph; 31.03.2009

arrow_upward
1
arrow_downward

Если вы имеете в виду студентов, появляющихся на сайте, это делается с помощью маскировки. Чтобы создать сложную маску, вам придется либо нарисовать ее самостоятельно во Flash, либо, если у вас есть Illustrator, вы можете использовать Live Trace для своего изображения, чтобы получить довольно хорошее векторное приближение контура. Flash также имеет функцию трассировки растрового изображения, но версия Illustrator намного мощнее.

Flash CS4 позволяет применять эффекты фильтра, такие как тень и размытие, к фрагментам роликов и тексту, который визуализируется во время выполнения.

Итак, в основном:

  1. Получить изображение
  2. Получить векторный контур изображения
  3. Поместите векторный контур на слой над изображением и примените маску. Теперь у вас должно остаться только ваше изображение со всеми удаленными пустыми пространствами.
  4. Если вы хотите, чтобы тень копировала векторный контур на слой ниже JPEG, выровняйте его с маской и примените тень к этому нижнему слою в меню «Свойства»> «Фильтры». Убедитесь, что это MovieClip, иначе вы не сможете наложить на него тень.

Если вам нужны дополнительные разъяснения или вам нужен образец файла, напишите мне письмо по адресу jcullinan (at) pinnaclegfx (dot) com

person JLobes    schedule 31.03.2009

arrow_upward
1
arrow_downward

Я вижу несколько интересных ответов. Может быть, я могу добавить к этому, потому что я столкнулся с той же проблемой.

Как работает сжатие с потерями и прозрачность во Flash?

Работает хорошо, вроде прозрачный jpg :)

Существуют ли какие-либо сценарии создания файлов SWF или SWF, которые могут заменить изображение PNG версией, сжатой с потерями?

Да это так:

Посмотрите изображения Durej в формате SWF 2 и png2swf господина doob

Надеюсь, поможет. Удачи!

person George Profenza    schedule 12.04.2009

arrow_upward
0
arrow_downward

Также есть это исследование

http://membled.com/work/apps/lossy_png/

и

http://www.theopavlidis.com/software/pack4png/expages/exindex.htm

person zenna    schedule 10.07.2009

arrow_upward
0
arrow_downward

Вы можете использовать JPEG и маску. Маска может быть растровой (должна сжиматься без потерь как PNG или GIF) или векторной.

Для большинства случаев использования в Интернете упакуйте их вместе как SVG - http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/

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

person Sean    schedule 18.06.2015

arrow_upward
0
arrow_downward

PNG поддерживает сжатие с потерями, но это ужасно по сравнению с JPEG. Например, вот часть изображения, сжатого до 100 КБ с помощью PNG и JPEG:

PNG против JPEG со сжатием с потерями до 100 КБ

Итак, вы можете видеть, что файлы PNG плохо справляются с тонкими градиентами. Они не предназначены для этого.

Похоже, что в ближайшем будущем лучше всего дождаться поддержки WebP, которая фактически доступна во всех основные браузеры уже, но только в последних версиях Safari (на момент написания).

Новый AVIF также является конкурентом в области прозрачности с потерями, но он поддерживается только в Chrome, Opera и Firefox на момент написания (Firefox 86 и новее). Надеюсь, что другие браузеры скоро добавят поддержку для этого, потому что он имеет очень хорошие характеристики восприятия для высоких степеней сжатия.

person joe    schedule 05.01.2021