Как уменьшить размер файла PNG для веб?


16

У меня есть PNG-24 файл с прозрачным фоном и его текущий размер 1,5 Мб. Как уменьшить размер или использовать формат файла PNG-8 и сохранить то же качество?

введите описание изображения здесь

Файл PNG отсюда: http://www19.zippyshare.com/v/69590430/file.html

Пример загруженного изображения Я перепробовал все предложения, но безрезультатно, пожалуйста, сообщите

Благодарность


Вы используете Save For Web ...? Это должно дать вам варианты для уменьшения размера, включая глубину цвета.
Джеймс П

Вы пример изображение файла JPEG. Если вы хотите, чтобы люди пробовали разные инструменты / методы, вы должны вместо этого предоставить один из файлов PNG ...!
Лоран Parenteau

Загрузчик сайта преобразовал его в JPG. вот файл PNG s8.postimage.org/z4apal6z9/cw_Copy.png ..... пожалуйста использование Dont Постеризовать как это не будет работать с другими файлами у меня есть ..... спасибо
Welliam

1
Эта связь также JPEG.
Дэн Д.

на этот раз я уверен , что это PNG www19.zippyshare.com/v/69590430/file.html.......thanks за вашу помощь
Welliam

Ответы:


6

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

Если вы хотите высокий уровень сжатия для изображения и не заботиться о без потерь для хранения данных, использовать JPEG.


4
Я бы не сказал , мало. Photoshop Save For Web настолько плох, что PNGOUT часто может без потерь уменьшить файлы на 20-40%. А Photoshop не поддерживает альфа PNG8 +, который может быть на 70% меньше для некоторых изображений.
Корнель

Лучшие номера я когда - либо видел разведанные было около 8-15% , но не стесняйтесь , чтобы связать меня более точные данные.
Бэбкок

1
Мне нужно было оптимизировать один png-файл и использовать для этого tinypng.com. Это сэкономило мне более 50% пространства.

9

RIOT может сделать это, и многое другое.

Radical Image Optimization Tool (RIOT для краткости) - это бесплатный оптимизатор изображений, который позволит вам визуально настроить параметры сжатия, сохраняя при этом минимальный размер файла.

Он использует интерфейс параллельного просмотра (двойного просмотра) или единого просмотра для сравнения оригинала с оптимизированным изображением в реальном времени и мгновенного просмотра размера файла.

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

Другая возможность - использовать комбинацию pngquant, pngout и pngcrush, как описано здесь , но это из командной строки.

Вот инструкции, как преобразовать изображения png24 в png8 для ie6 доброты, все через командную строку, используя инструменты с открытым исходным кодом (я думаю) pngquant + pngout + pngcrush.

1 - квантовать изображение в 256 (поэтому в основном png8 выглядит дерьмово с большими спрайтами или спрайтами с большой цветовой гаммой).

pngquant 256 some_24_bit.png

2 - преобразовать изображение из PNG24 в PNG8

pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.png

3- сжать изображение

Pngcrush some_8_bit.png -bit_depth 8 -brute -rem алла -reduce some_8_bit_small.png


6

Попробуйте TinyPNG

С их сайта:

Как это работает?

Когда вы загружаете файл PNG (Portable Network Graphics), похожие цвета в вашем изображении объединяются. Эта техника называется «квантование». Поскольку количество цветов уменьшено, 24-битные файлы PNG можно преобразовать в намного меньшие 8-битные индексированные цветные изображения. Все ненужные метаданные раздели тоже. Результат: крошечные файлы PNG со 100% поддержкой прозрачности.

У них есть два варианта:

  • Перетащите изображения на их сайт, и он будет автоматически обработан. Бесплатный сервис (до 20 изображений. Макс 5 Мб каждый)
  • Фотошоп плагин. Это стоит $.

Я не пробовал плагин PS, поэтому не могу комментировать, насколько хорошо он работает.


Это был действительно хороший совет, TinyPNG сократил размер моего 24-битного PNG-файла из Photoshop с 200 до 50 000, и он сохранил прозрачность смешанного типа! Спасибо за ответ. ВНИМАНИЕ это было почти неразличимо по качеству изображения.
TripleAntigen

