Оптимизация png: Сжатие PNG-изображений онлайн

Сжатие PNG-изображений онлайн

Загрузить

Перетащите файлы сюда.

Применительно к цифровым файлам сжатие — это действие по удалению битов информации из одного файла и уменьшению его размера. Иногда вы удаляете пустые или бесполезные биты информации, поэтому файл уменьшается в размере, но выглядит точно так же. Это называется сжатием без потерь. С другой стороны, если вы удаляете биты, которые снижают качество файла, это называется сжатием с потерями.

Инструмент на этой странице осуществляет один из видов сжатия с потерями, уменьшая доступную цветовую палитру PNG.

Зачем нужно сжимать PNG?

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

PNG поддерживает либо 24-битные, либо 8-битные цвета. Чем выше разрядность, тем больше цветов доступно для PNG — и тем больше размер файла. Если на вашем сайте есть простой логотип в формате PNG с разрядностью 24 бита, этот файл занимает ненужное место и замедляет загрузку страницы. Преобразование этого изображения в 8-битную палитру уменьшит размер файла, не влияя на его видимое качество. Теперь у вас есть файл меньшего размера, занимающий меньше места в хранилище, и ваша страница будет загружаться немного быстрее.

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

Как сжать PNG?

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

Прежде всего, вам нужно загрузить один или до 20 файлов PNG. Самый простой способ сделать это — просто перетащить изображения в поле “Перетащите файлы сюда. ”. Однако если вы пользуетесь мобильным устройством, вы можете нажать кнопку “ЗАГРУЗИТЬ” и таким образом перейти к вашим PNG.

После загрузки вы увидите миниатюры PNG в очереди. Наш сервер немедленно обработает их и определит подходящий коэффициент сжатия качества. Если вас устраивает то, что выбрал наш сервер, вы можете просто взять сжатый файл(ы), нажав кнопку “СКАЧАТЬ” под миниатюрами.

Если вы хотите вручную управлять степенью сжатия, это также возможно. Нажмите на миниатюру одного из ваших изображений, чтобы запустить ручной режим. Перемещайте ползунок качества, пока не найдете идеальное соотношение сжатия и верности файла. Когда вы будете удовлетворены, нажмите кнопку “OK” и переходите к следующему изображению.

Когда все готово, вы можете сэкономить время, нажав кнопку “СКАЧАТЬ ВСЕ”. Это загрузит ZIP-файл, который будет содержать все ваши сжатые PNG в одном удобном пакете.

Если вы готовы выполнить еще одно преобразование, нажмите кнопку “ОЧИСТИТЬ” и начните процесс заново. Помните, что вы можете делать партии только из 20 изображений максимум, но вы можете загружать столько партий, сколько захотите.

Безопасно ли сжимать файлы PNG?

Наш инструмент сжатия не только прост в использовании, но и абсолютно безопасен. Сервер, на котором работает инструмент, полностью автоматизирован, поэтому никто не видит загруженные вами изображения. Кроме того, сервер автоматически очищает все данные через 60 минут, поэтому все, что вы загрузите, будет удалено всего через час. Это обеспечивает конфиденциальность и безопасность ваших данных.

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

Сжать PNG — Уменьшить размер изображения онлайн и бесплатно

Уменьшите графический файл с помощью инструмента для сжатия — онлайн и бесплатно. Для уменьшения изображения преобразуйте его в PNG.

Перетащите файлы сюда

Введите URL

Dropbox

Google Диск

Качество:

Выберите подходящее качество изображения. Чем выше качество, тем больше весит файл. И наоборот, чем ниже качество, тем меньше размер файла.

Максимальное сжатиеНаилучшее качество

0%

20%

40%

60%

80%

100%

Информация: Включите поддержку JavaScript, чтобы обеспечить нормальную работу сайта.

Публикация рекламы

Оставайтесь на связи:

Как уменьшить размер изображения?

  1. Загрузите изображение с помощью одного из методов выше.
  2. Выберите качество изображения для оптимизации результата (по желанию).
  3. Нажмите «Начать», и сжатие начнётся.

Оцените инструмент





4. 0 / 5


Чтобы оставить отзыв, преобразуйте и скачайте хотя бы один файл

Отзыв отправлен


Спасибо за оценку

