12 техник оптимизации размера PNG — CMS Magazine

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

PNG-формат предполагает отсутствие потерь в качестве при сохранении изображений (да, он позволяет иметь полноцветное изображение с полупрозрачностью БЕЗ потерь качества). Но для сохранения этого преимущества не обязательно проигрывать в размере. В некоторых случаях — например, градиентные или малоцветные изображения — PNG является наиболее выгодным форматом с точки зрения размера.

Выбор правильного формата

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

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

Удаление чанков

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

Первый из них: это удаление мусора в мета-информации (неиспользуемых чанков) и в используемой палитре (неиспользуемых цветов). Важными являются IHDR, IDAT и IEND-чанки. Все остальные содержат вспомогательную информацию (но, например, удаление чанка gAMA приводило к «порче» изображений в браузере Safari старых версий). Чанки с комментариями, датой изменения и цветовыми профилями (для полиграфии) можно смело вычищать: для браузера это бесполезный набор символов. Удалить чанки можно при помощи утилиты ExifTool.

Больше не нужно искать и обзванивать каждое диджитал-агентство

Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Правильный выбор палитры

Существует 6 вариантов формата PNG для разных задач: серая палитра, цветная палитра (256 цветов), полноцветная палитра, и дополнительно каждый вариант может включать прозрачность. Правильный выбор палитры и прозрачности позволяет сократить размер PNG изображения. Если у вас меньше 256 цветов, то всегда выбирайте PNG8 и следите за прозрачностью (некоторые редакторы не умеют сохранять полупрозрачность для PNG8).

Если изображение содержит исключительно оттенки серого, то ваш выбор — Grayscale.

Если в изображении больше 256 цветов — попробуйте преобразовать его к PNG8. Возможно, деградация качества будет незаметной. Если цветов слишком много — рассмотрите вариант с форматом JPEG. Если и это невозможно, то выбирайте TrueColor и следите за прозрачностью.

Оптимизация альфа-канала

Ряд инструментов позволяют использовать не индексированный альфа-канал, а полную полупрозрачность, сохраняя исходную палитру (например, в 256 цветов). Это существенно уменьшает размер изображения.

Дополнительно можно использовать размытие (Dithering), чтобы сгладить малое количество цветов при полупрозрачности.

Оптимизация фильтров

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

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

Оптимизация сжатия

Почти финальный пункт, где еще можно «дожать» PNG — это сжатие. Благодаря открытому формату (в отличие от GIF), PNG поддерживает большое количество алгоритмов сжатия, в частности, zlib, 7-zip, Kzip, zopfli. Разные утилиты оптимизируют изображения разными способами, и оптимизация за счет сжатия должна идти всегда в финале: уже после выбора палитры, прозрачности и оптимизации фильтров. Хотя иногда менее оптимальные наборы фильтров могут дать в совокупности с другим сжатием меньший по размеру файл.

Оптимизация сжатия данных применяется следующими утилитами: optipng, TruePNG, PNGwolf, AdfDef, PNGout.

Наиболее эффективный из всех алгоритм — это zopfli. Использование zopflipng для сжатия PNG-файлов (не путать с «сжатием на лету», которое применяется для текстовых файлов) уменьшает актуальный размер цветовой информации уже после того как применена самая эффективная палитра и самые эффективные фильтры (и отключить архивирование в других утилитах оптимизации). Это уменьшит размер PNG еще на 3-7% относительно сжатия другими формата без существенного увеличения времени оптимизации.

WebP: легковесная альтернатива

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

По тестам Айри.рф примерно в половине случаев PNG изображений может быть уменьшено, в среднем, на треть за счет перевода в WebP формат.

Постеризация, палитра и оттенки серого

Постеризация (не путать с пастеризацией) позволяет уменьшить количество цветов в PNG файле за счет какого-либо адаптивного алгоритма (например, mediancut или k-means). Обычно уменьшение количества цветов в 2-3 раза незаметно для глаза, но приводит уменьшению размера изображения на 20-50%.

