Оптимизация изображений для формата PNG-24
Формат PNG-24 поддерживает 24-битные цвета. Как и формат JPEG, PNG-24 сохраняет незначительные вариации яркости и цветового тона. Как и форматы GIF и PNG-8, PNG-24 сохраняет резкие ясные контрасты, имеющиеся в шрифтовых фрагментах, логотипах и прочих изображениях без полутонов.
PNG-24 формат использует аналогичный алгоритм сжатия, что и формат PNG-8. В силу этого файлы PNG-24, как правило, больше по размерам, чем JPEG-файлы того же изображения. Лучше воздержитесь от использования формата PNG-24 формат при сохранении изображения, предназначенного для широкой аудитории.
PNG-24 поддерживает прозрачность фона и заполнение фоновых областей цветом подложки, а также многоуровневую прозрачность. Пиксел может иметь до 256 уровней непрозрачности, начиная с полной прозрачности и заканчивая полной непрозрачностью, что позволяет обеспечить гладкий переход цветов изображения к цвету фона. Однако следует помнить о том, что не все веб-браузеры поддерживают многоуровневую прозрачность.
Оптимизация изображения в формате PNG-24
Формат PNG-24 вполне подходит для сжатия фотографий. Однако файлы в формате PNG-24 зачастую превосходят JPEG-файлы того же изображения по размеру. PNG-24 рекомендуется использовать для работы только с теми изображениями, которые содержат несколько уровней частичной прозрачности.
О формате PNG. Краткий тест-драйв
Растровый графический формат PNG, набирающий всё большую популярность в эпоху веб 2.0, появился в далеком 1995 году как замена старому доброму GIF (и, частично, TIFF). К тому времени хозяева запатентованного GIF’а решили сбивать четырёхзначные суммы со всех разработчиков, использующих формат, и свободному сообществу ничего не осталось кроме как предложить бесплатную альтернативу.
- Полноценная поддержка alpha-transparency – прозрачности. Позволяет сделать участки изображения прозрачными и полупрозрачными.
- Качественный алгоритм сжатия без потери качества. Похожий на LZW, но немного эффективнее.
- Возможность черезстрочной развёртки, причем (в отличии от GIF) как по вертикали, так и по горизонтали одновременно.
- Встроенная гамма-коррекция. Позволяет прикрепить к изображению настройки его отображения, для того чтобы на разных мониторах изображение отображалось точно так же, как и у автора.
PNG vs GIF
Так как PNG-24 использует полную палитру цветов, сравнивать его с GIF довольно сложно. PNG-8 с его индексной палитрой здесь более схож. Приведу скриншоты для сравнения: 
Практика (как и мнение коллег) показывает, что простые небольшие изображения GIF сжимает лучше. Но, когда речь заходит о больших изображениях, GIF всё же остаётся позади.
Кроме того, ещё одно немаленькое преимущество: на самом деле, вопреки распространённому мнению, PNG-8 тоже может использовать полноценный альфа-канал, как и PNG-24. Просто Photoshop его не поддерживает, поэтому Сергей Чикуенок из студии Лебедева рекомендует использовать Adobe Fireworks, чем я и решил заняться (Об этом немного позже).
PNG vs JPEG
А в этой битве, если прозрачность нам не нужна, PNG проигрывает, так сказать, на «среднем сегменте рынка». Хотя, если прилинковать к JPEG’у ICC-профайл, разница в объёме становится незаметной. Мои замеры приводились на – JPEG 100%. А при меньшем качестве (с не особо заметной для глаза разницей) сравнение, к сожалению, становится ещё более печальным.
В общем, смотрите сами: 
UPD А вообще, результаты значительно зависят от самого изображения: PNG лучше сжимает градиенты и однотонные участки, но для фотографий лучшее сжатие даёт JPEG. Хотя, говорят (самому с трудом верится), на больших фотографиях PNG и тут лидирует – проверено только что в процессе конвертирования скриншотов к статье (PNG против JPEG-70% – выигрыш раза в полтора).
Жизнь после Photoshop’а или сжимаем дальше
Во многих ситуациях PNG остаётся вообще незаменимым, так как прозрачность нормально не поддерживается ни одним из альтернативных веб-форматов, а какой простор он открывает дизайнерам и верстальщикам… UPD Кроме того, с учётом специфики формата, для элементов дизайна в вебе – это, наверное, лучшее решение.
Гуглим и качаем – PNGOut. Программка около 1.5 Мб с минимальным количеством настроек позволяет прогонять (в том числе пакетно) PNG-файлы со сжатием.
На пакете иконок (90 файлов с прозрачным фоном без особых наворотов) выигрыш в объёме составил в среднем около 10-15%. Не особо, конечно, впечатляет. Но для рассмотренных выше файлов-примеров процент сжатия колебался от 10% (большой постер без прозрачности) до 72% (полупрозрачные прямоугольники). Так что, попробовать стоит, тем более работа с утилитой много времени не занимает.
- OptiPNG – не имеет графической оболочки и работает из командной строки. По непроверенным данным процент сжатия меньше. UPD но её пользователи утверждают обратное.
- Pngcrush – сам не пробовал, говорят «пытается оптимизировать файл всеми доступными способами», но главное ведь не «как пытается», а «как оптимизирует».
- и ещё ряд утилиток просто вычищающих служебный мусор из файлов.
Adobe Fireworks
Честно говоря, Adobe Fireworks стал для меня настоящим открытием: PNG-8, PNG-24 и PNG-32 + куча настроек!
3 версии формата в AF:
PNG-24 и PNG-32 я подробно не рассматривал. Насколько я понял, в их терминологии 32 – с альфа-каналом, а 24 – без. По предварительным прикидкам Photoshop справляется с этй задачей лучше.
А вот PNG-8 разбил все мои (и большинства коллег) стереотипы. Итоговый файл гораздо меньше GIF’а и существует полноценная поддержка прозрачности двумя способами: alpha и index transparency. Единственным минусом по сравнению с PNG-24 остаётся индексная палитра, хотя всё зависит от потребностей. Моё личное мнение – PNG-8 в большинстве случаев уделывает и GIF, и PNG-24.
PNG против GIF в AF, хотя как раз с привычными GIF-JPEG Fireworks работает по умолчанию не очень (с настройками я не игрался). Но даже в сравнении с Photoshop’овским результатом разница в пользу PNG:
И вот всё разнообразие PNG-8 — ради этого стоит устанавливать Adobe Fireworks:
Для сравнения: тот же файл стараниями Photoshop весил 3 188 байт против полученных теперь 450, то есть раз в 6 больше.
Вердикт
По-моему, GIF своё уже отжил. Теперь его существование – в первую очередь вопрос инертности общества. UPD Впрочем, сегмент разных анимационных приятностей Всё рано пока остаётся за GIF :).
Для прозрачных элементов дизайна стоит использовать PNG-8 (реже PNG-24, когда палитры PNG-8 недостаточно для сохранения изображения без потерь).
Для фотографий и сложных графических элементов лидером по-прежнему остаётся JPEG из-за мощных возможностей оптимизации изображения. Хотя в некоторых случаях может оказаться достаточно и PNG-8 – как и раньше, с GIF’ом, смелые эксперименты – залог успеха. UPD Но для действительно больших изображений всё же JPEG проигрывает.
Всем веб-дизайнерам и верстальщикам рекомендую устанавливать Adobe Fireworks и взглянуть на PNG в новом ракурсе.
UPD Я действительно не специалист и обзор писался на коленке, о чём говорит эпитет «краткий»; возможно, не на лучших примерах. Поэтому спасибо всем, кто принял активное участие в обсуждении, особенно kmike и @merlin_rterm. В процессе узнал для себя много нового, в частности, специфику сжатия PNG и что JPEG-100 все равно с потерей качества. Большая часть этих интересностей добавлены прямо в тексте статьи, для того, чтобы не отрывать их от контента.
Обновил иллюстрации. К сожалению, сервис, на котором размещены картинки, не хранит PNG, всё равно конвертируя его в JPEG. Но теперь, по крайней мере, качество лучше. Ещё раз повторюсь – моей целью не было сравнивание артефактов, а только килобайты и ещё раз килобайты итоговых файлов.
PNG 8 VS PNG 24: What Is the Distinction and Which Would You Use?
When saving your images, you have two options. PNG 8 vs PNG 24? Why are there two different types? Which of the two formats is better? In this post from MiniTool MovieMaker, we will compare the distinction between these two file formats so that you can decide which one is best for your needs.
What Is PNG?
Let’s first clarify what PNG is to understand PNG 8 vs PNG 24. The PNG (Portable Network Graphics) file format was initially released in 1996 as a replacement for the GIF image format. The PNG file format is a raster graphics file type that uses lossless compression, which means no data is lost during the compression or decompression of the image.
It is a better alternative for images that need to be displayed on the Internet than other image formats due to its smaller file size. Because the image can be easily placed on a pattern, color block, or image background, PNG files are commonly used in logo designs.
What Is PNG 8?
PNG images are available in two different sizes: PNG 8 and PNG 24. When you need to display a smaller image format on the web, where the storage room is limited and loading time is extended, try using PNG-8. PNG-8 supports 8-bit color, so even though it only contains 256 colors, it will operate properly in the majority of projects.
What Is PNG 24?
Unlike PNG 8, there are as many as 16 million colors in PNG 24 because it supports 24-bit color. This graphics file is a great option for saving images with a lot of details because, like JPEG, PNG 24 keeps the minor changes in brightness and color that are only seen in the image.
However, these high-quality pictures are more expensive since they take up more hard drive space on your computer.
Top 3 Free Ways to Convert JPG to JPEG Quickly and Easily
What’s the best free JPG to JPEG converter? How to convert JPG to JPEG quickly and easily? This post will show you 3 free solutions to help you out.
PNG 8 VS PNG 24: What Is the Distinction?
What distinguishes PNG 8 from PNG 24? The distinction between the two PNG formats is in how many colors an image can show. PNG 8 images can only show 256 colors, whereas PNG 24 images can show up to 16 million.
The numbers associated with the PNG term typically represent the maximum bit depth that computers can support. It is critical to know that higher-bit support does not suggest that the file format is of higher quality than lower-bit support. Lower-bit files may be required in some situations.
According to the PNG 8 format, which is made for showing images on the Internet, it normally does not lose too much data and can produce smaller sizes. Also, the PNG 8 format is a good option for images that have a lot of text or sharp edges, since these images can be compressed successfully.
Lossless compression requires more storage than lossy compression. The PNG 24 image has a bigger file size than a PNG 8 image. It’s crucial to make your choices and consider which kind of compression will be appropriate for your needs because the advantage of PNG 24 is that you won’t worry about any degradation in the image quality.
Tips:
MiniTool MovieMaker is a photo video maker tool for Windows users that can help you create high-quality videos from multiple pictures.
PNG 8 VS PNG 24: Which Would You Use?
PNG 8 or PNG 24? Which one is better? The answer is based on how you intend to use your image and how much data loss you are prepared to accept.
If you’re creating an image with small text, a 256-color palette may be sufficient because the PNG 8 image will contain few colors. Nevertheless, if you’re making an image with a lot of colors, the extra color depth provided by PNG 24 is what you need. Additionally, if your image requires high quality, such as true color, rather than GIFs or JPEGs (which aren’t usually lossless), then we advise using PNG-24 images.
How to Convert PNG to GIF in Seconds – Solved
Is there any free way to convert PNG to GIF? Sure! Here are both offline and online PNG to GIF tools that can be used to converts any image format to GIF.
For most images, PNG 24 is a better format to choose than PNG 8. But there are some situations in which PNG 8 is more useful than PNG 24, such as for images that need to be displayed on the Internet where file size is an issue.
If your goal is to reduce complex color images to a relatively simple color palette, you can use PNG 8. When working with fewer-bit images (2-bit or 4-bit), you can put them in the PNG 8 category. It is especially effective on images with small color differences of a maximum of 256 colors, such as insignia and icons.
Conclusion
Generally speaking, PNG 24 is a better format to choose than PNG 8, while PNG 8 can be helpful in some situations.
PNG 8 vs PNG 24? You probably know the difference between PNG 8 and PNG 24 by now, and you can think about which format best suits your needs.
About The Author
Jocelin is keeping a strong passion for the multimedia industry with her first thoughts and visions. While continuously absorbing relevant knowledge, she believes that pictures, videos, and music can bring so much pleasure to life. To go deeper into the industry, she has acquired many skills in video editing. Also, she can provide readers with ways to slove problems on image, video, and auido topics.
В чем разница между PNG и PNG8?
Есть ли разница между PNG и PNG8 в качестве изображения? Почему я хочу использовать PNG8 вместо PNG и наоборот? Допустим, я рисую изображение в Photoshop. Означает ли PNG, что я получу те же пиксели, которые я нарисовал в Photoshop 1 к 1?
Менш
Ну ты в инете искал? Какой результат вам не понятен?
Кай
Гленн Рандерс-Персон
Спецификация PNG определяет только «png», который может иметь различную глубину цвета и типы цвета (RGB, RBGA, серый, серый-альфа, индексированный). Номенклатура «PNG8» — это просто удобный способ обозначения индексированного изображения (8-битных пикселей). ImageMagick, например, использует PNG8, PNG24, PNG32, PNG48 и PNG64 для идентификации 8-битного индексированного изображения с двоичной прозрачностью, 24-битного RGB, 32-битного RGBA и т. д. Я не уверен, что определение PhotoShop ограничивает PNG- 8 до бинарной прозрачности или нет. PNG8 ограничен 256 элементами палитры, а PNG24 может иметь 16 миллионов различных цветов.
Скорее всего, это дублирующийся вопрос, но проще просто ответить, чем искать дубликаты. Я сделаю это сейчас.
Хорошо, на этом сайте 29 вопросов о PNG8 и 542 000 вопросов по всему StackExchange, вероятно, в основном это дубликат этого вопроса.
Дэвид ОХаллоран
Возможно, вы имели в виду PNG-8 и PNG-24?
Существует два формата PNG: PNG-8 и PNG-24. Цифры — это сокращение от «8-битный PNG» или «24-битный PNG». Не будем слишком углубляться в технические подробности — потому что вам как веб-дизайнеру, вероятно, все равно — 8-битные PNG означают, что изображение имеет 8 бит на пиксель, а 24-битные PNG означают 24 бита на пиксель.
Подводя итог различиям простым языком: скажем, PNG-24 может обрабатывать гораздо больше цветов и хорош для сложных изображений с большим количеством цветов, таких как фотографии (точно так же, как JPEG), в то время как PNG-8 более оптимизирован для вещей с большим количеством цветов. простые цвета, такие как логотипы и элементы пользовательского интерфейса, такие как значки и кнопки.
Когда вам нужно сохранить прозрачность и большое количество цветов, а также добиться полной или частичной прозрачности, лучше всего подходит формат изображения PNG.
Поскольку это формат без потерь, изображения, сохраненные в формате PNG, не всегда будут маленькими, но поскольку PNG хранит много дополнительных данных, вы можете легко оптимизировать изображения для использования в Интернете, чтобы уменьшить размер файлов.