Это реально работает! Мои 1MB PNG изображение стало 253KB без потери качества!
BrunoSerrano

5

Если вы не против командной строки, взгляните на OptiPNG , это может быть то , что вы после этого .

OptiPNG - это оптимизатор PNG, который сжимает файлы изображений до меньшего размера, не теряя никакой информации. Эта программа также преобразует внешние форматы (BMP, GIF, PNM и TIFF) в оптимизированный PNG и выполняет проверки и исправления целостности PNG.


Спасибо, но не удалось много оптимизировать! Я загрузил изображение
Welliam

3

Используйте комбинацию pngoutиdeflopt . pngoutавтоматически определит, подходят ли ваши цвета PNG к PNG-8, и использует его. defloptвыжимает лишние байты из уже оптимизированного изображения - это полезно для работы с любыми сдутыми данными, и PNG является одним из них.


спасибо, но pngout не удалось уменьшить только несколько КБ!
Веллиам

1
Вы ожидали магии? Ваше изображение явно имеет более 256 цветов. Постерируйте это, чтобы уменьшить количество цветов.
Олег Владимирович Волков

Когда размер уменьшен с 970 до 945, это не очень хорошие результаты, также постеризация не работает с другими PNG, которые у меня есть.
Welliam

3

Хорошей идеей для обработки PNG с альфа-каналом в контексте разработки веб-сайта было бы позволить серверу выполнить свою задачу за вас: динамически отделить данные изображения от альфа-канала на сервере, оптимизировать их по отдельности и рекомбинировать их, используя элемент canvas и немного JavaScript в браузере. Ta-Da! Работает со всеми современными браузерами.

Здесь объясняется, как это сделать:

http://headers-already-sent.com/artikel/shrinkimage-1/

Вы также найдете полный пакет ZIP с PHP-скриптом и плагином jQuery. Дайте нам знать, что вы думаете об этом.


1

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

Изображение от вопроса выглядит как цветовой градиент с вертикальными линиями и некоторые пятна / шум. Разбейте это на следующие слои:

  1. Градиент цвета без линий или шума. Это хорошо сжимает в PNG и очень хорошо в JPEG. Еще лучше использовать JavaScript для создания цветового градиента на клиенте. Вы могли бы сделать это менее чем за 200 байтов JS.
  2. Вертикальные линии, не имеющие цветов или шума. Вы можете сжать это вниз к одному 4 бита канала (альфа или серый). Вам нужно только 1 пиксельное изображение, которое вы можете растянуть. Это очень хорошо сжалось бы в PNG.
  3. Шум. Опять же, все, что вам нужно, это один 4-битный канал (альфа или серый). Без цвета или линий это должно очень хорошо сжиматься в PNG или JPEG.

Объедините слои в одно изображение с помощью JavaScript, и все ваше «изображение» может составлять 15 КБ или меньше.

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


1

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

Но есть еще способ сжать файлы PNG еще дальше; уменьшая количество цветов, используемых в изображении. Это часто может уменьшить размер файла до 70% или даже выше.

Лучшее автоматизированное бесплатное программное обеспечение с наибольшим общим процентом сжатия, которое я нашел для этого, - это FileOptimizer, который использует несколько механизмов (например, PngOptimizer, PNGOUT, pngwolf и т. Д.), Чтобы сжать изображение до минимально возможного размера.

Вот еще один онлайн-инструмент с хорошими результатами: http://www.giftofspeed.com/png-compressor/


1

Позвольте мне представить FileOptimizer . Он сочетает в себе различные методы оптимизации изображения (включая удаление EXIF для сохранения несколько дополнительных байт - может быть выключен).

Результаты испытаний и сравнение с другими решениями.

введите описание изображения здесь


0

ScriptPNG http://css-ig.net/scriptpng

это дает вам о 10 различных вариантов, включая с потерями! Я пробовал кучу, и это окна пакетный файл (с кучей .exes) отлично

Я лично использую его для сжатия до 8-битных с потерями Не совсем уверен, как это работает, но мои скриншоты выглядят одинаково. Я использую его для сжатия скриншотов. У меня было около 2 ГБ PNG, теперь только 700 МБ

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.