Сжать изображения PNG онлайн

Загрузить файлы

Перетащите сюда свои файлы

Применительно к цифровым файлам сжатие — это действие по уменьшению размера одного файла за счет удаления битов информации. Иногда вы удаляете пустые или бесполезные биты информации, поэтому размер файла уменьшается, но он выглядит точно так же. Это называется сжатием без потерь. С другой стороны, удаление битов, снижающих качество файла, называется сжатием с потерями.

Инструмент на этой странице выполняет тип сжатия с потерями, уменьшая доступную цветовую палитру PNG.

Зачем вам сжимать PNG?

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

PNG поддерживают 24-битные или 8-битные цвета. Чем выше поддержка битов, тем больше доступных цветов для этого PNG — и тем больше размер файла. Если на вашем веб-сайте есть простой логотип в формате 24-битного PNG, этот файл занимает лишнее место и замедляет загрузку страницы. Преобразование этого изображения в 8-битную палитру уменьшит размер файла, не влияя на его видимое качество. Теперь у вас есть файл меньшего размера, занимающий меньше места в хранилище, и ваша страница будет загружаться немного быстрее.

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

Как сжать PNG?

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

Первое, что вам нужно сделать, это загрузить один или до 20 файлов PNG. Самый простой способ сделать это — просто перетащить изображения в поле «Перетащите сюда файлы». Однако, если вы используете мобильное устройство, вы также можете нажать кнопку «ЗАГРУЗИТЬ ФАЙЛЫ» и таким образом перейти к своим PNG.

После загрузки вы увидите миниатюры для ваших PNG в очереди. Наш сервер немедленно обработает их и определит подходящий коэффициент для качественного сжатия. Если вас устраивает выбор нашего сервера, вы можете просто скачать сжатые файлы, нажав кнопку «СКАЧАТЬ» под миниатюрами.

Если вы хотите вручную контролировать уровень сжатия, это тоже вариант. Коснитесь миниатюры одного из ваших изображений, чтобы запустить ручной режим. Перемещайте ползунок качества, пока не найдете идеальное соотношение сжатия и точности файла. Когда все будет готово, нажмите кнопку «ПРИМЕНИТЬ» и перейдите к следующему изображению.

Когда все будет готово, вы можете сэкономить время, нажав кнопку «СКАЧАТЬ ВСЕ». Это загружает ZIP-файл. Этот файл будет содержать все ваши сжатые PNG в одном удобном пакете.

Если вы готовы выполнить еще одно преобразование, нажмите кнопку «ОЧИСТИТЬ ОЧЕРЕДЬ» и запустите процесс заново. Помните, что вы можете создавать пакеты не более чем из 20 изображений, но вы можете загружать столько пакетов, сколько захотите.

Безопасно ли сжимать файлы PNG?

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

Кроме того, если вы недовольны результатом сжатия, у вас все еще будут исходные файлы. Затем вы можете снова загрузить мастер-файл и повторно сжать его. Вы можете делать это столько раз, сколько пожелаете.

Как оптимизировать PNG — Smashing Magazine

  • 19 минут чтения
  • Графика,
    Дизайн,
    Оптимизация,
    PNG
  • Поделиться в Twitter, LinkedIn
Об авторе

Сергей Чикуёнок — российский веб-разработчик и писатель, увлекающийся оптимизацией: от изображений и эффектов JavaScript до рабочего процесса и …
Больше о
Сергей ↬

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

Как веб-дизайнер, вы, возможно, уже знакомы с форматом изображения PNG, который предлагает полнофункциональную прозрачность. Это надежная, очень хорошая замена старого формата изображений GIF без потерь. Как пользователь Photoshop (или любого другого редактора изображений) вы можете подумать, что вариантов оптимизации PNG не так много, особенно для полноцветного PNG (PNG-24 в Photoshop), у которого их нет. Некоторые из вас могут даже подумать, что этот формат «неоптимизируемый». Что ж, в этом посте мы попробуем развенчать этот миф.

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

Дополнительная литература на SmashingMag:

  • Умные методы оптимизации JPEG
  • Насколько оптимизированы ваши изображения? Встречайте ImageOptim-CLI
  • Эффективное изменение размера изображения с помощью ImageMagick

Скучная часть

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

