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

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

радикальный инструмент оптимизации изображений (сокращенно 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 -С3 -Д8 -г -сила some_24_bit.ПНГ some_8_bit.png

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

pngcrush some_8_bit.png-bit_depth 8-brute-rem alla-уменьшить some_8_bit_small.png

Try TinyPNG

с их сайта:

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

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

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

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

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

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

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

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

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

здесь объяснено как оно готово:

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

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

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

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

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

объединить слои в одно изображение с JavaScript, и весь ваш "образ" может быть 15 КБ или меньше.

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

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

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

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

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

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

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