Форматы графических файлов
Графический формат — это способ записи графической информации для хранения изображений (фотографий и рисунков). Форматы графических файлов бывают векторными и растровыми.
Растровые форматы представляют изображение в виде так называемой сетки пикселей (цветных точек). Что же касается векторного формата изображения, то он для построения графики использует элементарные геометрические фигуры: точки, сплайны, линии и многоугольники. Все объекты векторной графики являются изображениями математических функций. Такой подход к представлению изображения позволяет увеличивать масштаб картинки без потери качества, чего нельзя сказать о растровой графике. Рассмотрим наиболее распространенные форматы графических файлов.
Содержание
- JPEG (JPG)
- PNG
- GIF
- TIFF
- PSD
- Векторные форматы графических файлов
JPEG (JPG)
Этот растровый формат является самым популярным.
Как правило, он используется для хранения фотографий. Формат JPG использует ряд алгоритмов сжатия, за счет чего может наблюдаться ухудшение качества изображения. Данный формат применяется в разработке интернет-сайтов. Кроме того, современные фотоаппараты используют JPG для сохранения полученных снимков.
PNG
Формат PNG является растровым. Он использует сжатие без потерь по алгоритму Deflate, который изначально создавался для архиваторов. Этот формат преимущественно используется в веб-дизайне, так как в нем есть возможность сохранения прозрачного фона, что в веб-разработке играет большую роль.
GIF
Этот формат считается устаревшим, особенно после появления PNG. Его недостаток состоит в том, что этот формат для хранения изображения способен использовать лишь 256 цветов. Для полиграфии этого будет недостаточно. Однако характерной особенностью формата GIF является поддержка анимации. Сегодня, даже после появления технологии Flash, на просторах всемирной паутины можно встретить огромное количество анимированных баннеров в формате GIF.
TIFF
TIFF – формат для хранения растровых изображений с большой глубиной цвета. Данный формат используется для сканирования документов, распознавания текста и отправки факсов. Кроме того, TIFF довольно часто применяется в полиграфии.
PSD
Данный формат использует сжатие без потерь. Создан он специально для программы Adobe Photoshop для поддержки всех ее возможностей. Преимуществом формата PSD является возможность сохранения слоев, прозрачности, частичной прозрачности и векторных элементов. Стоит отметить, что файлы, сохраненные в этом формате, имеют очень большой объем, а полноценно работать с ними с помощью каких-либо сторонних программ невозможно.
Векторные форматы графических файлов
Как правило, каждая программа, работающая с векторной графикой, поддерживает собственный формат изображений. Также нужно отметить, что векторная графика бывает двухмерной и трехмерной.
Для работы с двухмерной графикой может использоваться программный пакет Adobe Illustrator, у которого формат для сохранения изображений называется AI.
Программа CorelDRAW использует формат CDR.
Что же касается трехмерной графики, то для обмена между приложениями был разработан формат COLLADA. С ним могут работать такие программы, как 3ds Max, Maya, Cinema 4D и многие другие. Кроме того, последняя версия программы Adobe Photoshop поддерживает работу с трехмерной графикой.
Напоследок стоит отметить, что в этой статье мы рассмотрели далеко не все форматы графических файлов, а постарались рассказать лишь о наиболее распространенных. Помимо перечисленных существуют такие форматы, как BMP, ICO, MrSID, PCX, TGA, XPS, PNM, U3D, EPS, STL, X и многие другие.
ICO — формат файла изображения
.ICO вариант №
Файлы с расширением ICO представляют собой типы файлов изображений, используемые в качестве значков для представления приложения в [Microsoft Windows] (https://www.microsoft.com/en-us/windows). Они бывают разного размера, поддерживают цвет и разрешение в соответствии с требованиями дисплея.
Другим подобным форматом файла изображения в Microsoft Windows является CUR для представления курсора и определения активной области в заголовке изображения. В MacOS форматы файлов ICNS служат той же цели, что и файлы ICO. Несколько онлайн-сайтов, а также приложений предоставляют возможность создания таких файлов и преобразования других форматов изображений, таких как [BMP] (/ru/image/bmp/), [PNG] (/ru/image/png/) и т. д., в формат файла значка. Официальным зарегистрированным IANA типом интернет-носителя для файлов ICO является image/vnd.microsoft.icon.
Краткая история
Иконки были представлены с запуском Microsoft Windows 1.0. Они были размером 32×32 и были монохромными. С появлением win32 была введена поддержка изображений значков в истинном цвете с размером до 256×256 пикселей. Windows XP была первой, которая обеспечила поддержку 32-битных цветных изображений значков, позволяя добавлять к значку полупрозрачные области, такие как тени, сглаживание и эффекты, подобные стеклу.
Microsoft рекомендует только размеры значков до 48×48 пикселей для Windows XP. Windows Vista добавила в проводник Windows представление значков размером 256 × 256 пикселей, а также поддержку сжатого формата [PNG] (/ru/image/png/). Пользователям, использующим более высокие разрешения и режимы с высоким DPI, рекомендуются более крупные форматы значков (например, 256 × 256).
Формат файла ICO
Один файл ICO состоит из одного или нескольких небольших изображений разных размеров и глубины цвета. Наличие изображений нескольких размеров для соответствующего масштабирования при разных разрешениях экрана. Все значения в файлах ICO/CUR представлены в порядке байтов little-endian.
Файл ICO состоит из заголовка значка, каталога значков,
| Поле | Описание |
|---|---|
| Заголовок значка | Хранит общую информацию о файле ICO. |
| Directory[1..n] | Хранит общую информацию о каждом изображении в файле. |
| Иконка №1 | Фактические «данные» для первого изображения в старом формате AND/XOR DIB или более новом формате PNG |
| … | |
| Icon #n | Данные для последнего изображения значка |
Заголовок
| Смещение | Размер (в байтах) | Назначение |
|---|---|---|
| 0 | 2 | Зарезервировано. Всегда должен быть 0. |
| 2 | 2 | Указывает тип изображения: 1 для изображения значка (.ICO), 2 для изображения курсора (.CUR). Другие значения недействительны. |
| 4 | 2 | Указывает количество изображений в файле. |
Справочник
Каталог, содержащийся в файле ICO, представленный как структура ICONDIR, содержит структуру ICONDIRECTORY для каждого изображения в файле. За ним следует непрерывный блок всех растровых данных изображения. Это показано ниже.
| Смещение | Размер | Описание |
|---|---|---|
| 0 (0) | 1 | Ширина, должна быть 0, если 256 пикселей |
| 1 (1) | 1 | Высота, должна быть 0, если 256 пикселей |
| 2 (2) | 1 | Количество цветов, должно быть 0, если цветов больше 256 |
| 3 (3) | 1 | Зарезервировано, должно быть 0 |
| 4 (4) | 2 | Цветные плоскости в формате . ICO должны быть 0 или 1, или точка доступа X в формате .CUR |
| 6 (6) | 2 | Бит на пиксель в формате .ICO или точка Y в формате .CUR |
| 8 (8) | 4 | Размер растровых данных в байтах. |
| 12 (C) | 4 | Смещение в файле. |
Использованная литература
- ICO — Википедия
- IANA — vnd.microsoft.icon
форматов изображений | ЕКА/Хаббл | ESA/Hubble
Изображения в архиве изображений могут быть загружены в семи различных размерах и качествах.
Вы можете использовать все бесплатно, если соблюдаете простые правила, описанные в нашей информации об авторских правах.
| Тип изображения | Формат файла | Ширина | Высота | Нерезкая маска | Качество JPEG | Корр. цвета |
| ньюсмини | JPEG | 60 | г | 80 | 45 | г |
| голени | JPEG | 95 | г | 80 | 45 | г |
| большие пальцы | JPEG | 122 | г | 80 | 45 | г |
| обои для пальцев | JPEG | 122 | 92 | 80 | 45 | г |
| новости | JPEG | 180 | г | 80 | 53 | г |
| горшечная среда | JPEG | 220 | 140 | 25 | 60 | г |
| thumb350x | JPEG | 350 | 223 | 25 | 60 | г |
| thumb300y | JPEG | х | 300 | 70 | 60 | г |
| средний | JPEG | 320 | г | 70 | 60 | г |
| экран640 | JPEG | 640 | 360 | 25 | 60 | г |
| видеокадр | JPEG | 640 | г | 25 | 60 | г |
| портрет1080 | JPEG | 960 | 1080 | 25 | 85 | г |
| Обои1 | JPEG | 1024 | 768 | 25 | 80 | г |
| экран | JPEG | 1280 | г | 25 | 60 | г |
| Обои2 | JPEG | 1280 | 1024 | 25 | 80 | г |
| обои3 | JPEG | 1600 | 1200 | 25 | 80 | г |
| баннер1920 | JPEG | 1920 | 900 | 25 | 45 | г |
| обои4 | JPEG | 1920 | 25 | 80 | г | |
| Обои5 | JPEG | 2048 | 1536 | 25 | 80 | г |
| масштабируемый | Мозаичный JPEG | Полноразмерный (черепичный) | Полноразмерный (черепичный) | |||
| публикацияjpg | JPEG | 4000 | г | 0 | 90 | г |
| публикация tiff | ТИФФ | 4000 | г | |||
| публикация tiff10k | ТИФФ | 10 000 | г | |||
| публикация tiff25k | ТИФФ | 25 000 | г | |||
| публикация tiff40k | ТИФФ | 40 000 | г | |||
| большой | JPEG | Полноразмерный | Полноразмерный | 0 | 80 | |
| оригинал | TIF (в некоторых случаях JPEG или GIF) | Полноразмерный | Полноразмерный | |||
| пл_экран | JPEG | 1280 | г | 25 | 60 | г |
| pl_thumbs | JPEG | 122 | г | 80 | 45 | г |
Новые форматы изображений в Интернете
ID
Блог гражданина
Заголовок
26 июля 2022 г.
|
Дэн Мориарти
Body
Несмотря на все изменения и инновации за последние 20 лет, форматы, которые мы используем для обмена изображениями в Интернете, почти не изменились.
Но изменения уже здесь! Давайте кратко рассмотрим форматы изображений, которые мы все используем сейчас, и узнаем о новых форматах, которые мы могли бы использовать вместо них.
Paragraphs
Старые форматы изображений
Любой, кто имеет дело с Интернетом, должен быть знаком с «большой тройкой» форматов изображений — JPG, GIF и PNG. Мы используем их, чтобы делиться изображениями в социальных сетях, отправлять вложения по электронной почте друзьям и родственникам, загружать изображения на наш веб-сайт или в блог или создавать библиотеки изображений для работы и личной жизни.
Как человек, работающий над веб-сайтами более 20 лет, я не помню времени, когда у нас не было этих опций, и я уверен, что многие из вас думают так же. Эти форматы изображений «старой школы» действительно выдержали испытание временем, особенно если учесть, сколько всего еще появилось и ушло за тот же период времени.
Чтобы быстро напомнить, давайте обсудим, что представляют собой эти три формата и как они используются сегодня.
JPG
Формат «Joint Photographic Experts Group» (.jpg или .jpeg) существует с 1992. Этот формат позволял всем сохранять большие изображения высокого качества в разы меньше, чем в других форматах, таких как TIF или EPS. Были (и есть) недостатки в его формате сжатия, в первую очередь в том, что качество изображения страдает при сильном сжатии, и каждый раз, когда JPG открывается и редактируется (повторно сохраняется), качество снижается. Похоже на копирование кассеты с существующей ленты (если вы достаточно взрослый, чтобы помнить это). Это формат с потерями.
Хотя формат JPG и не идеален для печати (хотя со временем это изменилось), он быстро стал идеальным выбором для людей, желающих обмениваться изображениями через Интернет, где размер и пропускная способность имеют значение. И что удивительно, даже несмотря на то, что мы перешли от коммутируемых модемов к волоконно-оптическим сетям, размер по-прежнему имеет значение.
Изображения JPG можно сохранять и обслуживать постепенно, что означает, что пользователи получают предварительный просмотр изображения более низкого качества, даже когда оно все еще полностью обрабатывается. И изображения JPG могут содержать метаданные об изображениях (EXIF). Однако нет поддержки анимации или прозрачности, а JPG не так хорош при рендеринге изображений со шрифтом.
GIF
«Формат графического обмена» (.gif) существует дольше, чем JPG (с 1987 года). Формат GIF изначально рекомендовался для значков, иллюстраций и других нефотографических изображений. Кроме того, это был единственный формат, который поддерживал «анимацию» в Интернете до Flash и некоторых более новых форматов. Не сложная или качественная анимация, а элементарная серия изображений с каким-то эффектом движения.
Он почему-то застрял, даже после того, как новые форматы были разработаны для его замены. Сегодня основная цель GIF-файлов — это анимированные GIF-файлы — эти забавные, раздражающие, вездесущие части досок объявлений, текстовых сообщений и везде, где вы хотите показать какую-то дешевую, быструю анимированную… вещь. Основной ингредиент интернет-мемов.
Но более новые форматы изображений, обсуждаемые ниже, с поддержкой анимации, должны в конечном итоге полностью заменить GIF и навсегда отказаться от этого (ошибочно произносимого) формата.
PNG
Он не поддерживает анимация, и (таким образом) еще не полностью исключил использование файлов GIF. Сегодня он по-прежнему широко используется в Интернете для всех мыслимых типов изображений. можно использовать для фотографий, иллюстраций, фона, значков и т. д. В отличие от JPG, это формат без потерь, то есть данные не теряются при сжатии.
Главным преимуществом использования PNG является его встроенная способность поддерживать прозрачность. Если вы хотите загрузить изображение с прозрачным фоном (и универсальной поддержкой браузера), вам нужно использовать файл PNG.
Новые форматы изображений
WebP
Google приобрел этот новый формат изображений под названием WebP еще в 2010 году и с тех пор работает над его улучшением. Основным преимуществом этого нового формата является гораздо более высокая скорость сжатия при аналогичном (или улучшенном) качестве JPG — размер файла на 25–50 % меньше!
Учитывая масштаб библиотек изображений, поддерживаемых Google, сокращение размера файла на 25 % или более дало компании большие преимущества с точки зрения хранения файлов и энергии, необходимой для предоставления изображений публике (повышение производительности сайта).
И Google призывает всех веб-разработчиков перейти на использование WebP для повышения производительности сайта.
WebP поддерживается последними версиями всех основных браузеров (Chrome, Safari, Firefox и Microsoft Edge), что делает его одним из наиболее жизнеспособных вариантов нового и улучшенного формата изображения. Он также поддерживает альфа-прозрачность и анимацию, преимущества, которые ранее имели только файлы GIF и PNG. И он также поддерживает метаданные EXIF для изображений.
Есть несколько недостатков. WebP поддерживает только 8-битный цвет, а это означает, что он не может поддерживать HDR (расширенный динамический диапазон) и изображения с широкой цветовой гаммой. Он не поддерживает прогрессивные загрузки, такие как JPG. А для сайтов, где изображения генерируются автоматически (например, CMS), им может потребоваться больше времени для обработки изображений по сравнению с JPG (что сводит на нет некоторые преимущества в производительности) или в настоящее время отсутствует возможность сохранять изображения в формате WebP.
Но это все еще очень интересный новый формат, который сегодня можно использовать на большинстве производственных объектов. Вероятно, единственная причина рассмотреть что-то еще на данный момент — это обещание нашего следующего формата, AVIF.
АВИФ
AVIF был впервые выпущен в 2019 году как формат изображения с открытым исходным кодом, основанный на видеоформате AV1. Это новейший из форматов изображений, которые мы обсуждаем здесь сегодня, но один из самых многообещающих.
Подобно WebP, AVIF обеспечивает превосходное сжатие изображений (с повышенным качеством изображения) по сравнению со стандартными изображениями JPG. Он также поддерживает альфа-прозрачность, анимацию и метаданные изображения.
AVIF каким-то образом улучшает уровни сжатия и качества изображения WebP, однако предлагает еще большее сокращение размера файла — на 50% меньше, чем сопоставимые JPG. И в отличие от WebP, AVIF поддерживает 12-битный цвет, что обеспечивает высокий динамический диапазон и широкую цветовую гамму изображений.
Будучи открытым исходным кодом, AVIF может использоваться другими службами без лицензионных отчислений. Но, учитывая его новизну и отсутствие такой гигантской корпорации, как Google, поддержка AVIF в браузерах не так широка, как для WebP. В настоящее время он поддерживается только Chrome и Firefox.
Еще одним недостатком может быть время для динамического создания изображений AVIF в CMS или другой программе. Подобно WebP, их рендеринг может занять больше времени, чем JPG, что сводит на нет некоторые преимущества файлов меньшего размера. Однако это быстро улучшается, и в ближайшем будущем это должно стать меньшей проблемой.
HEIF и HEIC
Формат HEIF (высокоэффективный формат файла изображения) был представлен в 2015 году как новый формат для изображений и «последовательностей изображений», таких как серия фотографий или «живые» фотографии. Более новый формат сохраняет изображения со значительно меньшим размером файла, чем JPG, а также обещает лучшее качество изображения (16-битный цвет).
AVIF основан на HEIF.
Apple приняла этот формат в 2017 году для изображений, сохраняемых на iPhone и в пространстве iCloud, назвав его форматом HEIC и сделав его более широко используемым во всей своей экосистеме. По состоянию на 2022 год до сих пор нет веб-браузеров, поддерживающих его (даже браузер Safari от Apple!), что делает его бесполезным на веб-сайтах.
SVG
Я подумал, что нужно также добавить краткое упоминание о формате SVG.
Формат SVG (масштабируемый векторный формат) вовсе не новинка. Он существует с 1999 года. Но он не так широко используется, как наши предыдущие три, и в нем все еще есть немного «запаха новой машины». Теперь, когда его поддерживают все современные браузеры, нет никаких причин не использовать формат SVG для всех ваших нефотографических изображений — логотипов, иллюстраций, значков и т. д. никогда не может использоваться для растровой фотографии. Никаких пикселей не задействовано. Он написан в коде XML, что означает, что его можно читать и использовать для любых целей, таких как перекрашивание изображения или его анимация посредством движения.
Однако главной его сверхспособностью является масштабируемость. В отличие от трех предыдущих форматов, вы можете увеличивать и уменьшать размер любого файла SVG без потери качества изображения. И, учитывая широкий диапазон размеров экрана и используемых устройств, иметь изображение, которое может изменять размер на лету, бесценно. Потребовалось много времени, чтобы получить широкую поддержку, но теперь, по крайней мере, небольшая часть каждого современного веб-сайта.
Использование более новых форматов изображений
Теперь, когда вы знаете больше о некоторых новых вариантах форматов изображений, как вы можете начать использовать WebP или AVIF на своих веб-сайтах?
Сохранение и кодирование
Если вы используете CMS, возможно, вы можете перейти к следующему разделу. Но если вы делаете это вручную, первым шагом будет наличие программного обеспечения для сохранения и кодирования ваших изображений в этих форматах.
Если вы привыкли использовать такой инструмент, как Photoshop, вы можете скачать плагины для сохранения изображений в виде файлов WebP или AVIF. Существуют также онлайн-приложения и приложения для ПК, такие как Squoosh и GIMP, которые могут конвертировать ваши изображения в любой формат.
Для достижения наилучших результатов перед конвертированием начните с версии изображений самого высокого качества (вместо, например, сильно сжатого JPG). После сохранения изображений вы можете добавлять их на свои веб-сайты. Но с чего начать?
Сначала обратите внимание на поддержку браузера. Если вы используете WebP, вы можете быть уверены, что он будет поддерживаться всеми современными браузерами. Поддержка формата AVIF не так широка. В таких случаях вы можете использовать изображения AVIF с резервным вариантом JPG, используя элемент
Для Drupal и других CMS
Большинство систем управления контентом, таких как Drupal, имеют программное обеспечение для работы с мультимедиа.
Это означает, что как редактор сайта вы загружаете изображение в систему один раз, а затем можете размещать и повторно использовать это изображение на нескольких страницах. CMS, такую как Drupal, можно настроить для автоматической обработки, обрезки и изменения размера изображений в зависимости от того, где изображение должно отображаться на сайте или на каком устройстве и экране.
Начиная с Drupal 9.2, WebP поддерживается по умолчанию, а это означает, что ваши разработчики Drupal могут настроить изображения для автоматического изменения размера и отображения в формате PNG, JPG или WebP! WordPress добавил аналогичную поддержку в core.
Для браузеров, в которых отсутствует поддержка WebP, можно использовать модуль WebP для создания как WebP-версий всех ваших изображений, так и резервного формата изображения, где это необходимо (например, JPG). При совместном использовании мало причин не пытаться использовать WebP на своем сайте сегодня.
Поддержка AVIF в Drupal все еще находится в стадии разработки, но над этим работают умные умы.