Больше после прыжка! Продолжить чтение ниже ↓

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

Фильтрация строк сканирования

Вот как это работает. Например, у нас есть изображение размером 5×5 пикселей с горизонтальным градиентом. Вот схематический вид этого изображения (каждое число представляет уникальный цвет):

Как видите, все одинаковые цвета распространяются по вертикали, а не по горизонтали. Такие изображения будут иметь очень плохой коэффициент сжатия в формате GIF, потому что он сжимает цвета, распространяющиеся по горизонтали. Давайте посмотрим, как эти данные изображения могут быть упакованы с помощью фильтрации строки развертки:

Число 2 перед каждой строкой представляет примененный фильтр, который в данном случае «Вверх». Фильтр «Вверх» отправляет сообщение декодеру PNG: «Для текущего пикселя возьмите значение вышеуказанного пикселя и добавьте его к текущему значению». У нас есть значение 0 для строк 2-5, потому что все пиксели в каждой вертикальной строке имеют одинаковый цвет. И такие данные сжимались бы лучше, если бы изображение было относительно большим. Например, 15 пикселей со значением 0 можно записать как 0 (15), и это намного короче, чем пятнадцать нулей — так обычно работает сжатие.

Я написал «может быть упакован», потому что в этом идеальном тестовом примере фильтр «Подчинение» (цифра 1 перед каждой строкой) даст гораздо лучший результат:

Фильтр «Подчинение» отправляет сообщение декодеру: « Возьмите значение левого пикселя и добавьте его к текущему значению». В данном случае это 1. Как вы уже догадались, такие данные будут сжиматься очень эффективно.

Фильтрация строк сканирования важна для нас, потому что мы можем их использовать: в частности, мы можем выполнять некоторые манипуляции с изображением, чтобы улучшить фильтрацию. Существует пять фильтров: None (без фильтрации), Sub (вычесть значение левого пикселя из текущего значения), Up (вычесть указанное выше значение пикселя), Average (вычесть среднее значение левого и верхнего пикселей) и Paeth (подставить значение верхнего, левого или верхнего левого пикселя, названное в честь Алана Паэта).

А вот как эти фильтры влияют на размер изображения по сравнению со старым добрым GIF:

GIF, 2568 байт

PNG, 372 байта

7 PNG, 372 байта

7 изображение в 7 раз больше, чем такое же PNG-изображение

.

Тип изображения

Еще одна важная вещь, которую нужно знать о PNG, это тип изображения , метаданные, хранящиеся внутри файла. Как пользователь Photoshop, вы знакомы с PNG-8 (индексированное изображение) и PNG-24 (изображение в истинном цвете). Как пользователь Fireworks, вы можете знать PNG-32 (истинный цвет с прозрачностью), что довольно запутанно, потому что PNG-24 Photoshop также может хранить истинный цвет с прозрачностью. Что ж, стоит знать, что эти имена не являются официальными, и вы не найдете их в спецификациях PNG. Для вашего удобства в этой статье мы будем использовать соглашение Photoshop об именах типов изображений PNG.

Существует 5 доступных типов изображений в формате PNG : Оттенки серого, Truecolor, Индексированный цвет, Оттенки серого с альфа-каналом и Truecolor с альфа-каналом. Есть также два подтипа типа indexed-color (тоже неофициальные): бит прозрачности (каждый пиксель может быть полностью прозрачным или полностью непрозрачным) и палитра прозрачности (каждый пиксель может быть полупрозрачным). Во втором случае каждый цвет хранится в палитре со своим альфа-значением. Таким образом, непрозрачный красный и 50%-прозрачный красный — это два разных цвета, и они занимают 2 ячейки внутри палитры.

Хуже всего то, что Photoshop может сохранять PNG только с тремя из этих типов: Indexed-color с битовой прозрачностью, Truecolor и Truecolor с прозрачностью. Вот почему вы можете встретить множество мнений о том, что Adobe Fireworks — лучший инструмент для оптимизации PNG. Лично я с ними не согласен: в Fireworks не хватает инструментов для работы с изображениями, только немного больше возможностей для сохранения изображения PNG, но это тема для отдельного разговора.