Наиболее известные инструменты пастеризации — Photoshop, pngquant, pngnq и TruePNG.

Выбор правильной палитры (например, использование только оттенков серого или только 256 цветов) — если это еще не сделано — также позволяет существенно сократить размер изображения (каждый пиксель кодируется 1 байтом вместо 3).

Маска прозрачности

Малоизвестная техника, хорошая описанная Сергеем Чикуёнком. Суть ее заключается в удалении цветовой информации (зануление) у полностью прозрачных пикселей. Это сокращает актуальное количество байтов в IDAT-чанке и позволяет применить более оптимальные фильтры.

К счастью, некоторые утилиты по оптимизации PNG, в частности, TruePNG позволяют выполнить это автоматически.

Размытие (dithering)

Более интересная техника от Сергея, применимая не только к PNG изображениям. Суть заключается в выделение областей изображения, которые можно размыть (применить dithering) с сохранением визуального качества (а точнее, выделении областей изображения, для которых нельзя применять размытие).

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

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

Чрезстрочность (interlacing)

Техника чрезстрочности (interlacing) подобна последовательному (progressive) JPEG: при каждом проходе PNG-изображение получает больше информации, и детали изображения начинают «проявляться».

Графические редакторы, как и консольные утилиты (например, convert), позволяют использовать чрезстрочность (по линиям или цветам) для PNG изображений. В ряде случае выигрыш от такого метода может составить 5-10%.

Эвристика фильтрации

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

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

В заключении рекомендую следующий справочник по утилитам оптимизации PNG, которые могут дополнить ваш арсенал инструментов оптимизатора: PNG Tools Overview.

По материалам searchengines.ru

2 эффективных метода сжатия изображений PNG без потери качества

Если вам нужно загрузить портретное изображение в PNG в качестве профиля, вам следует заранее сжать PNG-файлы размером до 300 КБ. Файл PNG — это файл переносимой сетевой графики, который поддерживает сжатие без потерь, при котором все пиксели отображаются точно так, как задумано. Как сжать PNG без потери качества? Photoshop — это первоначальный выбор для уменьшения размера файлов PNG. Но вы должны подписаться на услугу. Конечно, вы также можете использовать простой и эффективный онлайн-компрессор PNG, чтобы бесплатно получить нужные фотографии.

Сжать PNG

• Часть 1: Как сжать PNG с помощью Photoshop
• Часть 2: лучший способ сжатия PNG в Интернете
• Часть 3: Сравнение двух PNG-компрессоров
• Часть 4. Часто задаваемые вопросы о сжатии файлов PNG

Часть 1: Как сжать PNG с помощью Photoshop

Photoshop — один из наиболее часто используемых методов сжатия файлов PNG до 300, 100, 20 КБ или меньше. Если вам просто нужно уменьшить размер нескольких фотографий PNG, вы можете настроить различные параметры, чтобы уменьшить размер фотографий и сохранить наилучшее качество файлов.

Шаг 1: Откройте Photoshop на своем компьютере и импортируйте исходные файлы PNG, которые вы хотите сжать, в программу. Когда вы открываете файл PNG, вы можете выбрать Фото товара меню и выберите Размер изображения возможность проверить размер файла PNG.

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

Шаг 2: Нажмите Файл в строке меню и найдите Экспортировать кнопка. Выбрать Сохранить для Интернета и устройств возможность сжатия файлов PNG. Затем отрегулируйте Предустановка, оптимизация, преобразование в RGB, размер изображения, процент or Качество сохранить изображение на достойном качестве.

Шаг 3: После этого вы можете нажать Фото товара кнопку, а затем выберите режим кнопка. Выбрать Индексированный цвет кнопка. Выберите 128 или менее в Цвета, это уменьшит PNG до меньшего размера. Выберите меньшее количество цветов для сжатия файлов PNG.

