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

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

6
image-compression pagespeed png

7 ответов

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

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

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

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

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

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

1

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

6

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

2

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

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

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

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

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

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

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

1

Я использую 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

Ну, вы можете рассмотреть "сохранить для интернета" в photoshop, так как в последних нескольких версиях они значительно улучшили алгоритмы сжатия.

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

удачи

0

Я читаю из документации:

PNG-должно быть 8 бит или ниже (не 24-бит PNGs пройдет)

(on http://www.webpagetest.org/, связанный с файле PageSpeed)

0