Здесь пригодятся такие утилиты, как OptiPNG или pngcrush. По сути, эти инструменты делают следующее:

  1. Выберите лучший тип изображения для изображения (например, истинный цвет можно преобразовать в индексированный цвет, если в изображении не слишком много цветов).
  2. Подберите лучшие дельта-фильтры.
  3. Подберите наилучшую стратегию сжатия и, при необходимости, уменьшите глубину цвета.

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

Хватит со скучной части, давайте поколдуем!

1. Постеризация

Известный метод оптимизации полноцветного изображения. Откройте образец изображения в Photoshop, нажмите значок в палитре слоев и выберите «Постеризация»:

Выберите наименьшее возможное количество уровней (обычно достаточно 40) и сохраните изображение:

Оригинал, 84 КБ

Постеризованный, 53 КБ

Вот как это работает: постеризация просто уменьшает количество цветов, превращая похожие цвета в один, создавая таким образом постеризованные области. Это помогает выполнять более качественную фильтрацию строк развертки и достигать лучшего сжатия. Недостатком этого метода является чередование цветов, что особенно заметно, если вы пытаетесь сшить изображение с HTML-фоном:

Исходное изображение

Постеризованное изображение

2.

Грязная прозрачность

Взгляните на следующие изображения:

75 КБ

30 КБ

9000 Оба изображения были сохранены без какой-либо оптимизации в Photoshop. Даже если вы сделаете попиксельное сравнение этих изображений, вы не заметите никакой разницы. Но почему первое изображение в 2,5 раза больше второго?

Вам нужен специальный плагин для Photoshop, чтобы увидеть скрытые детали. Это называется Удалить прозрачность и доступен для бесплатной загрузки в наборе плагинов PhotoFreebies. Вы должны сначала установить его, прежде чем переходить к следующему шагу.

Откройте оба изображения из приведенного выше примера в Photoshop и выберите Filer > Photo Wiz > Remove Transparency . Теперь вы можете увидеть фактические данные пикселей, которые были сохранены в изображении:

Что происходит? Как можно извлечь данные исходного изображения из однослойного изображения PNG? Что ж, это довольно просто. Каждый пиксель в изображении истинного цвета с альфа-каналом описывается четырьмя байтами: RGBA. Последним является Alpha, который управляет прозрачностью пикселей: значение 0 означает полностью прозрачный пиксель, а 255 означает полностью непрозрачный. И это означает, что каждый пиксель (с любым значением RGB) можно скрыть, установив только альфа-байт в 0. Но эти данные RGB все еще существуют и, более того, они не позволяют кодировщику PNG эффективно упаковывать и кодировать поток данных. Таким образом, мы должны удалить эти скрытые данные (например, заполнить их сплошным черным цветом) перед сохранением изображения. Вот быстрый способ, как это сделать:

  1. Откройте первое изображение из примера выше в Photoshop.

  2. Ctrl+щелчок (или Cmd+щелчок на Mac) по миниатюре изображения в палитре слоев, чтобы создать выделение, затем инвертировать его: Select > Inverse .

  1. Переключитесь в режим быстрой маски, нажав клавишу Q:
  1. Мы создали маску для полупрозрачного изображения, но нам нужно оставить только полностью прозрачные пиксели. Выберите Image > Adjustments > Threshold и переместите ползунок Threshold Level вправо, оставив полностью прозрачные пиксели выделения:
  1. Выйдите из режима быстрой маски (снова нажмите клавишу Q) и залейте выделение черным цветом:
  1. Снова инвертируйте выделение ( Select > Inverse ) и щелкните значок в палитре слоев, чтобы добавить маску.

Вот и все, теперь вы можете сохранить это изображение в PNG-24 и убедиться, что изображение размером 75 КБ теперь составляет 30 КБ. Кстати, все эти шаги можно легко записать в действие Photoshop и повторно использовать позже одним нажатием клавиши.

Вы можете подумать о «грязной прозрачности» как о какой-то ошибке в редакторах изображений: если эти области изображения не видны и занимают так много места, почему их нельзя удалить автоматически перед сохранением? Что ж, этот «баг» можно легко превратить в «фичу». Взгляните на следующие изображения:

5 537 байт

6 449 байт

Если убрать прозрачность с этих изображений, вы увидите следующее:

0006

