Формат файла не поддерживается файл должен содержать палитру 256 цветов
Хороший верстальщик должен уметь правильно выбирать форматы изображений для своей вёрстки, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке. Давайте разберёмся, какие бывают форматы изображений и в каких ситуациях лучше выбрать тот или иной формат.
Растровые форматы
Для начала рассмотрим форматы, которые относятся к растровой графике: GIF, JPEG, PNG и WebP. Подробнее о растровой графике можно прочитать в статье «Растровая и векторная графика».
Основные характеристики, которые нас будут интересовать при выборе формата — это качество изображения, вес и количество цветов. В вебе тяжёлые изображения непрактичны, поскольку они долго загружаются. Чтобы уменьшить вес файла, используются алгоритмы сжатия. Сжатие может быть с потерями и без потерь. При выборе подходящего формата изображения, нам нужно найти баланс между весом файла и качеством картинки, так как некоторые алгоритмы сжимают изображения с потерей качества. Теперь рассмотрим каждый из форматов подробнее.
GIF (Graphics Interchange Format)
Формат был разработан компанией CompuServe в далёком 1987 для передачи растровых изображений по интернету. GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.
Формат поддерживает прозрачность — каждый пиксель изображения может быть в двух состояниях: прозрачный или непрозрачный, полупрозрачность не поддерживается.
Особенностью GIF является поддержка анимации, то есть этот формат может хранить несколько кадров, которые сменяют друг друга с определённой частотой.
Таким образом, формат GIF подходит если:
- изображение не многоцветное;
- нужна простейшая прозрачность;
- нужна анимация.
JPEG (Joint Photographic Experts Group)
Формат JPEG получил своё название от объединённого комитета экспертов по фотографии, который и создал этот стандарт в конце 80-х — начале 90-х годов. Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.
Формат JPEG сжимает изображения с потерей качества. Алгоритм сжатия основан на разбиении исходного изображения на квадраты 8×8 пикселей, и последующей их группировке. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).
Пример изображения в формате JPEG с неоптимальной степенью сжатия. Качество: 10. Вес: 20 килобайт.
Первая картинка весит 20 килобайт. Это круто, очень мало, но для этого мы задали уровень качества 10 и картинка выглядит плохо.
Пример изображения в формате JPEG с оптимальной степенью сжатия. Качество: 60. Вес: 65 килобайт.
Вторая картинка с уровнем качества 60 весит чуть больше первой — 65 килобайт, но выглядит уже хорошо.
Пример изображения в формате JPEG с минимальной степенью сжатия. Качество: 95. Вес: 169 килобайт.
Для третьей картинки мы задали уровень качества 95, из-за чего её вес стал 169 килобайт. Вторая и третья картинка внешне почти неразличимы, однако вторая картинка весит на 104 килобайта легче.
Таким образом, формат JPEG лучше подходит для:
- полноцветных изображений, фотографий;
- изображений, с плавным переходом яркости и контраста;
- рисунков с большим количеством разноцветных деталей.
PNG (Portable Network Graphics)
PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.
PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.
Формат имеет две вариации: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов, а PNG24 использует уже более 16 миллионов цветов.
Главная особенность формата PNG — поддержка альфа-прозрачности, то есть каждому пикселю в отдельности можно задать свою степень прозрачности.
Пример изображения в формате PNG (источник изображения: Wikimedia Commons)
Итак, формат PNG подходит для:
- изображений с прозрачностью и полупрозрачностью;
- когда необходима повышенная точность полноцветных изображений;
- изображений с резкими переходами цветов.
WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.
Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.
Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.
- сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
- сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
- поддерживает прозрачность (альфа-канал).
Иногда WebP сжимает изображение даже лучше, чем заявляет Google.
JPEG: 44 килобайт WebP: 26 килобайт. Если изображение не видно, значит ваш браузер не поддерживает формат WebP.
Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.
Векторные форматы
GIF, JPEG, PNG, и WebP — растровые форматы, основанные на дискретном (пиксельном, точечном) представлении изображения, в то время как векторные форматы основаны на математических формулах (геометрическом представлении фигур). Подробнее о векторной графике можно прочитать в статье «Растровая и векторная графика».
SVG (Scalable Vector Graphics)
SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.
Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.
SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.
- Как сделать картинку с 256-цветной кодировкой
- Как увеличить глубину цвета
- Как преобразовать в формат rgb
- - Исходное изображение;
- - персональный компьютер с установленным на нем программным продуктом Adobe Photoshop любой версии.
Откройте картинку в программе Photoshop. Ознакомьтесь с исходными параметрами цветовой кодировки изображения. Для этого в меню списка Image кликните Mode. В русифицированной версии программы этот путь выглядит так: «Изображение/Режим». Убедитесь в том, что ваша картинка не сохранена в 256-цветной палитре. Она обозначена в данном списке как Indexed Color, в русской – «Индексированный цвет». Параметры изображения в этом списке отмечены галочкой. Также параметры картинки отображены на верхней рамке открытого окна.
Для перекодирования изображения в 256 цветов просто выберите из того же списка нужную для этого опцию Indexed Color. В предложенном ниже окне выставьте следующие параметры: Palette: Local (Selective), в русской версии Локально-выборочный, Colors - 256. Принудительный режим Forced можно не выбирать, оставив None. Если картинка предназначена для размещения в интернете, выставьте опцию Web.
Обратите внимание на то, что в данном меню вам предлагается сохранить прозрачность фона. Если изначально ваша картинка имела такой фон, поставьте галочку напротив Transparency. Сглаживание изображения Dither тоже производите на ваше усмотрение. Когда все параметры перекодирования выбраны, нажмите кнопку Save (Сохранить). Информация на рамке окна поменяется на «Название файла@масштаб. Index».
Теперь файл следует сохранить. В меню File выберите Save As. Из предложенного списка форматов выберите тот, который вам наиболее подходит. Для 256-цветной картинки предлагаются форматы BMP, PNG и GIF. Картинки с прозрачным фоном поддерживают форматы PNG и GIF. Формат BMP работает довольно корректно с цветом, но его отличает довольно большой «вес» изображения в байтах.
Для преобразования картинки в 256-цветную кодировку можно использовать встроенную опцию оптимизации изображения для Web следующим образом. Откройте картинку. Выберите в меню File вкладку Save for Web. В отдельном окне, в котором будут отображаться результаты изменения изображения, выставьте следующие параметры: формат GIF или PNG-8, количество цветов -256, цветовой алгоритм Selective или Custom.
Для картинки с прозрачным фоном поставьте галочку Transparency. При каждом новом выбранном параметре результат будет отображаться тут же слева от списка. Когда все параметры будут выставлены и результат вас устроит, нажмите кнопку Save. Сохраните изображение под другим именем, чтобы у вас остался неизмененный оригинал.
Сегодня пойдет речь о форматах изображений их особенностях и отличительных чертах. Многие из нас знают, что изображения имеют разные форматы, но не все понимают, почему их такое множество и какие у них отличительные черты.
Любое изображение, хранящееся на компьютере, имеет свой графический формат. Каждый из графических форматов имеет свои свойства и своё предназначение. На сегодняшний день существует огромное количество графических форматов. Большую часть графических форматов, мы будем рассматривать на основе одного из самых популярных графических редакторов Adobe Photoshop. Почему именно фотошоп, все просто, этот графический редактор обладает наибольшим количеством форматов.
Но дополнительно, постараемся разобрать и другие широко известные форматы изображения.
Итак, приступим:
PSD – это собственный формат программы Adobe Photoshop, он позволяет сохранять всю проделанную работу над изображением. А именно прозрачность, режимы смешивания слоев, тени, слои, маски слоя и все остальные мелочи работы проделанной с изображением. Этот формат обычно используется, если работа над изображением до конца не завершена. Так же его часто используют для разработки макета сайта, так как производить верстку с данного файла удобно видя все слои и элементы. А во всех остальных случаях его использование нет смысла, так как он имеет значительно большой размер файла по отношению к другим форматам.
TIFF – позволяет максимально точно сохранить подготовленный проект фотошопа. Он содержит не только пиксельную информацию, но также плотность точек на изображение при печати dpi. Еще он может хранить несколько слоев изображения плюс информацию о прозрачности каналов. Использование этот формат получил в основном в полиграфии.
BMP – это точечный рисунок. Изображение в этом формате состоит из массы точек, каждая из которых содержит свой цвет. Этот формат имеет очень большой размер и хорошо подвергается сжатию архиваторами. Потери качества в BMP не значительное, однако, он уступает TIFF.
JPEG – это самый широко используемый формат. Он получил широкое использование в цифровой технике (фотоаппаратах). Причина столь широкого использования это довольно не плохое качество и маленький размер файла. Но маленький размер говорит о том, что значительно теряется качество изображения. Все дело в алгоритме сжатия изображений, он состоит в том что, сжимаясь, изображение значительно теряет точность. Этот формат по этим причинам не желательно использовать в полиграфии. Но плюсом является то, что их удобно посылать по email (электронной почте), выкладывать в Интернете и хранить на дисках.
JPEG 2000 – формат графических файлов с хорошей компрессией. Качество изображения по сравнению с JPEG получается более гладкое и четкое, а размер файла в одинаковом качестве в разы меньше. Графические файлы, сохранённые в JPEG 2000, с высокой степенью сжатия не содержат артефактов.
Поддерживает сжатие изображений, как с потерями качества, так и без него. Кроме этого формат JPEG 2000, поддерживает «прогрессивное сжатие», которое по мере загрузки файла позволяет увидеть качественное изображение, изначально представленное как размытое. Расширение файлов: .jp2, .j2k, .jpf, .jpm, .jpg2, .j2c, .jpc.
JPEG XR – формат кодирования изображений, разработанный Microsoft. Сжимает фотографии больше и лучше JPEG 2000 может сжимать без потери качества. Поддерживает прозрачность и различную степень сжатия. JPEG XR достаточно эффективный формат для сжатия изображений, при достаточно большом проценте сжатия, на изображение практически отсутствуют артефакты.
Изображения JPEG XR загружаются быстрее, чем в формате JPEG2000. Формат поддерживает 16bit, что дает возможность хранить картинки с полным охватом цветов размером меньше чем в формате TIFF. Расширение файлов: .jxr, .hdp, .wdp.
GIF – в основном используется для изготовления графики для Интернета. Он не годится для сохранения фотографий, так как имеет ограничение по цветопередаче, по этим же причинам он не годится для полиграфии. Изображение данного графического формата состоит из точек, которые могут включать в себя от 2 до 256 цветов. Ограниченность цветопередачи и поддержка прозрачности делают его незаменимым для хранения изображений с минимум цветов, например логотипов. Еще одна особенность формата это возможность изготовления анимированных изображений. Широко применяют для создания gif (анимированных) баннеров.
EPS – можно назвать наиболее надежным и универсальным форматом. Он в основном предназначен для передачи векторной и растровой графики в издательства, возможность создания и использования данного формата практически всеми графическими редакторами. Использовать данный формат имеет наибольший смысл только в том случае, если вывод осуществляется на PostScript-устройстве.
Этот формат уникален он поддерживает все цветовые модели необходимые для печати, может записывать данные в RGB, обтравочные контуры, а также использование шрифтов и другое. Первоначально EPS разрабатывался как векторный формат, ну а позднее уже появилась его разновидность растра — Photoshop EPS.
PNG – это графический формат, который пришел совсем недавно на смену Gif формату, и уже успел, стань очень популярным из за того, что умеет держать прозрачность и полупрозрачность что было не возможно в его предшественнике gif. Это значит что png держит полупрозрачность в диапазоне от 1 до 99% при помощи альфа-канала с 256 градациями серого. Прозрачность работает следующим образом, в файл записывается информация о гамма — коррекции. Гамма-коррекция представляет собой определенное число яркости, контраста монитора. Это число в последующем считывается из файла и позволяет откорректировать отображение изображения за счет поправок яркости.
PICT – это собственный формат Макинтош. Формат способен включать в себя как растровую, так и векторную информацию, текст, а также звук, использует RLE-компрессию. Битовые PICT-изображения могут иметь абсолютно любую глубину битового представления. Векторные же PICT-изображения, которые практически исчезли из использования в наши дни, имели необычные проблемы толщины линии и другие отклонения во время печати.
Формат используется для Макинтош, и при создании определенных презентаций только для Мак. На обычных компьютерах (не мак) PICT – формат представлен с расширением .pic или .pct, считывается определенными программами, работа с этим форматом зачастую бывает не простой.
PDF –формат предложен и разработан компанией Adobe, как формат для электронной документации, различных презентаций и верстки для пересылки его по электронной почте. И его проектная особенность была обеспечить компактный формат. По этим причинам все данные в pdf могут сжиматься, причем особенность в нем такая, что к разного рода информации применяются разные, более подходящие для этих типов данных сжатия: JPEG, RLE, CCITT, ZIP.
PCX – формат растрового изображения. Файлы pcx типа используют стандартную палитру цветов, этот формат был расширен для хранение 24-битных изображений. Этот формат аппаратно зависим. Предназначен хранить информацию в файле в том же виде, что и в видео-плате. Чтобы совместить этот формат со старыми программами необходима поддержка EGA-режима видеоконтроллера. Алгоритм сжатия быстрый и занимает малый объём памяти, но не очень эффективен, не подойдет для сжатия фотографий и детальной компьютерной графики.
ICO – этот формат разработан для хранения значков файлов. Размеры ico файлов могут быть любыми, но наиболее используемые значки со сторонами в 16, 32 и 48 пикселей. Еще используются иконки с размерами 24, 40, 60, 72, 92, 108, 128, 256 пикселей. Данные в значках обычно не сжимаются. Значки бывают в цвете True Color, High Color , или с четко фиксированной палитрой. По своей структуре файлы ICO наиболее близки к BMP формату, но отличаются от bmp присутствием маски, накладываемой на задний план с помощью операции побитового «И», что дает возможность реализовать прозрачность.
CDR – это векторный формат изображения или рисунка, созданный при помощи программы CorelDRAW. Данный формат разработан компанией Corel для его использования в собственных программных продуктах компании. CDR — изображения не поддерживаются многими графическими редакторами. Но это не проблема, файл можно легко экспортировать при помощи все того же CorelDRAW в более распространенные форматы изображений. Изображения, созданные в CorelDRAW и имеющие расширение CDR также можно открыть программой Corel Paint Shop Pro. Для наилучшей совместимости, компания Corel рекомендует сохранять файлы в CorelDRAW формате CDR более ранней версии. Файлы CDR десятой и более ранней версии, можно открыть используя и программу Adobe Illustrator.
AI — это векторный формат изображений, название которого произошло от сокращения имени векторного редактора AdobeIllustrator. Поддерживается практически всеми графическими программами, которые каким либо образом связанны с векторной графикой. Ai является одним из лучших промежуточных посредников для передачи изображения из одного редактора в другой. Отличительной и очень важной чертой формата является его наибольшая стабильность и совместимость с PostScript, что представляет большую ценность для издательств полиграфической продукции.
RAW – это формат данных, содержащий в себе необработанную информацию (или обработанную в минимальной степени), созданный напрямую поступающей информацией с матрицы фотокамеры (видеокамеры и д.р.). Этим форматом обозначают не только фото данные, но и исходные данные звукозаписи или видео. Данный формат хранит всю информацию о файле и имеет больший потенциал для обработки фотографий, нежели формат JPG. RAW сохраняет максимально возможное качество. Данные в RAW-файлах могут быть несжатыми, сжатыми без потерь или сжатыми с потерями.
RAW — файлы у ряда производителей фотокамер, имеют собственный формат расширения такой как у Canon – CR2, Nikon – NEF. У многих других предложенный Adobe формат DNG, это такие компании как Leica, Hasselblad, Samsung, Pentax, Ricoh. Если в фотошопе отсутствует камера raw для вашего фотоаппарата, то файлы не откроются, для этих целей создана утилита для конвертирования raw от адобе.
SVG – формат масштабируемой векторной графики (Scalable Vector Graphics). Формат создан W3C. В соответствие со спецификацией он создан для описания двумерной векторной и смешанной векторной/растровой графики в XML. Включает в себя три типа объектов: фигуры, изображения и текст. Поддерживает неподвижную, анимированную так и интерактивную графику. Создавать и редактировать можно как в текстовых редакторов посредством правки кода, так и в любом графическом редакторе для векторной графики (Adobe Illustrator, Inkscape, CorelDRAW, Corel SVG Viewer). SVG – это открытый стандарт не является чьей либо собственностью.
WebP — формат изображений для Интернета, обеспечивающий превосходное сжатие без потерь и с потерями качества предложенный компанией Google. WebP формат позволяет создавать изображения меньшего размера и более высокой насыщенности. Обеспечивает наиболее быструю загрузку изображений на веб ресурсах при работе в Интернете.
По сравнению с PNG изображениями формат WebP имеет вес на 26% меньше без потери качества. По сравнению с изображениями JPEG формата WebP на 25-34% меньше весит, но с потерями качества по индексу структурного сходства.
- Поддерживает прозрачность (альфа-канал).
- WebP поддерживается в Chrome, Firefox, Edge, Opera и других инструментах и библиотеках. При разработке сайтов для корректного отображения в браузерах, которые не поддерживают WebP формат, рекомендуется использовать поддержку альтернативных изображений.
- Включает легкую библиотеку libwebp для кодирования и декодирования.
- Инструменты командной строки cwebp и dwebp для преобразования изображений в формат WebP и обратно.
- Инструменты просмотра, мультиплексирования (передача нескольких потоков данных с меньшей скоростью по одному каналу) и анимации изображений WebP.
AVIF – (AV1 Still Image File Format) эффективный формат сжатия изображения с потерей качества, основанный на библиотеке для сжатия кадров кодека AV1. AVIF – бесплатный формат, совместимый с HEIF. Может хорошо обработать изображение, получив небольшой вес файла с высокой детализацией. Обеспечивает быструю загрузку изображений на сайтах в Интернете.
- Поддерживает прозрачность (альфа-канал).
- Может хранить несколько изображений.
- Поддерживает анимацию.
- Имеет стандарт EXIF (позволяет добавлять к изображению дополнительную информацию). Например, авторство.
- Поддерживает миниатюры изображения.
- Имеет преимущества по сжатию: примерно на 20% сжимает лучше WebP и на 50% чем Jpg.
Конвертировать изображение в .avif файл можно в сервисе Squoosh.
Расширение файлов: .avif
BMP (полное имя Bitmap) - это стандартный формат файла изображения в операционной системе Windows, который можно разделить на две категории: зависящее от устройства растровое изображение (DDB) и независимое от устройства растровое изображение (DIB), которое очень широко используется. Он использует формат хранения растровых изображений, в дополнение к дополнительной глубине изображения, не использует никакого другого сжатия, поэтому пространство, занимаемое файлом BMP, очень велико. Глубина изображения файлов BMP может быть выбрана из lbit, 4bit, 8bit и 24bit. При хранении данных в файле BMP изображение сканируется в порядке слева направо и снизу вверх. Поскольку формат файла BMP является стандартом для обмена данными, связанными с графиками, в среде Windows, все графические и графические программы, работающие в среде Windows, поддерживают формат изображений BMP.
Вот краткое введение в формат BMP на конкретном примере.
1. Общая информация
Файлы в формате BMP выглядят следующим образом от начала до конца:
- заголовок файла bmp (заголовок файла bmp): всего 14 байт;
- Заголовок растровой информации (растровая информация): всего 40 байт;
- Цветовая палитра: необязательно;
- Растровые данные
Наиболее распространенной является 24-битная карта. Так называемая 24-битная карта означает, что информация о цвете пикселя представлена 24 битами, то есть для трех основных цветов BRG каждый цвет представлен байтовыми (8) битами. В дополнение к 24-битным изображениям, есть 1 бит (монохромный), 2 бита (4 цвета, CGA), 4 бита (16 цветов, VGA), 8 бит (256 цветов), 16 бит (расширенные цвета), 24 бита (правда) Цвет) и 32-битный.
Ниже приводится подробное введение через следующие рисунки:
Часть информации об изображении выглядит следующим образом:
2. заголовок файла bmp
Заголовок файла bmp содержит следующую информацию:
- bfType: 2 байта, тип файла;
- bfSize: 4 байта, размер файла;
- bfReserved1: 2 байта, зарезервированы, должны быть установлены в 0;
- bfReserved2: 2 байта, зарезервированы, должны быть установлены в 0;
- bfOffBits: 4 байта, смещение от начала до растровых данных;
0-1: bfType, который указывает тип файла. Два байта файла формата BMP - 0x4D42, десятичное число - 19778, а символьное отображение - «BM»;
2-5: bfSize, указывающий размер файла, здесь 0x0004B436, десятичное число 308278, что составляет 301 КБ, проверьте информацию о файле, убедитесь, что он правильный;
a-d: bfOffBits, 4-байтовое смещение, которое представляет смещение от заголовка файла к данным точечного рисунка, здесь 0x00000436, десятичное значение 1078, и проверка будет выполнена позже;
- biSize: 4 байта, размер информационного заголовка, который составляет 40;
- biWidth: 4 байта, указывающих ширину изображения в пикселях;
- biHeight: 4 байта, указывающих высоту изображения в пикселях. В то же время, если оно положительное, это означает, что битовая карта инвертирована (то есть данные указывают от нижнего левого угла до верхнего правого угла изображения).
- biPlanes: 2 байта, указывающие количество цветовых плоскостей для целевого устройства, всегда равное 1;
- biBitCount: 2 байта, указывающих количество бит / пикселей, значения 1, 2, 4, 8, 16, 24, 32;
- biCompression: 4 байта, указывающие тип сжатия изображения, наиболее часто используемый 0 (BI_RGB), что означает отсутствие сжатия;
- biSizeImages: 4 байта, указывающих размер растровых данных; при использовании формата BI_RGB его можно установить равным 0;
- biXPelsPerMeter: указывает горизонтальное разрешение, единица измерения - пиксель / метр, целое число со знаком;
- biYPelsPerMeter: указывает вертикальное разрешение, единица измерения - пиксель / метр, целое число со знаком;
- biClrUsed: указывает число цветовых индексов в палитре, используемых растровым изображением, 0 означает использовать все;
- biClrImportant: указывает число цветовых индексов, которые имеют важное влияние на отображение изображения, а 0 указывает, что это важно;
12-15: 4-байтовый biWidth, здесь 0x00000280, что составляет 640 десятичных знаков, а ширина изображения выражается в пикселях. Проверьте информацию о файле, чтобы убедиться, что оно правильное;
16-19: 4-байтовый biHeight, здесь 0x000001E0, что составляет 480 десятичных знаков, используя пиксели для представления высоты изображения, проверьте правильность информации о файле, в то же время это положительное число, указывающее, что изображение инвертировано, то есть данные изображения Расположен от нижнего левого угла до верхнего правого угла;
1c-1d: 2-байтовый biBitCount, значение 0x0008, то есть 8 означает, что каждый пиксель представлен 8 битами, и всего имеется 256 цветов;
22-25: 4-байтовый biSizeImage, размер изображения, значение 0x0004B000, десятичное значение 307200, из вышеприведенных bfSize (размер файла) и bfOffBits (заголовок файла к смещению данных) 308278 и можно получить 1078, biSizeImage = bfSize-bfOffBits, то есть размер изображения = смещение размера файла;
26-29: 4-байтовый biXPelsPerMeter, горизонтальное разрешение, значение 0x00000EC4, десятичное значение 3780;
2a-2d: 4-байтовый biYPelsPerMeter, разрешение по вертикали, значение 0x00000EC4, десятичное значение 3780;
2e-31: 4 байта biClrUsed, используемый номер индекса цвета, значение 0x00000100, десятичное 256, в соответствии с выводом, полученным 1c-1d;
32-35: 4-байтовый biClrImportant, важный индекс цвета, значение 0x00000100, 256 знаков после запятой;
Согласно приведенному выше обсуждению, мы можем знать, что biBitCount равен 24 (0x18), bfOffBits равен 54 (0x36), то есть палитры нет, а заголовок битовой информации находится рядом с данными изображения.
Данные в палитре представляют собой группу из 4 байтов каждая, представляющую значения синего, зеленого, красного и альфа-канала. Возьмите первое изображение в качестве примера:
индекс | синий | зеленый | красный | Alpha |
0 | 01 | 10 | 37 | 00 |
1 | 00 | 10 | 49 | 00 |
2 | 00 | 18 | 44 | 00 |
3 | 01 | 1D | 58 | 00 |
Обратите внимание, что biHeight здесь является положительным числом, указывающим, что изображение инвертировано, начиная с нижнего левого угла до верхнего правого угла и упорядочено в основной последовательности.
Если это 24-битная цветовая карта, она размещается в порядке BGR, а 32-битная цветовая карта располагается в соответствии с BGRAlpha.
Минимальная единица сканирования по умолчанию в Windows составляет 4 байта. Если выравнивание данных удовлетворяет этому значению, скорость сбора данных значительно возрастает. Следовательно, изображение BMP соответствует этому требованию, требуя, чтобы длина каждой строки данных была кратна 4, если этого недостаточно, требуется заполнение битами (заполнение 0), чтобы обеспечить быстрый доступ по линии. В этом случае размер данных растрового изображения не обязательно равен ширине х высоте х байтов на пиксель, поскольку каждая строка также может иметь заполнение 0.
Среди них BPP - это количество бит на пиксель (Bits Per Pixel), то есть biBitCount, Width - ширина, а единица - пиксель или bfWidth.
В нашем примере BPP равен 8, а ширина - 480, что кратно 4, что означает отсутствие заполнения. Давайте посчитаем:
Затем возьмите в качестве примера 24-битное цветное изображение второго изображения выше, согласно данным, которые вы можете получить:
- biBitCount=0x0018=24;
- bfWidth=0x000001c6=454;
- bfHeight=0x00000053=83;
- biSizeImage=0x0001BA3c=113212;
Согласно расчету без заполнения: 454 * 83 * 3 = 113046 байт, что на 166 байт отличается от реального значения.
Согласно формуле заполнения, каждая строка имеет 4 * (24 * 454/32) = 1364 байта, реальные данные имеют 454 * 3 = 1362 байта, что означает, что каждая строка заполнена 2 байтами 0, всего 83 строки, Всего было заполнено 83 * 2 = 166 байт, что подтвердило наше обсуждение.
Тогда размер растровых данных:
В этом случае после сканирования строки данных последние несколько байтов могут быть заполнены 0, и их необходимо пропустить:
Проще говоря, растровое изображение - это изображение, состоящее из одного пикселя. Распространенными форматами изображений являются jpg (jpeg), png и bmp, все они растровые.
1.2 Вектор
Векторная графика - это геометрические примитивы, основанные на математических уравнениях, таких как точки, линии или многоугольники в компьютерной графике для представления изображений.
---- Википедия
Векторная диаграмма отличается от растрового изображения тем, что она не состоит из одного пикселя, а ее суть - математическое выражение. Файл формата svg представляет собой векторную диаграмму.
1.3 Разница между растровым изображением и векторной диаграммой
Наиболее очевидная разница между растровым изображением и векторной диаграммой:Мозаика появится, когда растровое изображение будет увеличено, и качество изображения ухудшится; векторную графику можно бесконечно увеличивать без снижения качества изображения.
Источник изображения: Википедия
На рисунке a представляет исходное изображение. Если a - векторная диаграмма, когда изображение в красной рамке увеличивается, эффект аналогичен b, и вы можете видеть, что качество изображения не снизилось; если a - растровое изображение, когда изображение в красной рамке увеличивается , эффект похож на c, и отчетливо видны один за другим маленькие квадратики, качество изображения значительно снижается.
1.4 Как выразить цвет пикселей
Выберите растровое изображение и увеличьте масштаб до 3200% в PS, как вы можете видеть ниже:
Вы можете ясно видеть один за другим маленькие квадратики, которые являются пикселями.
Пиксель имеет определенное положение и значение цвета. Цвет каждого пикселя представлен комбинацией RGB или значением серого.
В этом разделе основное внимание уделяется тому, как представлять цвета.
По битовой глубине растровые изображения можно разделить на 1, 4, 8, 16, 24 и 32-битные изображения. Битовая глубина здесь относится к количеству битов, используемых для представления цвета пикселя. Если пиксель представлен одним битом цвета, его битовая глубина равна 1, если пиксель представлен четырьмя битами цвета, его битовая глубина равна 4 и так далее.
- Если пиксели изображения1 битДля представления цвета этот бит равен 0 или 1, тогда он может представлять 2 1 Два цвета, а именно черный и белый, фото чисто черно-белое фото.
Если пиксели изображения8 битДля представления цвета эти восемь битов могут представлять 2 8 Цвета, 256. Такой образобычно(Есть исключения, я расскажу об этом ниже) называетсяОттенки серого, Потому что эти 256 цветов являются черным и белым серым (серый здесь означает 244 различных степени серого). Изображение в градациях серого выглядит следующим образом:
Если пиксели изображения24 битДля представления цвета эти 24 бита могут представлять 2 24 Есть более 16 миллионов цветов. Это изображение называетсяКарта истинного цвета. Эти 24 бита разделены на три канала по 8 бит, которые представляют красный, зеленый и синий соответственно. Это метод цветового кодирования RGB, который использует оптическую интенсивность трех основных цветов - красного, зеленого и синего - для представления цвета. Это наиболее распространенный метод кодирования растровых изображений, который можно напрямую использовать для отображения на экране.
2. Формат файла BMP
2.1 Введение в BMP
BMPВзято из сокращения bitmap Bitmap, также известного как DIB (device-independent bitmap), является независимым от дисплеябитовая картаФормат файла цифрового изображения. Обычно встречается в операционных системах Microsoft Windows и OS / 2. ---- Википедия
Формат BMP - это формат, представляющий растровое изображение.
Разрядность пикселей в изображениях формата BMP может быть 1, 4, 8, 24, 32, но обычные битовые глубины BMP по-прежнему равны 8 и 24.
Выберите изображение BMP, щелкните правой кнопкой мыши, чтобы открыть Свойства -> Детали, вы можете просмотреть его битовую глубину.
Когда битовая глубина файла BMP равна 8, это не обязательно означает, что изображение в оттенках серого, как показано ниже:
Разрядность этого изображения составляет 8, но это не изображение в оттенках серого, мы его называемПсевдоцветная карта。
Следующее изображение представляет собой полноцветное изображение с битовой глубиной 24, которое можно использовать для сравнения:
Видно, что качество изображения в истинных цветах значительно выше, чем у изображения в ложных цветах.
2.2 Составление формата файла BMP
Файл BMP состоит из следующих четырех частей:
- Заголовок растрового файла (BITMAPFILEHEADER)
- Заголовок растровой информации (BITMAPINFOHEADER)
- Таблица цветов * (RGBQUAD [])
- Массив пикселей (Pixels [] [])
Поскольку таблица цветов не обязательно существует, добавьте * Описание.
Кратко объясним информацию о каждой части ниже:
2.2.1 Заголовок растрового файла
Используется для описания состояния всего файла BMP, включая такую информацию, как тип, размер файла и начальная позиция растрового изображения файла BMP.
Заголовок файла растрового изображения имеет в общей сложности14 байт。
2.2.2 Заголовок информации о растровом изображении
Используется для описания такой информации, как размер растрового изображения.
Общий заголовок информации о растровом изображении40 байт。
2.2.3 Таблица цветов
Он используется для описания цвета в растровом изображении.Он имеет несколько элементов таблицы.Каждый элемент таблицы представляет собой структуру типа RGBQUAD, которая определяет цвет.
Вы можете видеть, что запись в таблице RGB4 байта。
Количество данных структуры RGBQUAD в таблице цветов определяется заголовком информации о битовой карте.biBitCountЧтобы убедиться:
- Когда biBitCount = 1, 4, 8, есть 2, 16 и 256 записей соответственно.
- При biBitCount = 24 элемент таблицы цветов отсутствует.
2.2.4 Массив пикселей
l Запишите значение каждого пикселя растрового изображения, порядок записи - слева направо в пределах строки развертки и снизу вверх между строками развертки. Количество байтов, занимаемых значением пикселя растрового изображения, выглядит следующим образом:
Когда biBitCount = 1, 8 пикселей занимают 1 байт;
Когда biBitCount = 4, 2 пикселя занимают 1 байт;
Когда biBitCount = 8, 1 пиксель занимает 1 байт;
Когда biBitCount = 24, 1 пиксель занимает 3 байта: R, G, B;
Windows оговаривает, что количество байтов, занимаемых строкой сканирования, должно быть кратно 4 (то есть в единицах длины), и если этого недостаточно, оно заполняется 0.
Три, пример формата файла BMP анализа
Откройте файл grey8.bmp с помощью notepad ++, выберите плагин -> HEX-Editor -> Просмотреть в HEX, если нет, вы можете выбрать управление плагином для установки, окончательный интерфейс выглядит следующим образом:
Это необходимо для отображения информации об изображении в шестнадцатеричной форме, шестнадцатеричное число занимает 4 бита, поэтому одна строка представляет шестнадцать байтов.
Прежде чем анализировать файл BMP, мы должны сначала понять порядок хранения данных:
В файле BMP, если часть данных должна быть представлена несколькими байтами, порядок байтов данных следующий: «младший адрес для хранения младших данных и высокий адрес для хранения высоких данных». Например, порядок хранения данных 0x1756 в памяти:
Этот метод хранения называется прямым порядком байтов (little endian), а противоположный - big endian.
3.1 Заголовок растрового файла
Красный прямоугольник на рисунке ниже - это заголовок файла растрового изображения:
Первые два байта (0, 1) указывают тип файла растрового изображения, а именно 0x4d42 Представляет тип BMP, который совпадает с Первые два байта в DUMP обозначают один и тот же символ BM. 。
Следующие четыре байта (2, 3, 4, 5) указывают размер файла растрового изображения, а именно 0x0000c436 Представляет размер файла точечного рисунка, преобразованного в десятичное значение 50230, мы открываем свойства grey8.bmp и обнаруживаем, что его размер действительно составляет 50230 байт:
Следующие два байта (6, 7) - это зарезервированные слова файла битовой карты 1, которые должны иметь значение 0, то есть 0x0000.
Следующие два байта (8, 9) - это зарезервированное слово 2 файла битовой карты, которое должно быть 0, то есть 0x0000.
Последние четыре байта (a, b, c, d) являются начальной позицией данных растрового изображения, и его значение равно 0x00000436, которое преобразуется в десятичное число 1078. Он представляет собой количество байтов от начала файла до массива пикселей, то есть его размер: заголовок файла растрового изображения (14 байтов) + заголовок информации о растровом изображении (40 байтов) + [256 записей * 4 слова Раздел], потому что запись в таблице цветов не обязательно существует, поэтому используйте [] Приложите. В изображении grey8.bmp есть таблица цветов, поэтому начальное значение растровых данных - 1078.
3.2 Заголовок информации о растровом изображении
Первые четыре байта (e, f в первой строке, 0, 1 во второй строке) представляют количество байтов, занятых заголовком информации о битовой карте, то есть 0x00000028, что при преобразовании в десятичное число равно 40;
Последние четыре байта (2, 3, 4, 5 во второй строке) - это ширина растрового изображения в пикселях, то есть 0x00000100, которое преобразуется в десятичное число 256, что согласуется с реальной ситуацией.
Последние четыре байта (6, 7, 8, 9 во второй строке) - это высота растрового изображения в пикселях, то есть 0x000000c0, которое преобразуется в десятичное 192, что согласуется с реальной ситуацией.
Последние два байта (a, b во второй строке) - это уровень целевого устройства, который должен быть 1, а его значение - 0x0001, что соответствует.
Последние два байта (c, d во второй строке) - это количество битов, необходимых для каждого пикселя, и их значение равно 0x0008, что соответствует фактической битовой глубине.
Последние четыре байта (e, f во второй строке, 0, 1 в третьей строке) указывают тип сжатия битовой карты, и его значение равно 0x00000000, то есть без сжатия.
Последние четыре байта (2, 3, 4, 5 в третьей строке) - это размер растрового изображения, в байтах, значение 0x0000c000, преобразованное в десятичное число 49152, по сути, для вычисления размера массива пикселей, вычислить способ:
b i S i z e I m a g e = Фигура Нравиться из ширина степень ∗ высоко степень ∗ Кусочек глубокий степень / 8 biSizeImage = ширина изображения * высота * битовая глубина / 8 b i S i z e I m a g e = Фигура Нравиться из ширина степень ∗ высоко степень ∗ Кусочек глубокий степень / 8
в изображении grey8.bmp
b i S i z e I m a g e = 256 ∗ 192 ∗ 8 / 8 = 49152 biSizeImage=256*192*8/8=49152 b i S i z e I m a g e = 2 5 6 ∗ 1 9 2 ∗ 8 / 8 = 4 9 1 5 2
Последние четыре байта (6, 7, 8, 9 в третьей строке) представляют горизонтальное разрешение растрового изображения, и его значение равно 0x00002e23.
Последние четыре байта (a, b, c, d в третьей строке) представляют разрешение битовой карты по вертикали, и его значение равно 0x00002e23.
Последние четыре байта (e, f в третьей строке, 0, 1 в четвертой строке) представляют количество цветов в таблице цветов, фактически используемых растровым изображением, и его значение - 0x00000000, обычно равное 0.
Последние четыре байта (2, 3, 4, 5 в четвертой строке) представляют количество важных цветов в процессе отображения растрового изображения, и его значение равно 0x00000000, как правило, равному 0.
3.3 Таблица цветов
Когда битовая глубина равна 24, таблица цветов отсутствует, а за заголовком информации о растровом изображении следует массив пикселей;
Когда битовая глубина не 24, есть таблица цветов, а есть 2 Битовая глубина Каждый элемент таблицы цветов занимает 4 байта.
В желтом поле, как показано на рисунке ниже, находится 256 элементов таблицы цветов с общим размером 256 * 4 байта (показана только его часть):
Поскольку каждый элемент таблицы цветов занимает 4 байта, мы делим элемент таблицы цветов на один элемент таблицы цветов, то есть черный ящик, в единицах по 4 байта.
Поскольку grey8.bmp является изображением в градациях серого, элементы его таблицы цветов основаны на правилах.
В записи таблицы цветов три компонента RGB равны, а четвертый компонент равен 0; во всей таблице цветов значение первых трех компонентов записи таблицы цветов увеличивается на 1 от 0 до 255. Фактически, rgb (0,0,0) представляет черный, rgb (255,255,255) представляет белый, rgb (x, x, x) (x не равно 0 или 255, x является целым числом от 0 до 255) представляет разные градусов серого.
Когда файл BMP представляет собой псевдоцветное изображение, его битовая глубина составляет 8 бит, но нет правила, которому следует следовать. Например, первый элемент таблицы цветов - это rgb (1,22,3,0), второй элемент таблицы цветов - это rgb (10,89,90,0) и т. Д. Это не черный, белый и серый цвета, а другие цвета. Однако они могут отображать только до 256 цветов, что намного меньше, чем 16 миллионов цветов полноцветных изображений. Поэтому такие изображения называются псевдоцветными изображениями.
3.4 Массив пикселей
После таблицы цветов (или заголовка информации о растровом изображении) идет массив пикселей. В этом примере битовая глубина равна 8, поэтому один байт представляет один пиксель. Как определить цвет этого пикселя? Диапазон одного байта составляет [0,255], теперь вы должны понять! Найдите соответствующий элемент таблицы цветов в соответствии со значением этого байта, и цвет, соответствующий этому элементу таблицы цветов, является цветом этого пикселя. Вот как это работает для BMP с таблицами цветов.
Для изображения с истинным цветом его битовая глубина равна 24, и один пиксель, естественно, соответствует трем цветовым компонентам R, G и B, поэтому нет необходимости в таблице цветов, а для изображения с истинным цветом, если есть таблица цветов, то есть более чем 16 миллионов элементов таблицы цветов, весь файл будет очень большим.
Три, эксперимент с кодом
3.1 Экспериментальная среда
- Операционная система: Windows 10
- Компилятор: Dev-cpp, Visual Studio 2017
3.2 Содержание эксперимента
Измените элементы таблицы цветов изображения в градациях серого gray8_test.bmp ниже на случайные значения и превратите исходное изображение в оттенках серого в псевдоцветное изображение.
3.3 Другая информация
Три структуры BITMAPFILEHEADER, BITMAPINFOHEADER и RGBQUAD находятся вwindows.hОпределено в
3.4 Код ключа
Поскольку код имеет подробные комментарии, он не будет здесь подробно объяснен.
- Прочтите соответствующую информацию:
- Используйте функцию случайных чисел для изменения элементов таблицы цветов
- Запишите прочитанную информацию в целевой файл
- Чтение и запись информации о пикселях, обратите внимание на четырехбайтовое выравнивание
3.5 Внимание! ! !
- Откройте файл в двоичном виде! ! ! ! ! ! !
- Обратите внимание, что количество байтов, занимаемых строкой пикселей, кратно 4. При чтении файла считайте больше 0 байтов, добавленных позже; при записи файла запишите еще 0 байтов, которые необходимо заполнить. В противном случае изображение может быть неупорядоченным.
3.6 Результаты
С помощью нашей программы генерируются следующие картинки, которые довольно красивы!
3.7 Полный код
Четыре, расширенный эксперимент
Примечания: Формула преобразования из RGB в шкалу серого: Серый = R * 0,299 + G * 0,587 + B * 0,114
Пять, справочные материалы
[2] Мультимедийные материалы по базовому курсу
[3] Введение в Википедии о «растровом изображении», «векторной диаграмме» и «формате BMP»
Читайте также: