КАК УСТРОЕН PNG-ФАЙЛ?
Вставка
- Опубліковано 16 тра 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 и так все понятно
ЕЕЕЕЕЕ. Супер круто. Таких видосов на ру IT сегменте не было. Надеюсь канал не отойдет от темы low-level programming'а
Пускай остаётся лоу левел, я опытный програмер и то новое и интересное встречаю. А как hello world на php или py сделать думаю можно просто погуглить. Контент качественный, м.б. уникальный. Подача приятная, не для тупых, но логичная и последовательная. Супер качественная визуализация. Я боюсь себе представить сколько времени и сил стоит подготовить подобный материал, сделать анимацию, все совместить. Автору низкий поклон!
@@vip8877 ну как бы этот видос очень даже далек от уровня Hello World, я не думаю что большинство разрабов даже это знают, что уж об обычных юзерах говорить, а ты о Hello World)
@@Torn_Shoe лол
Вот это контент однако...столько графики и анимаций...всё очень красиво, речь идеальная, это ж надо было так заморочиться! Но видео конечно не для простых людей, точнее первые 10 минут абсолютно понятны, а дальше информация для тех, кто "уже давно в теме". В любом случае это очень круто!
Алек, ты лучший!
Спасибо, что так низкоуровнево все рассматриваешь!
Смотрю с удовольствием и всегда жду твоих роликов!
Разбери плиз как храниться звук без сжатия и с ним.
Прикольная тема с структурами файлов! =)
Когда-то году в 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 будет ребенком, а кто-то и ребенок уже умный. Плюс люди не становятся умными вдруг, он либо умный от рождения, либо тупой сразу, я уверен что тупые пезды тупые пезды не потому-что в детстве только о шмотках думали вместо книг, там даже по типажу видно что ей бы только на панель, какие там книги.
видно как невероятно много ты вкладываешь в свои видео: время,силы,дизайн,разбор на пальцах - чтобы все было приятно конечному потребителю
я восхищаюсь людьми как ты
большое спасибо за понятный, благоухающий контент
Просто потрясающее детальное видео! Безумно интересно смотреть что у технологий под капотом и как это работает! Жду новых видео!))
Ура! Давно ждал! Уверен что будет очень познавательно!
Побольше бы таких видео - простыми словами о базовых вещах. А то открываешь ролик с названием "*что угодно* для чайников", а там жуткие термины.
Очень хорошее видео!
Отличное видео! Давно хотел узнать подробности работы форматов картинок) Всё подробно и последовательно, спасибо за информацию 👍👍👍
Замечательное видео! Спасибо, что подаете в простой форме устройство разных сторон ПО компьютера. Хотелось бы увидеть подобное видео о внутреннем устройстве например mp3 или MIDI файлов
Очень интересное видео, по больше таких видео!!!! Так продолжать, каждое видео смотрится на одном дыхании
Очень интересно, не думал, что может пригодиться в моей сфере программирования, но теперь вижу потенциал, спасибо огромное, подписка )
honestly the best soft tutorial ive ever seen. short and straight to the point ! i love it
Красочные видео на этом канале, приятно смотреть. И все разложено по полочкам максимально доступным языком 👍
Огромное Спасибо за такие наукоёмкие видео. Это сложная работа и мало востребованная, к сожалению. Желаю успехов на этой стезе, надеюсь выпуски не прекратятся. Очень познавательно...
*оч полезно. Давно ждал его* 👍
Alek OS, большое спасибо за видео! Хоть и сложно, но очень наглядно и интересно.
Спасибо! Прекрасный контент. И по содержанию и по исполнению.
Я дописал «морской бой» на с++ и вновь вернулся смотреть ролики на этом канале) (вновь вернулся, потому что я уже исчезал в потоке развлекательного контента, забыв про твои видео)
Спасибо за отличную подачу материала! Одно удовольствие смотреть
Просто пишу чтобы сказать насколько твой контент уникален и качественный... Не останавливайся)
Спасибо, было интересно.
Мотивирует на дополнительные копания, как и что устроено.
Полез разбираться как работает JPG
Офигеть! Разбор просто ОГОНЬ!!!!
Очень круто и познавательно!!!! Лайкос и подписота однозначно!!
Интересно посмотреть и немного расширить свои знания о структуре файлов. Автору респект
Просто за название уже лайк словил. Продолжай в том же духе - твой контент заставил меня постоянно задавать себе вопрос: "А понимаю ли я то, что делаю?" и искать ответ)
Спасибо огромное! Смотрю, что-то записываю в тетрадь! Обязательно продолжайте записывать ролики в таком качественном формате!
Даааа, вот какой Ютуб нужен, который люди даже иногда конспектируют)))
Отличный ролик. Спасибо большое за труды!
Просто запредельное качество! Спасибо за видео!
Лайк, комментарий, подписка
Спасибо за видео. Помню пару лет назад делал програмку, которая из обычной картинки выбирала 256 самых используемых цветов, остальные подганяла максимально близко к этим 256 цветам, и потом делала картинку на основе палитры. И получается её можно очень удачно скомбинировать с PNG форматом и получать супер маленькие по размеру картинки. Я помню меня результаты соотношения потери цвета к размеру файла прям восхищали, а тут ещё и deflate сжатие будет.
Вижу видос от Алекса - смотрю, ставлю лайк и оставляю коммент!)
Контент стоит внимания любого начинающего/опытного прогера, спасибо автору за старания!
Огромное спасибо!
Хотелось бы, чтобы разработчики всех популярных форматов файлов делали такие видео о своих изобретениях)
Тогда создателям контента было бы тяжелее находить находить идеи, что бы такого снять интересного для зрителей)
Спасибо за полезный контент! Подача видео гениальна!
Мы дожделись! :D
P.S. спасибо за качественное оформление в твоих роликах, если не секрет сколько времени занял этот?
Каждое видео - около месяца
@@AlekOS а сколько часов? Просто месяц работы над чем-то у каждого свой)
Не знаю)
Не вёл статистику по часам
@@AlekOS Спасибо за ответы :D
@@AlekOS охренеть... Месяц готовить материал для объяснения кодировки типа файлов... Это безумнее, чем спорить с кремлеботами в сети.
Спасибо, за ТАКИЕ видео! Очень нужные для образования!
У вас в видео есть неточность: алгоритм LZW, применяемый в графическом формате GIF, позволяет сжимать не только повторяющиеся пиксели одинакового цвета, но и повторяющиеся группы из нескольких пикселей.
Кроме этого, алгоритм LZW - это комбинация алгоритма LZ и алгоритма Хаффмана. Алгоритм Хаффмана позволяет достигать сжатия путём использования меньшего количества бит для кодирования наиболее часто встречающихся цветов. В LZW алгоритм Хаффмана позволяет тратить меньше бит не только на часто встречающиеся цвета, но и наиболее часто повторяющиеся группы из нескольких пикселей.
То, что вы описали - сжатие повторяющихся пикселей - поддерживают гораздо более простые алгоритмы, которые называются RLE - Run Length Encoding. Есть много их разновидностей, но суть у них одна и та же.
Пару дней назад закончил декодер 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 для изучения он не подойдёт, уж слишком сложный для новичка)
тоже недавно делал пнг декодер для своей проги) правда не осилил чересстрочную развёртку и решил не реализовывать её вовсе 😄
Спасибо за работу Алек
Спасибо за очень годный контент, из самого детства было интересно как устроены файлы, особенно изображение. Визуальные эффекты и подача информации на высшем уровне. Видео доступно для широкого круга зрителей, так держать
Была такая достаточно толстая книжка. Так и называлась "Форматы данных". Я в своё время купил и не пожалел. Но в форме видео тоже - интересный вариант подачи информации!
@@A2OperatingSystem спасибо, что посоветовали книгу, обязательно чекну
Супер круто! Узнал много нового! Лайк, подписка! И все такое)
Про то как компрессия работает на низком уровне хотелось бы еще в таком формате.
Ничаянно наткнулся на это видео, залип на пол часа, спасибо огромное, я подписался
Очень качественное видео!👍👍👍 Спасибо!
Контент - супер! Побольше low-level programming'а, пожалуйста.
В видео не было программирования вовсе, не говоря уже о низкоуровневом. Всё, что тут описано, реализуется высокоуровневыми ЯПами.
Круто! Даёшь ассемблер!)
спасибо, самая лучшая подача материала, что я видел
Отличный видос! Так держать!
Братан, хорош, давай, давай вперед! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого почаще?
Самый классный контент. Спасибо автору!
Топ, жду видоса про mp4
Очень очень круто и подробно писал. Твоя подача самая лучшая. У тебя нет манеры донести рассжованную информацию. Ты делаешь так как ни кто не делает. Просмотрел видосики от и до, пробую задачки на ассемблере решать. Расскажи по возможности про сжатие аудио формата, и в целом про цифровое аудио.
Спасибо, очень приятно и интересно рассказано!
Это было просто потрясающе)
Воооот это контент,лайк.Я пока сам это все накопал ,выпал в осадок а тут по полочкам :)
Спасибо за этот ролик, лайк! 👍
Редка увидишь видосы с таким понятным объяснением. Потрясающая работа проделана, спасибо за ваши старания)
Давно не видел таких по качеству видео, лучший в Ру сегменте IT
Однозначно контент заслуживает много лайков! Продолжай в том же духе💪💪💪
спасибо за информацию, это надо знать!
Круто ! Всегда использовал PNGLIB и никогда не задумывался об устройстве файлов. Максимум в чём разбирался - это в формате битности на цвет. Чтоб туда сюда переводить.
Спасибо за видео!
Я вот художник-любитель, а не програмист, но так вообщем-то всё понятно!
особо понравился принцип сжатия!
оч круто. подписался, буду теперь смотреть.
Короче сложновато, понадобилось на VBA рисовать картинки и самое простое что смог освоить это bmp
Очень подробно, большое спасибо
Очень круто, спасибо!
спасибо большое, очень интересно)
Очень хорошо, спасибо
очень хорошо что по мимо теории в видосе есть и практика
Я за побольше видео про форматы файлов или про сжатие данных )
Годный контент! Так держать
Потрясный ролик, ничего не запомнил и мало что понял но оооооочень интересно!!!
спасибо большое за видео!
Спасибо за очередную годноту! Твои видосы надо пересматривать раз по 5, чтобы всё усвоить как надо
Станем гуру программистами, будем тонны денег получать, йоу!
@@nameundef8076 тогда уж свои проекты подымать, а не на дядю, пусть за выше среднего, но все же за зарплату ишачить. 🤔
круто, спасибо!
Очень круто, жаль такого видео не было, когда я писал парсер из PNG в PNM на С весной.
Alek OS, спасибо за твои видео. Это что-то нереальное для рунета. Кстати, как тебе тема для одного из следующих роликов, как устроена какая-нибудь файловая система?
Сделаю со временем
Классная тема, поддерживаю!
спасибо за интересное обьяснение
Очень интересно! Спасибо!
Очень интересно послушать про SVG и Webp
Я как-то давно смотрел это видео. Сейчас решил пересмотреть из-за того что понадобилось сделать для своего байтового формата начало. Теперь мне стало понятно как это сделать. [18:07]
Мозг взорвался от полученной информации )
Спасибо за видео
Спасибо за интересное видео
Спасибо за полезное видео.
Написал декодер по твоему смайлику) Спасибо)
Спасибо огромное
Hi there, watching you from Israel. Thanks a lot, a theme you chosen touched me deep
Как всегда классно) как ты делаешь такие видео?
Отличное видео! Вряд ли бы сам когда-нибудь добрался до этой темы, но ютуб порекомендовал, и я посмотрел с интересом. Тема сжатия очень интересна, хотя подозреваю, там в основном математика, и много просмотров не соберет. Хотя у тебя, думаю, получится и это разобрать увлекательно)
Спасибо за видео
Очень круто. Текст, голос, монтаж❤️
Если это не любовь, то что?
спасибо, теперь все стало более понятным.
Друг, ты просто космос! Чтоб я без тебя делал, если бы не твойконтент!
Отличное видео. Спасибо большое.
Оаоаоа, как же автор хорош!!!
Очень круто! Прикольно было ещё jpg и svg увидеть :)
SVG достаточно прост. Можно в блокноте набрать)
@@A2OperatingSystem там 5 миллионов тысяч нюансов с форматами) всё же хотелось бы поподробнее)
@@John_602nd например, можно начать со статьи "SVG-файлы изнутри и вывод векторных изображений на canvas «вручную» (ч.1)" на Хабре
Прошу, молю, продолжай делать такие ахуенные видео. Я не переживу, если ты перестанешь делать такой крутой контент
Уже стал патроном этого канала? 😏
Превосходное видео!