Несмотря на то, что первое изображение содержит более сложные данные изображения, оно на 1 КБ легче, чем второе, которое было оптимизировано, как описано выше. Объяснение такого «аномального» поведения простое: поток данных изображения в первом примере был эффективно упакован дельта-фильтрами, которые лучше работают для плавных цветовых переходов (например, градиентов).

Технические специалисты могут просмотреть журнал вывода OptiPNG и убедиться, что ко второму изображению вообще не применялись фильтры. Вот почему я настоятельно рекомендую вам сначала прочитать скучную часть этой статьи, прежде чем использовать эти методы: если вы не понимаете, что делаете, вы можете сделать свое изображение еще больше.

Наилучшим решением для сохранения исходных данных изображения является создание маски на слое изображения в Photoshop (мы вернемся к этому позже):

Как видите, грязная прозрачность — очень мощная, но очень тонкая техника. Вы должны знать, как и почему это работает, прежде чем использовать его. Если вы сохраняете изображения PNG-24 с прозрачными областями, первое, что вам нужно сделать, это проверить данные изображения в этих областях и принять правильное решение об очистке или оставлении их как есть.

3. Разделить по прозрачности

Иногда приходится сохранять изображение в «тяжелом» PNG-24 из-за малого количества полупрозрачных пикселей. Вы можете сэкономить дополнительные Кб, если разделить такие изображения на две части — одну со сплошными пикселями, вторую — с полупрозрачными — и сохранить их в соответствующих графических форматах. Например, вы можете сохранить полупрозрачные пиксели в формате PNG-24, а сплошные — в формате PNG-8 или даже JPEG. Вот быстрое (и записываемое для действий) решение для этого. Для наших экспериментов мы будем использовать этого старшего российского предка iPod:

PNG-24, 62 КБ

  1. Ctrl+щелчок/Cmd+щелчок по миниатюре изображения в палитре слоев, чтобы создать выделение:
  1. Перейти к выбору каналов и создать новый канал из палитры:
  1. Снимите выделение (Ctrl+D или Cmd+D), выберите только что созданный канал и запустите Threshold ( Image > Adjustments > Threshold ). Переместите ползунок вправо:
  1. Сделали маску для выделения битых сплошных пикселей. Теперь нам нужно разделить исходный слой по этой маске. Ctrl+щелчок/Cmd+щелчок по каналу Alpha 1, перейдите в палитру Слои, выберите исходный слой и запустите Layer > New > Layer via Cut . В результате получается два слоя с разделенными сплошными и полупрозрачными пикселями.

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

PNG-8 128 colors + dithering 17 KB

PNG-24 posterization 35 6 KB

And here is the result for comparison:

Before 63 KB

Через 23 КБ

У этого способа есть очевидный недостаток: вы получаете два изображения вместо одного, что может быть не очень удобно в использовании (например, при создании каталога товаров в CMS).

4. Маски воздействия

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

К сожалению, эти свойства были удалены в Photoshop CS4, поэтому вы можете попробовать этот подход к оптимизации только в версиях до CS4 (я использую CS3).

Чтобы понять, как работают маски влияния, давайте откроем это демонстрационное изображение в PS и сохраним его в формате PNG-8 со следующими настройками: Снижение цвета: Адаптивное, Дизеринг: Без дизеринга, Цвета: 256 .

42 КБ

Первое, что я заметил на этом изображении, — очень размытый маятник. Это очень яркое пятно на изображении, которое привлекает слишком много внимания. Попробуем сгладить цветовые переходы маятника, установив дизеринг на 100%:

46 КБ

Теперь маятник выглядит лучше, но появились другие проблемы: размер изображения увеличился на 4 КБ, а сплошной фон стал очень шумным. :

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

Опираясь на эти проблемы, попробуем сделать невероятное: повысить качество изображения за счет уменьшения количества цветов и размера изображения . Нам помогут маски влияния.

Начнем с цвета. Перейдите в палитру Channels, создайте новый канал и назовите его color . Мы уже определили, что маятник является нашей первоочередной областью для улучшения качества изображения, поэтому нам нужно нарисовать белый круг прямо на его месте (вы можете включить канал RGB для большей точности).

