КАК УСТРОЕН PNG-ФАЙЛ?
Подробный разбор внутренностей PNG + сборка PNG-файла вручную с нуля.
А ещё PNG картинка поддерживает полностью прозрачный фон, в котором белый цвет фона заменяется полностью прозрачным чёрным цветом с полным закрашиванием альфа канала. Благодаря этой фичи можно создавать PNG стикеры и делать 2D и 3D анимации на видео MPEG4/h.264 с использованием картинок PNG формата.
Для меня этот формат очень удобен, хорошо оптимизирован для слабых устройств и там хорошо работает сжатие без потерь на неустойчивых носителях информации. Я PNG картинки использую не для загрузки информации в интернете, а для быстрой прогрузки картинок локального хранилища, что позволяет загружать больше информации на локальном хранилище и лучше оптимизировать своё устройство.Дата: 2023-10-03 Alek OS
Похожие видео
Комментарии и отзывы: 33
1. ТО •
Вы спутали прогрессивную развёртку с чересстрочной. Чересстрочная развёртка используется в видео (когда в чётных кадрах содержатся только чётные строки, а в нечётных кадрах только нечётные строки, либо наоборот), такой стандарт используется в цифровом телевидении (для совместимости с технологиями передачи данных, заточенных под аналоговый телесигнал - такими как коаксиальный кабель или эфир МВ/ДМВ), в стандарте DVD-Video и старых видеокамерах/ фотоаппаратах (для подключения к телевизору по аналоговым интерфейсам). Прогрессивная развёртка в видео, наоборот, означает кодирование кадра целиком, не разбивая на строки. Для статичных сжатых изображений (PNG, JPG) развёртка может быть либо строчной (не путать с чересстрочной) когда картинка кодируется строками как обычно, либо прогрессивной когда картинка кодируется слоями от низкого качества к высокому.
Вы спутали прогрессивную развёртку с чересстрочной. Чересстрочная развёртка используется в видео (когда в чётных кадрах содержатся только чётные строки, а в нечётных кадрах только нечётные строки, либо наоборот), такой стандарт используется в цифровом телевидении (для совместимости с технологиями передачи данных, заточенных под аналоговый телесигнал - такими как коаксиальный кабель или эфир МВ/ДМВ), в стандарте DVD-Video и старых видеокамерах/ фотоаппаратах (для подключения к телевизору по аналоговым интерфейсам). Прогрессивная развёртка в видео, наоборот, означает кодирование кадра целиком, не разбивая на строки. Для статичных сжатых изображений (PNG, JPG) развёртка может быть либо строчной (не путать с чересстрочной) когда картинка кодируется строками как обычно, либо прогрессивной когда картинка кодируется слоями от низкого качества к высокому.
2. Владимир •
У вас в видео есть неточность: алгоритм LZW, применяемый в графическом формате GIF, позволяет сжимать не только повторяющиеся пиксели одинакового цвета, но и повторяющиеся группы из нескольких пикселей.
Кроме этого, алгоритм LZW - это комбинация алгоритма LZ и алгоритма Хаффмана. Алгоритм Хаффмана позволяет достигать сжатия путём использования меньшего количества бит для кодирования наиболее часто встречающихся цветов. В LZW алгоритм Хаффмана позволяет тратить меньше бит не только на часто встречающиеся цвета, но и наиболее часто повторяющиеся группы из нескольких пикселей.
То, что вы описали - сжатие повторяющихся пикселей - поддерживают гораздо более простые алгоритмы, которые называются RLE - Run Length Encoding. Есть много их разновидностей, но суть у них одна и та же.
У вас в видео есть неточность: алгоритм LZW, применяемый в графическом формате GIF, позволяет сжимать не только повторяющиеся пиксели одинакового цвета, но и повторяющиеся группы из нескольких пикселей.
Кроме этого, алгоритм LZW - это комбинация алгоритма LZ и алгоритма Хаффмана. Алгоритм Хаффмана позволяет достигать сжатия путём использования меньшего количества бит для кодирования наиболее часто встречающихся цветов. В LZW алгоритм Хаффмана позволяет тратить меньше бит не только на часто встречающиеся цвета, но и наиболее часто повторяющиеся группы из нескольких пикселей.
То, что вы описали - сжатие повторяющихся пикселей - поддерживают гораздо более простые алгоритмы, которые называются RLE - Run Length Encoding. Есть много их разновидностей, но суть у них одна и та же.
3. Omion •
А как ты посчитал 9331200 байт?
Площадь на количество каналов, тип канал по байту? Или как? Или я чет прослушал?
Если канал 8 бит, а он 8 бит, потому что цвета мы пишем 0-255, то три канала это 24бит в памяти, стало быть картинка размерами 2164 х 1440 имеет в площади своей 3116160 пикселей. и количество пикселей мы умножаем на 24бита. стало быть картинка будет 74787840байт, 75 метров в байтах. не?
И это мы не докапываемся по PPI и т.п
А как ты посчитал 9331200 байт?
Площадь на количество каналов, тип канал по байту? Или как? Или я чет прослушал?
Если канал 8 бит, а он 8 бит, потому что цвета мы пишем 0-255, то три канала это 24бит в памяти, стало быть картинка размерами 2164 х 1440 имеет в площади своей 3116160 пикселей. и количество пикселей мы умножаем на 24бита. стало быть картинка будет 74787840байт, 75 метров в байтах. не?
И это мы не докапываемся по PPI и т.п
4. П •
как все замудрено, "чанки" какие-то? , просто раздели на два огромный сложный код,полученное еще раз,затем еще . и еще,число делений (степень) запомни, (как и то-что осталось)
(что-то-же немного но осталось?) теперь возьми это-самое "немного" да умножь столько-же раз на себя ("возведи в степень) и получишь длинный исходный код.(плавающая точка мне в помышку).
как все замудрено, "чанки" какие-то? , просто раздели на два огромный сложный код,полученное еще раз,затем еще . и еще,число делений (степень) запомни, (как и то-что осталось)
(что-то-же немного но осталось?) теперь возьми это-самое "немного" да умножь столько-же раз на себя ("возведи в степень) и получишь длинный исходный код.(плавающая точка мне в помышку).
5. Pacific •
Я не знаю по теме ли это, но всё же.
У одного автора "деликатного" контента 2-ух мерная анимация сохранена в PNG формате, но двигается она только если её открыть в браузере(chrome или Firefox) на ПК, и самое главное отличие от gif в том что качество как у стандартной png
Дело в том что я не могу найти способ как самостоятельно это сделать
Я не знаю по теме ли это, но всё же.
У одного автора "деликатного" контента 2-ух мерная анимация сохранена в PNG формате, но двигается она только если её открыть в браузере(chrome или Firefox) на ПК, и самое главное отличие от gif в том что качество как у стандартной png
Дело в том что я не могу найти способ как самостоятельно это сделать
6. smart •
Большое спасибо за изложенный материал.
Хотя никогда не буду распознавать или упаковывать PNG знать суть всегда полезно.
Очень понравился стиль изложения.
Детально и в меру информативно с отсылками в историю что всегда полезно.
Насчёт фильтров не совсем понятно. Получается PNG всё же теряет данные после применения фильтров.
Большое спасибо за изложенный материал.
Хотя никогда не буду распознавать или упаковывать PNG знать суть всегда полезно.
Очень понравился стиль изложения.
Детально и в меру информативно с отсылками в историю что всегда полезно.
Насчёт фильтров не совсем понятно. Получается PNG всё же теряет данные после применения фильтров.
7. Игорь •
Про миллиарды цветов, дескать это много, Вы напрасно. RGB даже такой глубины очень многие цвета не передаёт.
Предлагаю добить зрителя разбором цветовых моделей ))) RGB это скучно. Даёшь взлом мозга отличием CMY от CMYK, а потом Пантоны, дуатоны, Lab и гексахром. Чтоб web-дизайнерам икнулось ))) А то они со своим примитивным RGB расслабились.
Про миллиарды цветов, дескать это много, Вы напрасно. RGB даже такой глубины очень многие цвета не передаёт.
Предлагаю добить зрителя разбором цветовых моделей ))) RGB это скучно. Даёшь взлом мозга отличием CMY от CMYK, а потом Пантоны, дуатоны, Lab и гексахром. Чтоб web-дизайнерам икнулось ))) А то они со своим примитивным RGB расслабились.
8. Zufar •
когда ии перестал учить ? ведь ему достаточно переводить то что интересно вам за Е. я понял я начел придумывать слова ведь это лучше чем знать группу и их сравнивать . можно пожалуйста на симполсис 3д графической структуре а то мне трудно инсталлировать супремуХ ИБО ОНА ТРЕБУЕТ НОВУЮ ПАПКУ ДЛЯ ГРУППЫ странные слова толкай или кто
когда ии перестал учить ? ведь ему достаточно переводить то что интересно вам за Е. я понял я начел придумывать слова ведь это лучше чем знать группу и их сравнивать . можно пожалуйста на симполсис 3д графической структуре а то мне трудно инсталлировать супремуХ ИБО ОНА ТРЕБУЕТ НОВУЮ ПАПКУ ДЛЯ ГРУППЫ странные слова толкай или кто
9. Pavel •
По Вашим и такого же качества и глубины роликам будет восстанавливаться цивилизация, когда забудет, что рулят не MB, GB и TB, а байты. Если, конечно, после ядерной войны будет электричество и интернет. Тема выживания в диких условиях для других каналов, благо они есть, ваш же с уклоном на айтишку, для диких айтишников и это круто.
По Вашим и такого же качества и глубины роликам будет восстанавливаться цивилизация, когда забудет, что рулят не MB, GB и TB, а байты. Если, конечно, после ядерной войны будет электричество и интернет. Тема выживания в диких условиях для других каналов, благо они есть, ваш же с уклоном на айтишку, для диких айтишников и это круто.
10. Vladimir •
Это такие примитивные сжималки там используются? =)
В FLAC гораздо прикольнее кодирование.
Там берется семпл и аппроксимируется полиномом.
Далее исходный сигнал вычитается из аппроксимации, и остатки записываются в виде специального кода, который кодирует небольшие числа используя минимально возможное число битов.
Это такие примитивные сжималки там используются? =)
В FLAC гораздо прикольнее кодирование.
Там берется семпл и аппроксимируется полиномом.
Далее исходный сигнал вычитается из аппроксимации, и остатки записываются в виде специального кода, который кодирует небольшие числа используя минимально возможное число битов.
11. Герман •
Работаю с компьютерной графикой больше 20 лет. И ни разу не встречал упоминание глубины цвета в 24 или 48 бит. Всегда говорят о глубине цвета на канал, 8 или 16 соответственно. Или же о способе кодирования 24, 32, 48 или 64 бит на пиксел. При этом 3-х канальное изображение с 8 битами на канал может кодироваться 32 битами на пиксель.
Работаю с компьютерной графикой больше 20 лет. И ни разу не встречал упоминание глубины цвета в 24 или 48 бит. Всегда говорят о глубине цвета на канал, 8 или 16 соответственно. Или же о способе кодирования 24, 32, 48 или 64 бит на пиксел. При этом 3-х канальное изображение с 8 битами на канал может кодироваться 32 битами на пиксель.
12. Александр •
А что является прозрачностью пикселя? Ведь пиксель на дисплее сам по себе не может светить прозрачно. В конечном счёте, прозрачность это изменение его яркости в большую сторону. Прозрачный пиксель это пиксель белого цвета. А белый цвет как мы знаем это смесь красного синего и зелёных цветов в равных пропорциях
А что является прозрачностью пикселя? Ведь пиксель на дисплее сам по себе не может светить прозрачно. В конечном счёте, прозрачность это изменение его яркости в большую сторону. Прозрачный пиксель это пиксель белого цвета. А белый цвет как мы знаем это смесь красного синего и зелёных цветов в равных пропорциях
13. Dashos •
Огромный респект, что делаешь такие видео. Я все чаще замечаю, что все сложные штуки, что мы изучаем в универе кажутся сложными только потому, что нам очень херово в своё время объяснили простейшие структуры, и теперь благодаря твоим видосам, я гораздо лучше понимаю в чем вообще смысл того, чем мы занимаемся.
Огромный респект, что делаешь такие видео. Я все чаще замечаю, что все сложные штуки, что мы изучаем в универе кажутся сложными только потому, что нам очень херово в своё время объяснили простейшие структуры, и теперь благодаря твоим видосам, я гораздо лучше понимаю в чем вообще смысл того, чем мы занимаемся.
14. GorMax123456 •
Очень очень круто и подробно писал. Твоя подача самая лучшая. У тебя нет манеры донести рассжованную информацию. Ты делаешь так как ни кто не делает. Просмотрел видосики от и до, пробую задачки на ассемблере решать. Расскажи по возможности про сжатие аудио формата, и в целом про цифровое аудио.
Очень очень круто и подробно писал. Твоя подача самая лучшая. У тебя нет манеры донести рассжованную информацию. Ты делаешь так как ни кто не делает. Просмотрел видосики от и до, пробую задачки на ассемблере решать. Расскажи по возможности про сжатие аудио формата, и в целом про цифровое аудио.
15. rail •
Интересно про 24 бита. Я начал писать что это бред, но в принципе математически вроде правильно. Просто битность указывается поканально, никто не называет трехканальную 8битную картинку 24х битной. Хотя формально 282828 это 256256256, то есть 16 лямов цветов. и в принципе это тоже самое что 224 - тоже 16 лямов.
Интересно про 24 бита. Я начал писать что это бред, но в принципе математически вроде правильно. Просто битность указывается поканально, никто не называет трехканальную 8битную картинку 24х битной. Хотя формально 282828 это 256256256, то есть 16 лямов цветов. и в принципе это тоже самое что 224 - тоже 16 лямов.
16. Sergey •
Спасибо за отличное объяснение Мне по работе приходилось писать парсер изображения в формате DICOM. Медицина. Там есть возможность записать изображение с глубиной 16 бит. Оттенки серого. Также формат поддерживает много методов сжатия, с потерями и без. Было бы классно узнать про mp3 формат.
Спасибо за отличное объяснение Мне по работе приходилось писать парсер изображения в формате DICOM. Медицина. Там есть возможность записать изображение с глубиной 16 бит. Оттенки серого. Также формат поддерживает много методов сжатия, с потерями и без. Было бы классно узнать про mp3 формат.
17. Dark446 •
Вот это контент однако...столько графики и анимаций...всё очень красиво, речь идеальная, это ж надо было так заморочиться Но видео конечно не для простых людей, точнее первые 10 минут абсолютно понятны, а дальше информация для тех, кто "уже давно в теме". В любом случае это очень круто
Вот это контент однако...столько графики и анимаций...всё очень красиво, речь идеальная, это ж надо было так заморочиться Но видео конечно не для простых людей, точнее первые 10 минут абсолютно понятны, а дальше информация для тех, кто "уже давно в теме". В любом случае это очень круто
18. rodigy •
Хотелось бы подробнее узнать про черезстрочную развертку. Эту фишку используется во многих месенджерах при загрузке картинок, я думал это как специально генерят очень размытую малоцветную картинку, но в тоже время думал зачем, если придется еще дополнительно грузить лишние байты.
Хотелось бы подробнее узнать про черезстрочную развертку. Эту фишку используется во многих месенджерах при загрузке картинок, я думал это как специально генерят очень размытую малоцветную картинку, но в тоже время думал зачем, если придется еще дополнительно грузить лишние байты.
19. Богдан •
Скажите, а как компьютер понимает, что нужно делать с этими байтами? Да, там есть сигнатура, но как компьютер должен понять последовательность всех слов? По каким признакам компьютер понимает где данные, а где хедеры? Он ведь их никогда не путает. Может быть, я что то упустил.
Скажите, а как компьютер понимает, что нужно делать с этими байтами? Да, там есть сигнатура, но как компьютер должен понять последовательность всех слов? По каким признакам компьютер понимает где данные, а где хедеры? Он ведь их никогда не путает. Может быть, я что то упустил.
20. Paul •
Отличное видео Вряд ли бы сам когда-нибудь добрался до этой темы, но ютуб порекомендовал, и я посмотрел с интересом. Тема сжатия очень интересна, хотя подозреваю, там в основном математика, и много просмотров не соберет. Хотя у тебя, думаю, получится и это разобрать увлекательно)
Отличное видео Вряд ли бы сам когда-нибудь добрался до этой темы, но ютуб порекомендовал, и я посмотрел с интересом. Тема сжатия очень интересна, хотя подозреваю, там в основном математика, и много просмотров не соберет. Хотя у тебя, думаю, получится и это разобрать увлекательно)
21. Радамир •
Кто знает Подскажите как называется это - умение из любого процессора телефона умной кофеварки или любой фигни в которой есть процессор написать программу и сделать из любой хрени устройство которое будет делать то что ты ему сказал ну по возможностям устройства???????
Кто знает Подскажите как называется это - умение из любого процессора телефона умной кофеварки или любой фигни в которой есть процессор написать программу и сделать из любой хрени устройство которое будет делать то что ты ему сказал ну по возможностям устройства???????
22. Анатолий •
Разве так можно? Зачем такое записывать? Зачем так людей подставлять? Уже несколько часов сижу ковыряюсь с этими форматами сжатия изображений, и оторваться не могу Очень интересно Все же надо этот канал больше не смотреть, а то так и программистом можно стать
Разве так можно? Зачем такое записывать? Зачем так людей подставлять? Уже несколько часов сижу ковыряюсь с этими форматами сжатия изображений, и оторваться не могу Очень интересно Все же надо этот канал больше не смотреть, а то так и программистом можно стать
23. Модульные •
Ещё очень важное отличие формата PNG, в том, что в нём можно указать точные размеры изображения в сантиметрах или дюймах, в специальном чанке pHYs. Такой возможности нет, например, в GIF. Это очень важно для некоторых применений изображений. Например, в CAD системах
Ещё очень важное отличие формата PNG, в том, что в нём можно указать точные размеры изображения в сантиметрах или дюймах, в специальном чанке pHYs. Такой возможности нет, например, в GIF. Это очень важно для некоторых применений изображений. Например, в CAD системах
24. Gledcher •
Едрить колотить, я 15 лет работаю графическим дизайнером и нигде, повторюсь НИГДЕ не видел подобных видео. Респект тебе, колокольчик жмакнул, лайк влепил, подписку оформил, что там ещё нажать, чтобы ты пилил подобный контент и дальше, куда задонатить?))))
Едрить колотить, я 15 лет работаю графическим дизайнером и нигде, повторюсь НИГДЕ не видел подобных видео. Респект тебе, колокольчик жмакнул, лайк влепил, подписку оформил, что там ещё нажать, чтобы ты пилил подобный контент и дальше, куда задонатить?))))
25. Richard •
Шпёхаются два гея в очко, один другого спрашивает:
чувствуешь, как глубоко?
да-а
а в курсах программирования от iSpring уровень изучения наиболее востребованных языков ещё более углублённый, лови два занятия по промокоду бесплатно
Шпёхаются два гея в очко, один другого спрашивает:
чувствуешь, как глубоко?
да-а
а в курсах программирования от iSpring уровень изучения наиболее востребованных языков ещё более углублённый, лови два занятия по промокоду бесплатно
26. В •
Анекдот. И было в мире 726 протоколов. И собрались ведущие айти фирмы и их лучшие спецы и решили создать вместо 726 один протокол. И делали они год, и создали самый лучший универсальный протокол. И в итоге через год стало в мире 727 протоколов.
Анекдот. И было в мире 726 протоколов. И собрались ведущие айти фирмы и их лучшие спецы и решили создать вместо 726 один протокол. И делали они год, и создали самый лучший универсальный протокол. И в итоге через год стало в мире 727 протоколов.
27. Cloud_diver •
Спасибо за очень годный контент, из самого детства было интересно как устроены файлы, особенно изображение. Визуальные эффекты и подача информации на высшем уровне. Видео доступно для широкого круга зрителей, так держать
Спасибо за очень годный контент, из самого детства было интересно как устроены файлы, особенно изображение. Визуальные эффекты и подача информации на высшем уровне. Видео доступно для широкого круга зрителей, так держать
28. Aleksandr •
видно как невероятно много ты вкладываешь в свои видео: время,силы,дизайн,разбор на пальцах - чтобы все было приятно конечному потребителю
я восхищаюсь людьми как ты
большое спасибо за понятный, благоухающий контент
видно как невероятно много ты вкладываешь в свои видео: время,силы,дизайн,разбор на пальцах - чтобы все было приятно конечному потребителю
я восхищаюсь людьми как ты
большое спасибо за понятный, благоухающий контент
29. milmulnir •
Какие же у тебя классные видосы. Соглашусь, на ру сегменте такого еще не встречала. Единственный годный канал в своей подробности про it на ютубе. Спасибо огромное, автор Скинула Ваш акк знакомым чтоб распространили
Какие же у тебя классные видосы. Соглашусь, на ру сегменте такого еще не встречала. Единственный годный канал в своей подробности про it на ютубе. Спасибо огромное, автор Скинула Ваш акк знакомым чтоб распространили
30. Саша •
Про чанки очень интересно. Это все что-то типа заголовков файлов, которые позволяют однозначно идентифицировать содержимое. Я интересовался заголовками формата bmp и mp4. С видео там вообще каша с этими заголовками
Про чанки очень интересно. Это все что-то типа заголовков файлов, которые позволяют однозначно идентифицировать содержимое. Я интересовался заголовками формата bmp и mp4. С видео там вообще каша с этими заголовками
31. ВелоДанс •
Какой я старый. Я помню шум от лицензии GIF Я тогда выходил в интернет через моторолу подсоединенную к компьютеру. Я тогда считал себя очень умным и делал свой сайт. Обновить сайт стоило 300 руб на трафик.
Какой я старый. Я помню шум от лицензии GIF Я тогда выходил в интернет через моторолу подсоединенную к компьютеру. Я тогда считал себя очень умным и делал свой сайт. Обновить сайт стоило 300 руб на трафик.
32. Hwelhen •
Замечательное видео Спасибо, что подаете в простой форме устройство разных сторон ПО компьютера. Хотелось бы увидеть подобное видео о внутреннем устройстве например mp3 или MIDI файлов
Замечательное видео Спасибо, что подаете в простой форме устройство разных сторон ПО компьютера. Хотелось бы увидеть подобное видео о внутреннем устройстве например mp3 или MIDI файлов
33. Карл •
Огромное Спасибо за такие наукоёмкие видео. Это сложная работа и мало востребованная, к сожалению. Желаю успехов на этой стезе, надеюсь выпуски не прекратятся. Очень познавательно...
Огромное Спасибо за такие наукоёмкие видео. Это сложная работа и мало востребованная, к сожалению. Желаю успехов на этой стезе, надеюсь выпуски не прекратятся. Очень познавательно...
Добавить отзыв, комментарий





