Png потеря качества: Оптимизация PNG и JPEG без потери качества. Часть 1 / Хабр |

Posted:

Фев 7, 2023

Comments:

Png потеря качества: Оптимизация PNG и JPEG без потери качества. Часть 1 / Хабр

Содержание

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

Сжатие 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 в фотографии продуктов JPEG VS PNG?

Подпишитесь на нашу рассылку, чтобы получать последние новости!

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

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

Всегда много шума о том, что выбрать PNG или JPG. Я также часто сталкивался с такими вопросами, как «Для чего используется файл PNG?» и «Что означают файлы PNG?»

Давайте сегодня подробно рассмотрим эти вопросы и уладим спор между PNG и JPG.

JPEG

Формат файла, широко известный как JPG, был разработан Объединенной группой экспорта фотографий в 1992 году, отсюда и название файла. Большую часть времени вы обычно видите, что JPG выражается как JPEG, но функционально они означают одно и то же. На заре компьютеров типы файлов были ограничены и имели ограничение только в три символа (отсюда JPG), но в наши дни мы видим, что JPEG становится все более распространенным.

Этот формат файла изображения, произносится как «jay-peg», был разработан, чтобы минимизировать размер файлов фотографий и сделать их более подходящими для обмена по электронной почте и использования в веб-дизайне. Вот почему большинство фотографий, которые вы найдете в Интернете, скорее всего, в формате JPG.

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

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

PNG

Акроним от Portable Network Graphics. PNG — это формат файлов без потерь, разработанный как более открытая альтернатива формату обмена графикой (GIF).

Существует заметная разница между PNG и JPG, когда речь идет об уменьшении размера файла. В отличие от JPEG, который использует сжатие DCT.

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

Говоря о преимуществах и недостатках PNG, важно отметить, что PNG поддерживает полупрозрачность и полный цветовой спектр, а JPEG — нет.

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

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

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

Свяжитесь с нами, чтобы узнать больше

Другие распространенные форматы файлов

SVG

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

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

GIF

До сих пор идут споры о том, произносится ли это «gifs» или «jifs» . Тем не менее, GIF-файлы используют 256 цветов RGB и аналогичны файлам PNG в том смысле, что они не имеют потерь. Кроме того, они также поддерживают анимацию и часто используются для однотонной графики, такой как логотипы.

Из-за ограничений по цвету в GIF-файлах сохранять фотографии сложнее. Тем не менее, их невероятно легко сделать, и их можно разделить на три основные категории: гифки на основе анимации, гифки на основе видео и наклейки. Большинство GIF имеют ширину менее 500 пикселей и в основном используются в социальных сетях.

JPG против PNG – ЭТО ДЕЙСТВИТЕЛЬНО ВАЖНО?

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

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

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

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

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

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

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

Логично, что чем больше изображение, тем дольше будет загружаться ваш сайт.

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

Для получения дополнительной информации о том, как получить прозрачный фон в Photoshop, перейдите по ссылке

Как получить прозрачный фон в Photoshop

Бесплатные онлайн-инструменты для оптимизации изображений

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

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

, которые могут вам помочь.

Для преобразования файла из JPG в PNG и наоборот: https://image.online-convert.com/convert/jpg-to-png
Для сжатия изображений: https://compressjpeg.com/
Для изменения размера изображений: http://www. resize-photos.com/
Для оптимизации файлов JPEG: http://jpeg-optimizer.com/

Нажмите здесь для получения дополнительной информации о продуктах и пакетных фотографиях от DW Images Photography. , остальные Мидлендс и Лондон. В нашей фотостудии в Милтон-Кинсе мы специализируемся на фотосъемке товаров для интернет-магазинов. Это включает в себя Packshots, 360 Degree, Lifestyle, Ghost Mannequin и Flat Lay Photography. Мы также предлагаем корпоративную фотосъемку для веб-сайта вашей компании, страницы команды и социальных сетей вашего бизнеса.

Фотографии продуктов и упаковки

Вы продаете через Интернет? У нас есть индивидуальная студийная установка для всех ваших потребностей в фотосъемке продуктов.

Подробнее

360 Spin Product/Packshot Photography

Вы продаете товары через Интернет? Ищете высококачественные пакетные снимки или фотографии продуктов для своего веб-сайта? Повысьте качество обслуживания клиентов с помощью 360 фотографий продуктов

Узнать больше

Деловая фотосъемка в голову

Хотите обновить фото для встречи с командой и социальных сетей?

Узнайте больше

Коммерческая, событийная и PR-фотография

Предстоит предстоящее PR-мероприятие или вам нужны рекламные изображения на заказ для вашего веб-сайта или маркетинговой литературы?