Оптимизация PNG - можно ли оптимизировать PNG - PullRequest
Новая
       60

Оптимизация PNG - можно ли оптимизировать PNG

6 голосов
/ 03 марта 2011

Я создал дизайн для своего веб-сайта в Photoshop и экспортировал все изображения в виде 24-битных изображений PNG. Позже, запуск теста PageSpeed ​​ на веб-сайте показал, что размер изображений можно дополнительно уменьшить до 50% при сжатии без потерь. Как это может быть? Разве Photoshop не сжимает изображения в максимально возможной степени? Какую программу сжатия изображений использует Google PageSpeed ​​для внутреннего использования, я могу попробовать.

Ответы [ 7 ]

6 голосов
/ 03 марта 2011

Взгляните на pngcrush , это инструмент командной строки, который позволяет оптимизировать файлы PNG, используя множество методов. Если вы предпочитаете графический интерфейс, ImageOptim для Mac встраивает pngcrush, но может сделать еще больше.

2 голосов
/ 30 сентября 2016

Вы можете использовать сервис TinyPng для сжатия ваших png-файлов до 60 процентов.Изменение качества изображения не заметно для человеческого глаза.Сервис имеет веб-интерфейс, плагин WP, а также плагин Photoshop.

1 голос
/ 20 марта 2016

Я использую OptiPNG и pngcrush .

Я написал небольшой скрипт bash, который находит все изображения png в текущем каталоге и его подкаталогах, а затем оптимизирует их, используя количество параллельных процессов, равное количеству логических ядер ЦП. 

cpus=$( ls -d /sys/devices/system/cpu/cpu[[:digit:]]* | wc -w ) # Linux
# cpus=$(sysctl -n hw.ncpu) # OS X

find . -name "*.png" | xargs -n 1 -P $cpus -I % \
    sh -c 'pngcrush -ow -rem allb -brute -reduce "%"; optipng -o7 "%";'
1 голос
/ 22 сентября 2012

Я использую эти инструменты для пост-обработки изображений PNG:

Google PageSpeed, вероятно, использует один из перечисленных выше (или аналогичный инструмент с открытым исходным кодом) за кулисами.Эти инструменты используют различные методы для уменьшения размера файла, такие как:

  1. Уменьшение цвета : если изображение PNG в истинном цвете использует 256 цветов или меньше, размер изображениясокращается путем преобразования его в индексированное изображение.

  2. Удаление метаданных : изображения PNG могут содержать метаданные, которые часто игнорируются браузерами (например, Photoshop хранит информацию о гамме и название программного обеспеченияв PNG изображениях).Удаление этих данных может сэкономить несколько байтов или килобайт.

  3. Предварительное сжатие : данные PNG сжимаются в два этапа.Первый этап называется фильтрацией.Он включает в себя преобразование данных без потерь в более сжимаемую форму;и некоторые программы (например, более старые версии Photoshop) сосут на это.Инструменты повторно анализируют данные и используют эвристику или грубую силу, чтобы определить фильтры, которые дают наиболее сжимаемый результат.

  4. DEFLATE : отфильтрованные данныесжимается с помощью DEFLATE .Сам этот алгоритм допускает различные уровни сжатия (например, быстрое или высокое сжатие).

Повторное сжатие (пункты 3 и 4 выше) может уменьшить размер файла на 5-50% в зависимости от того, насколько плохим было исходное сжатие.

1 голос
/ 03 марта 2011

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

Например, вы говорите, что используете 24-битные PNG. Если ваше изображение имеет только 256 цветов, вам лучше всего с 8-битным PNG (преобразование в индексированные цвета перед сохранением).

Тогда PNG могут содержать метаданные (например, кто и какая программа их создала). Это может быть снято. И пр.

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

Я предполагаю, что фактический двоичный файл, который использует Google Pagespeed, не имеет значения. Он скорее проверит некоторые свойства PNG, чтобы решить, может ли PNG быть более минимизированным (OptiPNG даже связан там ).

Редактировать: На днях я нашел интересную тему о различных типах PNG: http://calendar.perfplanet.com/2010/png-that-works/

0 голосов
/ 03 марта 2011

Я прочитал из документации:

PNG - должно быть 8 бит или меньше (24-битные PNG не будут проходить)

(на http://www.webpagetest.org/, связано с PageSpeed ​​)

0 голосов
/ 03 марта 2011

Ну, возможно, вы захотите рассмотреть «Сохранить для Интернета» в фотошопе, поскольку в последних двух версиях они значительно улучшили алгоритмы сжатия.

И, кстати, у вас действительно нетреализовать все вещи в PageSpeed.Я бы предложил использовать спрайты CSS для фоновых изображений, которые имеют более или менее одинаковые цвета.А если фон вашего сайта белый, вы можете еще больше уменьшить размер спрайтов, используя сравнение jpg.

Удачи

...