Перейдите в диалоговое окно «Сохранить для Интернета» и установите следующие свойства: Снижение цвета: Адаптивное, Дизеринг: Нет, Цвета: 128 (как видите, мы уменьшили количество цветов с 256 до 128). Теперь нам нужно выбрать маску влияния: кликните по ближнему списку Снижение цвета и выберите из выпадающего списка канал цвета : Теперь наше изображение выглядит следующим образом:

Вы можете увидеть маску влияния в действии : маятник выглядит идеально, но остальные части изображения выглядят очень плохо. Установив маску влияния, мы сказали Photoshop: «Смотри, приятель, маятник — очень важная часть изображения, поэтому постарайся сохранить как можно больше цветов в этой области». Маска влияния работает точно так же, как и обычная маска прозрачности: белый цвет означает наивысший приоритет в соответствующей области изображения, черный цвет означает самый низкий приоритет. Все промежуточные оттенки серого пропорционально влияют на изображение.

Маятник теперь имеет наивысший приоритет цвета, поэтому мы должны уменьшить интенсивность белого круга, чтобы оставить больше цветов для других областей. Закройте диалоговое окно «Сохранить для Интернета», перейдите в палитру «Каналы», выберите канал цвета и откройте диалоговое окно «Уровни» (Изображение > Коррекция > Уровни ). Установите максимальный выходной уровень на 50, чтобы уменьшить интенсивность белого цвета:

Попробуйте снова сохранить для Интернета с теми же свойствами:

Теперь выглядит лучше, но теперь у нас есть проблемы в других областях изображения:

Я думаю, вы уже понимаете, как работают маски влияния: вы предоставляете Photoshop некоторые подсказки о важных областях изображения с различными оттенками серого. Методом проб и ошибок у меня получилась следующая цветовая маска (можно скопировать и применить к изображению):

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

Мой канал дизеринга выглядит так:

Применение каналов влияния цвета и дизеринга с одинаковыми настройками оптимизации (Адаптивный, 128 цветов):

Неплохо для 128 цветов, не так ли? Давайте сделаем несколько последних штрихов: установим цвета на 180 и максимальное сглаживание на 80%. И вот наш окончательный результат по сравнению с оригинальной неоптимизированной версией:

256 цветов, без дизеринга, неоптимизированный 42 КБ

180 цветов, оптимизировано 34 КБ

Оттенки серого

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

 optipng -o5 bw- image. png

Изображения в градациях серого занимают гораздо меньше места, чем RGB, потому что каждый пиксель описывается только одним байтом, а не тремя:

PNG-24 (Photoshop → true-color), 8167 байт.

PNG-24 (Photoshop + OptiPNG → оттенки серого), 6132 байта

Настройка цветового режима «Оттенки серого» (Изображение → Режим → Оттенки серого) для изображений перед их сохранением в формате PNG очень важна, особенно для полупрозрачных изображений (дополнительную информацию см. в разделе «Метод грязной прозрачности»).

Меньше цветов

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

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

  1. Откройте исходное изображение в Photoshop и продублируйте его (Изображение → Дублировать).

63 КБ

  1. Удалить прозрачность дублированного изображения (Фильтр → Photo Wiz → Удалить прозрачность):
  1. Установите режим изображения Индексированный цвет (Изображение → Режим → Индексированный цвет). В новом диалоговом окне введите следующие настройки:
  • Цвета: 190,
  • Дизеринг: Диффузия,
  • Количество: 80%.
  1. Установите режим изображения обратно на RGB и скопируйте слой изображения в исходный файл. Совместите скопированный слой с указанным и примените его маску. Теперь сохраните его в PNG-24:

51 КБ

Как видите, эти простые шаги сэкономили нам 11 КБ исходного изображения без какого-либо заметного влияния на качество изображения. Но у этого метода есть еще одно преимущество: запуск OptiPNG на этих изображениях часто позволяет сэкономить еще больше байтов. В этом примере размер изображения был уменьшен на 36%, с 51 КБ до 33 КБ. Вместо того, чтобы преобразовывать изображение в режим индексированных цветов, вы можете сохранить его для Интернета и применить маску влияния, чтобы сэкономить лишние байты.

Обратите внимание, что этот метод отличается от PNG-8 с прозрачностью палитры в Fireworks. В большинстве случаев меньше цветов даст вам более 256 цветов, поэтому вам придется сохранять изображение в формате PNG-24, а не PNG-8. Помните, что сплошной красный и красный, прозрачный на 50%, — это два разных цвета.