Шаг 4: Предварительный просмотр сжатого PNG с файлами разных размеров и качества в 4-Up таб. Щелкните значок Выбрать скорость загрузки, чтобы загрузить сжатые файлы PNG, и выберите Сохраните кнопку для сжатия файлов PNG для Интернета с помощью Photoshop.

Вы также можете быть заинтересованы: Онлайн-редактор фотографий, например Photoshop.

Часть 2: лучший способ сжатия PNG в Интернете

Есть ли способ сжать PNG онлайн? Если вы хотите уменьшить размер файла PNG с 1 МБ до 100/50 КБ или меньше с наилучшим качеством, AnyMP4 Image Compressor онлайн — эффективный метод пакетного уменьшения размера JPEG, PNG, SVG и GIF. Он позволяет одновременно сжимать до 40 изображений с максимальным размером 5 МБ. Кроме того, это бесплатный онлайн-компрессор изображений без регистрации.

• 1. Сжатие JPEG, PNG, SVG, GIF и другие форматы фотографий.
• 2. Уменьшите до 40 файлов изображений PNG в пределах 5 МБ в пакетном процессе.
• 3. Расширенный алгоритм сжатия для сжатия PNG с МБ до КБ.
• 4. Один щелчок для загрузки и автоматического сжатия больших изображений.

Шаг 1: Идти к Компрессор изображений онлайн с любым веб-браузером на вашем компьютере. Нажмите на Добавить изображение кнопку для загрузки файлов PNG. Убедитесь, что вы можете обрабатывать до 40 изображений одновременно в пределах 5 МБ.

Шаг 2: После того, как вы уже загрузили файл, он автоматически сжимает файлы PNG. Вы можете проверить исходный размер, размер сжатия и степень сжатия на индикаторе выполнения.

Шаг 3: Нажмите Скачать справа, чтобы загрузить один файл PNG, или нажмите кнопку Скачать все кнопку, чтобы сохранить все изображения на свой компьютер. Он оптимизирует файлы PNG, размер которых может быть меньше 100, 50 или 20 КБ.

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

Часть 3: Сравнение двух PNG-компрессоров

1. Метод сжатия. В Photoshop есть усовершенствованный алгоритм сжатия, позволяющий уменьшить размер PNG до 256 или 100 КБ. Он просто сжимает файлы PNG в соответствии с вашими требованиями, что может испортить качество сжатого файла PNG. Но онлайн-метод выберет лучшее качество и уменьшит размер PNG с помощью передовой технологии AI.

2. Качество изображения. В Photoshop есть вкладка «4 элемента» для предварительного просмотра качества изображения. Вы можете выбрать желаемый в соответствии с вашими требованиями. Но определить оптимальный выбор сложно. Онлайн-компрессор PNG, напротив, имеет лучшее качество изображения, но не может напрямую сжимать файлы PNG до 256 или 100 КБ.

3. Процесс. Если вам нужно сжать файл PNG, вы можете использовать Photoshop для получения желаемого размера по одному. Даже если вы используете пакетный процесс, вы не можете гарантировать качество. AnyMP4 Image Compressor Online имеет пакетный процесс, который позволяет получить наилучшее качество за один клик.

Часть 4. Часто задаваемые вопросы о сжатии файлов PNG

Следует ли конвертировать и сжимать PNG в JPEG?

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

Как сжать файлы PNG на iPhone или Android?

Вы можете просто загрузить некоторые приложения для сжатия PNG-файлов, чтобы уменьшить размер PNG-файлов, например, «Уменьшить размер фото», «Сжатие фотографий 2.0» и «Easy Resizer» для телефонов Android или «Сжатие-сжатие фотографий» и «Пико-сжатие фотографий» для устройств iOS.

Можно ли сжимать файлы PNG в Photoshop в пакетном режиме?

да. Вы можете открыть Adobe Photoshop и выбрать Файл и выберите Внесите заметки к слайдам вариант. В раскрывающемся списке вы можете выбрать опцию Image Processor и выбрать папку с фотографиями для сжатия файлов PNG в пакетном процессе.

