КАК УСТРОЕН PNG-ФАЙЛ?
Vložit
- čas přidán 5. 06. 2024
- Хочешь жить по-другому? Учись по-другому! Поступай в Институт iSpring и погружайся в карьеру с первого курса.
Подробнее о программе обучения и правилах набора на сайте: clck.ru/sc5Uy
Фильм о команде и миссии Института iSpring: • Институт iSpring | про...
КАК УСТРОЕН PNG-ФАЙЛ.
Подробный разбор внутренностей PNG + сборка PNG-файла вручную с нуля.
Подписывайся в соц. сетях:
Телеграм - t.me/Alek_OS
ВК - alekos1
❤️ Поддержка канала:
Бусти - boosty.to/alekos
Юмани - yoomoney.ru/to/410011179144828
Патреон - / alekos1
✔️ Полезные ссылки:
Основы программирования - • КАК РАБОТАЕТ ПАМЯТЬ КО...
Полезно знать - • ЯЗЫКИ ПРОГРАММИРОВАНИЯ...
Алгоритмы и структуры данных - • УСКОРЬ СВОЙ КОД В МИЛЛ...
Мысли Алека - • КАК ИЗУЧАТЬ ПРОГРАММИР...
00:00 Введение
00:40 Пиксель
01:11 Растровая графика
02:09 Цветовая модель
03:39 Глубина цвета
04:42 Сжатие информации
06:35 GIF
08:40 PNG
09:50 Институт iSpring
09:50 Особенности PNG
15:00 Сборка PNG. Сигнатура
17:08 Чанки
19:56 IHDR
22:10 LZ77
23:55 Хаффман
25:06 IHDR. Продолжение
25:26 Чересстрочная развертка
26:16 CRC32
27:00 Фильтрация
32:56 Zlib
34:43 Палитра PLTE
35:52 IEND
Архив с материалами из видео для сборки - в телеграм канале: t.me/Alek_OS
Я как раз хотел это узнать. Спасибо!
Сделай видео про компилятора
И интерпретатора заранее спасибо
А есть желание, рассказать как формируется PDF-файл? С рассказом истории легаси и тонной костылей для шрифтов?)
Буду показывать такой ролик всем менеджерам, каждый раз, когда они начнут возникать, почему редактор pdf нельзя написать за пол года))
Привет. Подскажи где берешь музыку для видео?
Раз уж появился обзор PNG, то обзоры WebP, AVIF и JPEG XL будут как нельзя кстати - конкурентов по этой теме крайне мало на Ютубе!
Полностью поддерживаю!! В моих проектах стоит задача удалять eXif данные и понимание как это происходит было бы очень кстати.
SVG, PDF. RAW.
. pptx
+1
@@ulzhantemirgaziyevaa1277 с svg и так все понятно
Вот это контент однако...столько графики и анимаций...всё очень красиво, речь идеальная, это ж надо было так заморочиться! Но видео конечно не для простых людей, точнее первые 10 минут абсолютно понятны, а дальше информация для тех, кто "уже давно в теме". В любом случае это очень круто!
ЕЕЕЕЕЕ. Супер круто. Таких видосов на ру IT сегменте не было. Надеюсь канал не отойдет от темы low-level programming'а
Пускай остаётся лоу левел, я опытный програмер и то новое и интересное встречаю. А как hello world на php или py сделать думаю можно просто погуглить. Контент качественный, м.б. уникальный. Подача приятная, не для тупых, но логичная и последовательная. Супер качественная визуализация. Я боюсь себе представить сколько времени и сил стоит подготовить подобный материал, сделать анимацию, все совместить. Автору низкий поклон!
@@vip8877 ну как бы этот видос очень даже далек от уровня Hello World, я не думаю что большинство разрабов даже это знают, что уж об обычных юзерах говорить, а ты о Hello World)
@@Torn_Shoe лол
Прикольная тема с структурами файлов! =)
Когда-то году в 2004-2005м, когда увлекался программированием, из-за отсутсвия подходящей программы просмотра и интереса сделать самому - написал прогу для конвертации PCX в BMP. Стар Крафт 1 сохранял скрины в PCX. Было интересно разобраться с тем, как хранятся данные в файле, а так же с простым алгоритмом сжатия в PCX. А вот с JPG я тогда не разобрался... было бы интересно наконец узнать как он кодирует данные.
@@AEF23C20 я в году 2004м долго искал про JPG, но ничего толкового не нашел тогда. Конечно, наверно, за эти годы появилось много чего в сети.
Но заморачиваться искать, читать и разбираться я не хочу, потому что мне это сейчас вообще не нужно. А видосик я бы посмотрел, где все уже разжевано.
Ребят, поднимайте этот коммент лайками, про старый добрый JPEG было бы очень интересно узнать, а-то даже странно начинать разбор с PNG)
там пиксели объединяются в подматрицы 8х8 + цветовое пространство RGB перекодируют в YCbCr или CMYK + дискретно косинусное преобразование (DCT) + преобразование Карунена-Лоэва (KLT) + дискретные преобразования Фурье (DFT) + как здесь сортировка деревом по убыванию весов вариантов + сжатие кодом Хаффмана и RLE... ну что у кого-то осталось желание разбираться во всей этой математике...😆
@@xyzw777 только укрепилось
Алек, ты лучший!
Спасибо, что так низкоуровнево все рассматриваешь!
Смотрю с удовольствием и всегда жду твоих роликов!
Разбери плиз как храниться звук без сжатия и с ним.
Огромный респект, что делаешь такие видео. Я все чаще замечаю, что все сложные штуки, что мы изучаем в универе кажутся сложными только потому, что нам очень херово в своё время объяснили простейшие структуры, и теперь благодаря твоим видосам, я гораздо лучше понимаю в чем вообще смысл того, чем мы занимаемся.
Вот кстати да, не знаю с чем связано, казалось бы, ты же преподаватель, дак исследуй этот вопрос, пойми сам и объясняй уже другим, у нас такая же тема была, у большинства преподов куча научных работ и даже книг, но объясняли так, что лучше бы вообще не объясняли, а тут мне кажется даже ребенку понятно будет что-то.
@@Torn_Shoe человек 16 лет - будет считаться ребёнком по вашему мнению?(просто интересно)
@@rkstreak извиняюсь, пропустил коммент... Дети это не возраст, это развитие, кто-то и в 50 будет ребенком, а кто-то и ребенок уже умный. Плюс люди не становятся умными вдруг, он либо умный от рождения, либо тупой сразу, я уверен что тупые пезды тупые пезды не потому-что в детстве только о шмотках думали вместо книг, там даже по типажу видно что ей бы только на панель, какие там книги.
видно как невероятно много ты вкладываешь в свои видео: время,силы,дизайн,разбор на пальцах - чтобы все было приятно конечному потребителю
я восхищаюсь людьми как ты
большое спасибо за понятный, благоухающий контент
Я дописал «морской бой» на с++ и вновь вернулся смотреть ролики на этом канале) (вновь вернулся, потому что я уже исчезал в потоке развлекательного контента, забыв про твои видео)
Побольше бы таких видео - простыми словами о базовых вещах. А то открываешь ролик с названием "*что угодно* для чайников", а там жуткие термины.
Очень хорошее видео!
У вас в видео есть неточность: алгоритм LZW, применяемый в графическом формате GIF, позволяет сжимать не только повторяющиеся пиксели одинакового цвета, но и повторяющиеся группы из нескольких пикселей.
Кроме этого, алгоритм LZW - это комбинация алгоритма LZ и алгоритма Хаффмана. Алгоритм Хаффмана позволяет достигать сжатия путём использования меньшего количества бит для кодирования наиболее часто встречающихся цветов. В LZW алгоритм Хаффмана позволяет тратить меньше бит не только на часто встречающиеся цвета, но и наиболее часто повторяющиеся группы из нескольких пикселей.
То, что вы описали - сжатие повторяющихся пикселей - поддерживают гораздо более простые алгоритмы, которые называются RLE - Run Length Encoding. Есть много их разновидностей, но суть у них одна и та же.
Ура! Давно ждал! Уверен что будет очень познавательно!
Очень интересно, не думал, что может пригодиться в моей сфере программирования, но теперь вижу потенциал, спасибо огромное, подписка )
Просто потрясающее детальное видео! Безумно интересно смотреть что у технологий под капотом и как это работает! Жду новых видео!))
Отличное видео! Давно хотел узнать подробности работы форматов картинок) Всё подробно и последовательно, спасибо за информацию 👍👍👍
Красочные видео на этом канале, приятно смотреть. И все разложено по полочкам максимально доступным языком 👍
*оч полезно. Давно ждал его* 👍
Замечательное видео! Спасибо, что подаете в простой форме устройство разных сторон ПО компьютера. Хотелось бы увидеть подобное видео о внутреннем устройстве например mp3 или MIDI файлов
Огромное Спасибо за такие наукоёмкие видео. Это сложная работа и мало востребованная, к сожалению. Желаю успехов на этой стезе, надеюсь выпуски не прекратятся. Очень познавательно...
Очень интересное видео, по больше таких видео!!!! Так продолжать, каждое видео смотрится на одном дыхании
Просто за название уже лайк словил. Продолжай в том же духе - твой контент заставил меня постоянно задавать себе вопрос: "А понимаю ли я то, что делаю?" и искать ответ)
Пару дней назад закончил декодер png для своего движка (который пишу с нуля без библиотек), а тут ролик на эту тему
Спасибо за ваши ролики! Надеюсь, что всё больше программистов начнут интересоваться как устроены изнутри файловые форматы и прочие, казалось бы, уже обыденные вещи
@@AntonyKondr привет, bmp может подойти. На англ. википедии в статье про bmp есть примеры (пункты 2.6, 2.7) с подробным описанием формата и его бинарного представления
@@AntonyKondr только нужно помнить (если ради эксперимента захочется сделать картинку), что bmp использует не rgba, а bgra, то есть первым идёт синий цвет, а не красный, как обычно. Ещё есть форматы ppm и tga, но про них мало могу сказать, так как пока не интересовался ими, а ещё к ним нет предустановленных программ для просмотра
@@AntonyKondr ага, я самые простые форматы попробовал вспомнить, просто с помощью deflate, который у png, то ещё удовольствие самостоятельно сжимать данные :)
Да, графический движок, на си + opengl. Чистого си мне пока хватает, хоть и есть свои ограничения, но они пока несущественные. Скорее всего скриптовый язык какой-нибудь приделаю уже для игровой логики
@@AntonyKondr точно знаю только, что язык шейдеров hlsl (directx) объектно-ориентированный, а glsl похож на немного урезанный си
Хотя на directx сам не писал, но вроде dx11 немного сложнее opengl, dx12 уже более сложный по своему строению, но и более производительный. Если чисто по винду писать, то directx хороший выбор. В любый других случая opengl, а потом vulkan (как начальный api для изучения он не подойдёт, уж слишком сложный для новичка)
тоже недавно делал пнг декодер для своей проги) правда не осилил чересстрочную развёртку и решил не реализовывать её вовсе 😄
Просто пишу чтобы сказать насколько твой контент уникален и качественный... Не останавливайся)
Alek OS, большое спасибо за видео! Хоть и сложно, но очень наглядно и интересно.
honestly the best soft tutorial ive ever seen. short and straight to the point ! i love it
Спасибо за видео. Помню пару лет назад делал програмку, которая из обычной картинки выбирала 256 самых используемых цветов, остальные подганяла максимально близко к этим 256 цветам, и потом делала картинку на основе палитры. И получается её можно очень удачно скомбинировать с PNG форматом и получать супер маленькие по размеру картинки. Я помню меня результаты соотношения потери цвета к размеру файла прям восхищали, а тут ещё и deflate сжатие будет.
Спасибо огромное! Смотрю, что-то записываю в тетрадь! Обязательно продолжайте записывать ролики в таком качественном формате!
Даааа, вот какой Ютуб нужен, который люди даже иногда конспектируют)))
Спасибо за отличную подачу материала! Одно удовольствие смотреть
Офигеть! Разбор просто ОГОНЬ!!!!
Очень круто и познавательно!!!! Лайкос и подписота однозначно!!
Контент стоит внимания любого начинающего/опытного прогера, спасибо автору за старания!
Спасибо! Прекрасный контент. И по содержанию и по исполнению.
Огромное спасибо!
Хотелось бы, чтобы разработчики всех популярных форматов файлов делали такие видео о своих изобретениях)
Тогда создателям контента было бы тяжелее находить находить идеи, что бы такого снять интересного для зрителей)
Интересно посмотреть и немного расширить свои знания о структуре файлов. Автору респект
Просто запредельное качество! Спасибо за видео!
Лайк, комментарий, подписка
Отличный ролик. Спасибо большое за труды!
Спасибо, было интересно.
Мотивирует на дополнительные копания, как и что устроено.
Полез разбираться как работает JPG
Супер круто! Узнал много нового! Лайк, подписка! И все такое)
Про то как компрессия работает на низком уровне хотелось бы еще в таком формате.
Круто! Даёшь ассемблер!)
Очень очень круто и подробно писал. Твоя подача самая лучшая. У тебя нет манеры донести рассжованную информацию. Ты делаешь так как ни кто не делает. Просмотрел видосики от и до, пробую задачки на ассемблере решать. Расскажи по возможности про сжатие аудио формата, и в целом про цифровое аудио.
Круто ! Всегда использовал PNGLIB и никогда не задумывался об устройстве файлов. Максимум в чём разбирался - это в формате битности на цвет. Чтоб туда сюда переводить.
Спасибо за полезный контент! Подача видео гениальна!
Очень качественное видео!👍👍👍 Спасибо!
Спасибо за очень годный контент, из самого детства было интересно как устроены файлы, особенно изображение. Визуальные эффекты и подача информации на высшем уровне. Видео доступно для широкого круга зрителей, так держать
Была такая достаточно толстая книжка. Так и называлась "Форматы данных". Я в своё время купил и не пожалел. Но в форме видео тоже - интересный вариант подачи информации!
@@A2OperatingSystem спасибо, что посоветовали книгу, обязательно чекну
Мы дожделись! :D
P.S. спасибо за качественное оформление в твоих роликах, если не секрет сколько времени занял этот?
Каждое видео - около месяца
@@AlekOS а сколько часов? Просто месяц работы над чем-то у каждого свой)
Не знаю)
Не вёл статистику по часам
@@AlekOS Спасибо за ответы :D
@@AlekOS охренеть... Месяц готовить материал для объяснения кодировки типа файлов... Это безумнее, чем спорить с кремлеботами в сети.
Контент - супер! Побольше low-level programming'а, пожалуйста.
В видео не было программирования вовсе, не говоря уже о низкоуровневом. Всё, что тут описано, реализуется высокоуровневыми ЯПами.
Короче сложновато, понадобилось на VBA рисовать картинки и самое простое что смог освоить это bmp
Спасибо, за ТАКИЕ видео! Очень нужные для образования!
Вижу видос от Алекса - смотрю, ставлю лайк и оставляю коммент!)
Отличный видос! Так держать!
Спасибо за работу Алек
Это было просто потрясающе)
Я вот художник-любитель, а не програмист, но так вообщем-то всё понятно!
особо понравился принцип сжатия!
Ничаянно наткнулся на это видео, залип на пол часа, спасибо огромное, я подписался
Топ, жду видоса про mp4
Братан, хорош, давай, давай вперед! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого почаще?
да уж... чтоб найти самому такую информацию, нужно сначала прочитать полно бесполезных книг а потом наткнутся на ту самую где всё это расскажут и то не факт что всё поймешь. Либо же каким то чудом наткнуться на соответствующие статьи в интернете. Цена данному ролику очень высока. Скажем так, именно такие видео ожидаешь увидеть платя деньги за обучение программированию.
Ой, да. Но, интернет тоже переполнен бесполезным мусором. Тоже очень тяжело найти какие-то хорошие статьи. Вы правы, качественный контент, как данное видео, ценен!
png rfc - единственное, что надо прочитать.
Однозначно контент заслуживает много лайков! Продолжай в том же духе💪💪💪
Давно не видел таких по качеству видео, лучший в Ру сегменте IT
Воооот это контент,лайк.Я пока сам это все накопал ,выпал в осадок а тут по полочкам :)
спасибо, самая лучшая подача материала, что я видел
Очень подробно, большое спасибо
Годный контент! Так держать
Редка увидишь видосы с таким понятным объяснением. Потрясающая работа проделана, спасибо за ваши старания)
Отличное видео! Вряд ли бы сам когда-нибудь добрался до этой темы, но ютуб порекомендовал, и я посмотрел с интересом. Тема сжатия очень интересна, хотя подозреваю, там в основном математика, и много просмотров не соберет. Хотя у тебя, думаю, получится и это разобрать увлекательно)
Самый классный контент. Спасибо автору!
Я как-то давно смотрел это видео. Сейчас решил пересмотреть из-за того что понадобилось сделать для своего байтового формата начало. Теперь мне стало понятно как это сделать. [18:07]
Спасибо за этот ролик, лайк! 👍
Очень круто, спасибо!
Спасибо за видео!
оч круто. подписался, буду теперь смотреть.
Alek OS, спасибо за твои видео. Это что-то нереальное для рунета. Кстати, как тебе тема для одного из следующих роликов, как устроена какая-нибудь файловая система?
Сделаю со временем
Классная тема, поддерживаю!
Очень увлекательно, но я как-то сразу ждал про PNG, а не всю предтечю... Тормознул на 3:30
Может стоило ссылку собрать с таймкодом?
Теперь посмотрю тогда, когда буду разгребать плейлист "посмотреть позже"
Но лайк и коммент с меня!
Спасибо, очень приятно и интересно рассказано!
спасибо за информацию, это надо знать!
спасибо большое, очень интересно)
Спасибо за полезное видео.
Мозг взорвался от полученной информации )
Спасибо за видео
Очень интересно! Спасибо!
Превосходное видео!
Спасибо за очередную годноту! Твои видосы надо пересматривать раз по 5, чтобы всё усвоить как надо
Станем гуру программистами, будем тонны денег получать, йоу!
@@nameundef8076 тогда уж свои проекты подымать, а не на дядю, пусть за выше среднего, но все же за зарплату ишачить. 🤔
Очень хорошо, спасибо
Очень круто. Текст, голос, монтаж❤️
Если это не любовь, то что?
Отличное видео. Монтаж на высочайшем уровне. Вся информация разжёвана и понятно подана. Подписка, лайк!
Оаоаоа, как же автор хорош!!!
Очень интересно послушать про SVG и Webp
Отличное видео. Спасибо большое.
спасибо большое за видео!
Едрить колотить, я 15 лет работаю графическим дизайнером и нигде, повторюсь НИГДЕ! не видел подобных видео. Респект тебе, колокольчик жмакнул, лайк влепил, подписку оформил, что там ещё нажать, чтобы ты пилил подобный контент и дальше, куда задонатить?))))
круто, спасибо!
Потрясный ролик, ничего не запомнил и мало что понял но оооооочень интересно!!!
Спасибо за интересное видео
Ещё не посмотрел но уже лайк!
очень хорошое видео, мне понравилось
Очень круто! Прикольно было ещё jpg и svg увидеть :)
SVG достаточно прост. Можно в блокноте набрать)
@@A2OperatingSystem там 5 миллионов тысяч нюансов с форматами) всё же хотелось бы поподробнее)
@@John_602nd например, можно начать со статьи "SVG-файлы изнутри и вывод векторных изображений на canvas «вручную» (ч.1)" на Хабре
Написал декодер по твоему смайлику) Спасибо)
спасибо за интересное обьяснение
Я за побольше видео про форматы файлов или про сжатие данных )
Спасибо за видео
Как всегда классно) как ты делаешь такие видео?
очень хорошо что по мимо теории в видосе есть и практика