Уменьшение деталей

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

  1. Снова откройте iPod retro в Photoshop.

63 КБ

  1. Как видите, под радио есть отражение, которое является хорошим кандидатом на оптимизацию. Ctrl + щелкните или ⌘ + щелкните миниатюру изображения в палитре слоев, чтобы создать выделение. Переходим в палитру Channels и из выделения создаем новый канал:
  • 3. Нам осталось локализовать только те пиксели, которые едва видны. Инвертируйте канал (Image → Adjustments → Invert) и откройте диалоговое окно Threshold (Image → Adjustments → Invert). Установка Threshold Level на 170 достаточно хороша:

4. Получилась маска, включающая только едва видимые пиксели. Ctrl + щелчок или ⌘ + щелчок по каналу в палитре, чтобы создать выделение. Вернитесь в палитру «Слои», выберите слой изображения и откройте «Фильтр» → «Шум» → «Медиана». Этот фильтр сглаживает выделенные пиксели, делая их более удобными для сжатия. Установите значение радиуса на 5:

Теперь сохраните это изображение «для Интернета» в формате PNG-24 и посмотрите, как его размер уменьшился с 63 КБ до 59.КБ. Вы можете изменить пороговый уровень и срединный радиус, чтобы сжать больше или сохранить больше деталей.

Дополнительные советы по использованию и оптимизации PNG

  1. Каждая оптимизация должна начинаться с тщательного анализа изображения. Выберите лучшую технику для каждого изображения или комбинируйте техники для достижения лучших результатов.

  2. Будьте изобретательны. Используйте эти методы в качестве отправной точки для ваших собственных методов, адаптированных к вашим конкретным изображениям.

  3. Многие считают, что PNG-8 всегда лучше, чем PNG-24 для низкоцветных изображений. Это не. В некоторых случаях PNG-24 может дать лучшие результаты:

PNG-8, 833 байта

PNG-24, 369 байт

цветовая палитра и 1 байт для описания цвета пикселя в потоке данных изображения, в то время как PNG-24 занимал всего 3 байта для каждого пикселя. Итак, если вы сохраняете малоцветные изображения в формате PNG без прозрачности , проверьте, какой файл меньшего размера — PNG-8 или PNG-24.

Если вы используете более раннюю версию Photoshop (до CS3), вы можете обнаружить, что изображения PNG в редакторе изображений выглядят иначе, чем в веб-браузере. Это связано с тем, что фрагмент gAMA, сохраненный в файле PNG, управляет гаммой изображения. Вы можете безопасно удалить его с помощью таких инструментов, как TweakPNG (только для Windows) или smush.it.

«Специальный» тип изображения PNG позволяет сохранять полупрозрачное изображение в формате PNG-8 с индексированными цветами. Этот тип изображения недоступен в Photoshop (он есть в Fireworks), но вы можете подготовить изображение в Photoshop, а затем преобразовать его с помощью OptiPNG. OptiPNG по умолчанию преобразует полноцветные изображения в 8-битную палитру, если ваше изображение содержит менее 256 цветов. Для этого можно применить приемы «Меньше цветов» и «Понижение деталей» и «угадать» количество цветов.

Но это может занять очень много времени. Существует инструмент под названием PNGNQ, который может конвертировать полноцветное изображение в палитру 256, но у вас не будет достаточного контроля над результирующим изображением. Вам придется уменьшить общее количество различных цветов, включая полупрозрачные, до 256 или меньше. Этот формат является «особым» из-за того, как он отображается в IE6:

IE6

Другие браузеры

Как видите, IE6 отображает только непрозрачные пиксели. Хорошо, что вы можете включать такие изображения в обычные или как фоновые изображения (т. е. без использования ресурсоемкого CSS-фильтра AlphaImageLoader), что обеспечивает плавную деградацию.

Не используйте диалоговое окно «Сохранить как» для сохранения изображений PNG для Интернета; вместо этого используйте диалоговое окно «Сохранить для Интернета». По умолчанию Photoshop сохраняет предварительный просмотр изображения в качестве дополнительной информации в файле, делая файл в несколько раз больше, чем нужно.