Заключение

В статье рассказывается о 2 эффективных методах сжатия файлов PNG до желаемого размера. Если вам нужно уменьшить PNG до 256 КБ, 100 КБ или до определенной степени, Photoshop должен быть правильным выбором. Но если вам нужно получить оптимальное качество в пакетном режиме, AnyMP4 Image Compressor Online — лучший вариант, который вы никогда не должны пропустить.

Файлы PNG теряют качество при редактировании?

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

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

Для большей ясности о том, как качество влияет на редактирование файла PNG, продолжайте читать для получения полезной информации.

PNG-файлы и чем они отличаются от файлов других типов

A Portable Network Graphics или PNG — это тип графического файла, который обычно предпочитают графические дизайнеры, занимающиеся веб-дизайном или использующие Adobe Photoshop или Illustrator для своих творческих дизайнерских проектов.

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

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

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

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

Два способа сохранить PNG — какой из них лучше всего подходит для вашего дизайна?

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

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

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

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

Что делать, если вы не можете сохранить изображение в формате PNG

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

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

Вот распространенные причины, перечисленные ниже:

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

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

Как отредактировать и сохранить PNG для достижения наилучших результатов

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

Adobe Photoshop — теряется ли качество при сохранении плоского RGB PSD в формате PNG?

спросил
3 года, 6 месяцев назад

Изменено
3 года, 6 месяцев назад

Просмотрено
644 раза

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

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

Соображения и подробности, о которых стоит упомянуть:

• Предположим, сохранение с той же битовой глубиной, 8-битный PSD в 8-битный PNG или 16-битный PSD в 16-битный PNG. (32-разрядный PSD в PNG не работает через меню «Сохранить как», а использование «Экспорт» создает 8-разрядный PNG)
• Я знаю, что направляющие теряются после закрытия и повторного открытия PNG.
• Мне также известно, что цветовое пространство CMYK не поддерживается в PNG, поэтому этот вопрос относится только к файлам RGB PSD.
• Я понимаю, что пути не будут сохранены в файле PNG.
• Я понимаю, что дополнительные каналы (из сохраненных вариантов и т. д.) не будут сохранены в файле PNG.
• Предположим, что при сохранении выбран параметр «Большой размер файла» в параметрах формата PNG. (Другие настройки вызывали проблемы при попытке повторного редактирования позже)

Спасибо.

• Adobe-Photoshop
• png
• формат файла
• цветовой профиль
• цветовое пространство

8

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

Обычно людей интересуют два типа: PNG8 (8 бит на пиксель, 256 цветов) и PNG24 (24 бит на пиксель, Truecolor). Обратите внимание, что если у вас есть документ в Photoshop с цифрой 8bit , это 8 бит на канал, а не всего (так что на самом деле это 24-битное изображение), вы можете прочитать больше о глубине цвета и о том, как рассчитывается количество цветов здесь.

Изображения PNG также могут включать прозрачность:

• для PNG8 Photoshop может иметь только 1-битную прозрачность (поэтому пиксель
  прозрачный или не прозрачный) но есть и другие утилиты
  который может сохранить PNG8 с 8-битной альфа-прозрачностью
• для PNG24 Photoshop может сохранять полноцветное изображение и полную альфа-прозрачность (технически сейчас это PNG32: 24b для цвета и 8b для прозрачности, но Photoshop называет его просто PNG24 с прозрачностью )

Итак, чтобы ответить на ваш вопрос,

• , если вы сохраните 8-битные документы с помощью PNG24, вы не потеряете никаких данных — независимо от того, имеет ли ваш документ прозрачность или нет;
• , если вы сохраняете 8-битный документ в формате PNG8, вы потеряете цвета (16 миль цветов станет 256)
• , если вы сохраняете индексированный цветной документ (максимум 256 цветов — например, повторное сохранение существующего файла .
  

  This entry was posted in Популярное