С форматами изображений, казалось бы, всё предельно просто: вы создали картинку, логотип, анимацию или постер… Сохраняете работу, и всё — дело в шляпе, теперь можно использовать её как и где угодно… Так ведь? Увы и ах! Если бы один размер соответствовал всем системам форматов изображений, то жизнь была бы куда проще. Вместо этого нас озадачивают целым рядом частично понятных (в лучше случае) аббревиатур. Давайте честно: зачастую вы просто выбираете тот формат, о котором слышали (или использовали) ранее, думая, что это сработает. Затем всплывает сообщение типа: «Это устройство не поддерживает данный формат, пожалуйста, отправляйте в формате PNG», — и это только цветочки…
Какая боль! Но факт в том, что для столь разных форматов изображений есть причина. Некоторые из них лучше работают с определенными типами изображений. У каждого есть плюсы и минусы, преимущества и недостатки, ограничения и проблемы использования. Вам следует знать, что к чему, получить представление хотя бы об основах. Это поможет сохранить профессиональный имидж в будущем. Следует подумать над тем, как ваше изображение будет использоваться сейчас и в будущем. Масштабы, разрешения — все имеет значение.
Давайте рассмотрим некоторые популярные идеи и термины, наиболее востребованные форматы изображений, а также их плюсы и минусы. Экспертом после этого вы не станете, но зато сможете избежать головной боли после очередной дискуссии с вашими заказчиками или коллегами-дизайнерами.
В этой статье
1. Основы работы с файлами изображений
Любая графика, которую вы видите в Интернете, представляет собой файл изображения в определенном формате. Практически все, что вы видите напечатанным на бумаге, пластике или одежде, изначально было получено из файла изображения. Каждый формат имеет конкретное (иногда в нескольких вариантах) применение. Выбор правильного формата жизненно важен для получения изображения именно таким, каким хочется вам. Выбор неправильного формата может привести к серьезному снижению качества или даже к полной потери файла.
Существует два типа форматов изображений: файлы векторной графики и файлы растровой графики.
1.1. Векторная и растровая графика
Не вдаваясь в подробности, растровые файлы состоят из отдельных пикселей, каждый из которых содержит данные о цвете. Все изображение представляет собой невероятно сложную комбинацию разноцветных точек. По этой причине такие файлы имеют большой размер. Фотографии — это растровые изображения. Качество зависит от количества пикселей на дюйм (PPI, pixels per inch) и размеров изображения. Растровые изображения нельзя увеличить без потери четкости и качества.
Векторные файлы намного меньше, потому что не содержат данных о каждом пикселе в отдельности. Вместо этого они состоят из путей или связей (все основано на сложной математике, не заморачивайтесь). Благодаря такой системе векторные изображения можно масштабировать без потери качества. Это позволяет, например, обеспечить быстрый отклик изображения на увеличение при работе с веб-сайтами. Однако такие файлы по-иному распознают цветовые градации и смешивание (блендинг).
Ключ к правильному выбору — четкое понимание, что вы хотите создать и как планируете использовать готовое изображение. К фото для разового использования идеально подойдёт растровый формат с высокой детализацией, а для универсального логотипа с множеством областей применения — векторный.
1.2. Размер файла в форматах изображения
Ещё один важный аспект — размер (вес) файла. Размер файла — это объем места, который файл занимает в вашем хранилище (например на жестком диске компьютера). Файлы изображений, особенно растровые, содержат огромное количество информации. Важно извлечь из этого пункта урок, используя инструменты сжатия, такие как TinyPNG. Инструменты сжатия могут уменьшить размер файла до 80%, тем самым экономя ваше пространство, ваше время на передачу данных и позволяя отправлять файл онлайн. Это также важно для скорости браузера.
Здесь важно отметить, что существует два типа сжатия: «с потерями» и «без потерь». У обоих есть преимущества и недостатки:
- Сжатие без потерь: фактически никакая информация не удаляется. Это часто очень важно, когда нужно поддерживать качество.
- Сжатие с потерями: удаление ненужной информации и уменьшение сложности существующей информации.
Таким образом, сжатие с потерями может уменьшить размер файла намного больше, чем сжатие без потерь, но снизит качество.
1.3. Поддержка форматов изображения браузерами
Хотя некоторые форматы изображений чрезвычайно полезны, они могут поддерживаться не всеми браузерами. Если вы хотите загрузить какой-либо формат изображения на свой сайт, убедитесь, что он поддерживается хотя бы самыми популярными из них.
2. Новые форматы изображений в 2021 году
Интернет — динамично развивающаяся индустрия, новые форматы изображений появляются постоянно. Вот несколько самых важных из них, о которых вы услышите совсем скоро.
2.1. WebP
WebP от Google — это современный формат изображений, который обеспечивает лучшее сжатие как без потерь, так и с потерями для веб-изображений. Меньшие изображения делают Интернет быстрее, и WebP работает над созданием этих меньших изображений, но при этом сохраняет их выразительность. WebP также поддерживает набирающие популярность анимированные изображения и не останавливается на достигнутом. Он все еще в разработке, но, несомненно, обретет значимость.
Посетите Google Developers, чтобы узнать больше о формате WebP.
Плюсы:
- Скорость и размер
- Поддержка прозрачности
- Поддержка анимации
Минусы:
- Поддерживается не всеми браузерами
2.2. HEIF
HEIF расшифровывается как High-Efficiency Image File Format («высокоэффективный формат файлов») и фокусируется на оптимизации хранения изображений. Опять же, он пытается сохранить высокое качество, но в виде сжатых файлов меньшего размера. HEIF имеет 10 уровней сжатия на выбор, сверхбыстрое кодирование и декодирование, а также легкий вес, который не перегружает систему обработки.
Вы можете узнать больше о HEIF в Википедии.
Плюсы:
- Очень легкий
- Отличное качество
- Поддержка анимации
- Поддержка прозрачности
Минусы:
- Поддерживается не всеми браузерами
2.3. AVIF
Одним из перспективных форматов файлов изображений будущего считается AVIF, что означает AV1 Image File Format («Формат файлов изображений AV1»). По сути, это спецификация для хранения неподвижных и анимированных изображений, сжатых с помощью AV1, в формате файла HEIF. AV1 — это бесплатный формат кодирования видео, который большинство технических экспертов считают, следующим шагом в сжатии мультимедиа.
Плюсы:
- Самый легкий формат файла
- Поддержка прозрачности
- Поддержка анимации
- Высокий динамический диапазон
- Широкая цветовая гамма
Минусы:
- Поддерживается только Chrome и Firefox*
* Ожидается, что в ближайшее время он будет доступен во всех популярных браузерах, поскольку кодеки имеют открытый исходный код и его легче адаптировать
3. Растровые форматы изображений
Как мы упоминали выше, растровые изображения состоят из серии пикселей или точек, образующих изображение. JPEG, GIF и PNG — все это расширения растровых изображений. Обычно форматы растровых изображений используются для фотографий и цифровых изображений, а также для веб-графики и контента социальных сетей. Растровые файлы необходимо сохранять в размерах, в точности соответствующих их применению, поскольку попытка масштабирования повлияет на качество. Вот основные форматы файлов растровых изображений.
3.1. PNG
Portable Network Graphics отлично подходит для интерактивных веб-документов и проектов, но не подходит для печатных проектов. Причина популярности PNG для веб-сайтов заключается в том, что ваше изображение может быть на прозрачном фоне. То есть графика не обязательно должна располагаться на цветном блоке: вы можете видеть все, что находится за ним. Он также поддерживает больше цветов (до 16 миллионов) и обеспечивает четкое изображение. Это формат «без потерь», поэтому вы можете сохранить качество даже при сжатии. Идея PNG в том, чтобы улучшить GIF, и он быстро превращается в стандартный формат веб-изображений.
Идеально для: веб-графики
Плюсы:
- Встроенная прозрачность
- Отличная поддержка браузерами
- Сжимает без потери качества
- Отличный подбор цветов и высокое цветовое разрешение
Минусы:
- Не подходит для полиграфии
- Большие размеры файлов
3.2. JPEG
Вы уже слышали о JPEG: это, пожалуй, самый распространенный формат графических файлов, который сегодня можно найти в Интернете. JPEG — это Joint Photographic Experts Group («Объединенная группа экспертов по фотографии», по названию организации-разработчика). Обычно используемый для веб-проектов, особенно больших изображений, вроде баннеров, документов Microsoft Office, e-mail графики и полиграфии высокого разрешения, он также является популярным форматом для изображений цифровых камер. JPEG сжимает с потерями, поэтому качество будет уменьшаться вместе с весом файла — но вы можете этого даже не заметить. Есть возможность выбора степени сжатия, поэтому соотношение «размер-качество» в определенной степени под вашим контролем. Поскольку JPEG легко сжать, они идеально подходят для отправки по электронной почте, особенно если вы хотите передать клиентам превью незавершенной работы.
Идеально для: веб-графики, непрофессиональной печати, электронной почты, PowerPoint
Плюсы:
- Потенциально меньший размер файла, включая выбор степени сжатия — отлично подходит для отправки по электронной почте
- Отличная поддержка браузера, совместимая почти со всем программным обеспечением
- Высокое разрешение, идеально подходит для печати
- Быстрая загрузка
Минусы:
- Нет прозрачности
- Довольно тяжелый
- Сжатие с потерями: вы потеряете некоторую информацию и не сможете отредактировать её после сжатия
- Плоский формат изображения: внесённые изменения нельзя отменить
3.3. GIF
Формат растрового изображения GIF часто встречается в виде анимации, например, в мессенджере Facebook и Tumblr, в виде мемов в других социальных сетях, а также на сайтах в рекламных баннерах и e-mail изображениях. GIF расшифровывается как Graphic Interchange Format, и относится к категории сжатия «без потерь», хотя вы можете значительно уменьшить размер с помощью настраиваемых параметров информации об изображении и выборе количества цветов. Гифки обычно довольно маленькие, а быстрая загрузка имеет приоритет над высоким качеством изображения. Они имеют ограниченную цветовую емкость в 256 цветов, но при этом размер файла меньше, чем у других форматов растровых изображений. Как бы то ни было, хотя фотографии, как правило, состоят из тысяч цветов, в формате GIF они частенько выглядят неутешительно. Кроме того, гифки поддерживают прозрачность. Для анимации изображения GIF хранят все кадры и время в одном файле, что также может быть полезно.
Идеально для: анимации, маленьких иконок.
Плюсы:
- Отлично подходит для небольших анимаций
- Отличная поддержка браузерами
- Прозрачность
- Быстрая загрузка
Минусы:
- Цветопередача не более 256 цветов (не очень подходит для фотографий)
- Плоский формат, внесенные изменения нельзя отменить
- Размер несжатого файла может быть огромным
3.4. RAW
Из всех обсуждаемых до сих пор форматов есть вероятность, что вы никогда не слышали именно о RAW. RAW — это первое, наименее обработанное (raw, т. е. «сырое») изображение с цифровой камеры или сканера. После того, как вы загрузили и отредактировали свою фотографию, она сохраняется в других форматах, таких как JPEG. Поскольку «сырые» файлы содержит необработанные данные оригинальной фотографии, они особенно ценны тем, что вы всегда сможете вернуться к началу в процессе редактирования. Но его нужно преобразовать, прежде чем вы сможете перенести изображение или изменить его размер. По сути, это негатив фотографического изображения. Существует множество форматов RAW, некоторые из которых предназначены для определенных марок камер: например, NEF для Nikon или CRW для Canon. Фактически, у каждого производителя свой формат.
Идеально для: фотографии.
Плюсы:
- Имеет метаданные, необработанная, наиболее подробная версия файла
- Высокое качество
Минусы:
- Огромный размер файла
- Перед редактированием может потребоваться конвертация
- Принтеры не печатают изображения в формате RAW
3.5. TIFF
Tagged Image File Format или TIFF — это большой растровый файл со сжатием «без потерь». Вы можете сохранить, скопировать, повторно сохранить или даже сжать исходную форму. И преимущество в том, что можно восстановить оригинал даже после таких игр с данными. Однако это высокое качество дает большой размер файла, что не идеально для Интернета (время загрузки отпугнет пользователя).
Несмотря на способность изображений TIFF восстанавливать свое качество после манипуляций, вам следует избегать использования этого типа файлов в Интернете — он может загружаться бесконечно. Файлы TIFF обычно используются при сохранении фотографий для печати, в настольных издательских системах или архивных копиях.
Идеально подходит для: сохранения фотографий, настольных издательских систем (НИС), архивирования.
Плюсы:
- Формат «без потерь», но есть параметры сжатия
- Чрезвычайно высокое качество
- Можно сохранить с прозрачностью
- Поддерживается рядом приложений
Минусы:
- Огромный размер файла
- Не все приложения поддерживают многостраничные файлы TIFF
3.6. BMP
BMP — это стандартный проприетарный формат для Microsoft Windows. Это формат растрового изображения очень высокого качества (без сжатия), но, следовательно, большого размера файла. Он хорош для фотографий и других очень подробных изображений.
Идеально для: высококачественных детализированных изображений, таких как архивы, фотографии и т. д.
Плюсы:
- Качественный
- Поддерживается практически всеми системами
Минусы:
- Большой размер файла, без сжатия
- Не поддерживает CMYK
3.7. PSD
Ещё один проприетарный формат — это файлы PSD, которые создаются и сохраняются при помощи Adobe Photoshop. PSD означает «документ Photoshop». Этот формат используют многослойные форматы изображений, которые можно редактировать, а также могут включать векторные слои. После фотошопинга PSD можно экспортировать в другие форматы перед отправкой, передачей или печатью. Он также отлично подходят для анимации и редактирования видео.
Идеально для: редактирования перед конвертацией.
Плюсы:
- Может работать как с вектором, так и с растром
- Поддержка слоев, прозрачности, эффектов
- Чрезвычайная гибкость
- Работает с видео и анимацией.
- Функции веб-оптимизации и изменения размеров
Минусы:
- Только для работы в Photoshop
- Необходимо конвертировать перед отправкой или печатью
- Могут быть больших размеров
4. Векторные форматы изображений
Итак, мы рассмотрели ряд растровых форматов. Форматы векторных изображений хоть и не такие подробные, зато гораздо более гибкие. Это мастер-файлы, который можно использовать для различных целей и масштабировать в соответствии с вашими требованиями. Используется для цифровых иллюстраций, шрифтов, брендов, логотипов, значков и т. д. Форматы векторных изображений работают хорошо, потому что они не теряют деталей и остаются идентичными независимо от размера.
4.1. SVG
Scalable Vector Graphics («масштабируемая векторная графика») занимает одно из первых мест по популярности для веб-браузеров. Разработчики часто используют SVG для создания логотипов, значков и иллюстраций, поскольку он идеально подходит для двухмерной графики и может редактироваться в программах редактирования графики и текста. Он также имеет значительно меньшие размеры файлов, чем некоторые другие варианты, что делает его быстрым выбором для загрузки.
Идеально для: любой веб-графики
Плюсы:
- Очень легкий
- Может использоваться для анимации
- Может использоваться для интерактивной графики, инфографики и диаграмм
- Может быть добавлен непосредственно в HTML без ссылки на изображение
Минусы:
- Не лучший выбор для большой глубины цвета
- Не оптимизирован для печати
4.2. PDF
PDF-файлы Adobe довольно распространены. Вы, несомненно, видели их при загрузке изображений. PDF (Portable Document Format) позволяют просматривать формат без специального программного обеспечения с любого устройства, хотя у вас должна быть бесплатная программа для чтения Adobe PDF. Таким образом, это отличный инструмент для обмена графикой, поскольку он работает на всех устройствах, браузерах, приложениях и операционных системах. Adobe Illustrator и Photoshop могут экспортировать прямо в PDF, будучи готовыми к печати. Есть опции редактирования, но в качестве дополнения.
Идеально для: просмотра и / или печати многостраничных документов с различными элементами.
Плюсы:
- Готов к печати (предпочтительный формат для передачи на большинство принтеров)
- Отлично подходит для документов, содержащих текст и графику: плакаты, брошюры, листовки и журналы
- Легко загружать и распечатывать несколько страниц
Минусы:
- Опции редактирования являются дополнительными
- Может потребоваться конвертация в другие форматы
4.3. EPS
EPS или Encapsulated PostScript — это в первую очередь формат векторных изображений, хотя он может включать растровые данные. Файлы EPS можно открывать и создавать практически во всех программах для дизайна, включая CorelDraw и Adobe Illustrator. Они идеально подходят для создания графики с очень высоким разрешением для печати.
Идеально для: иллюстраций и рисунков.
Плюсы:
- Универсальный формат, просматриваемый во многих приложениях
- Может быть преобразован в растровую графику
- Автоматическое разрешение
Минусы:
- Редактирование ограничено определенными приложениями
- Некоторые принтеры не любят EPS
- Плохо поддерживается браузерами
4.4. AI
AI — это формат, используемый Adobe Illustrator. Он очень популярен среди дизайнеров, поскольку является надежным форматом для всех видов проектов, будь то веб-сайты или печатные издания. Используется в основном в векторе, но может включать встроенные и связанные растровые изображения и экспортироваться в другие форматы для просмотра, печати, редактирования и использования в Интернете. AI поддерживается не во всех браузерах, поэтому необходимо подумать об их преобразовании.
Идеально для: проектов Adobe Illustrator
Плюсы:
- Отличное редактирование векторных иллюстраций.
- Отлично подходит для комбинированных (вектор + растр) проектов, таких как плакаты, листовки, брошюры и т. д.
Минусы:
- Поддерживается не всеми браузерами
- Ограниченное редактирование растра
4.5. CDR
Файл CDR — это расширение CorelDRAW для использования со всеми приложениями Corel, такими как Corel Paintshop Pro и CorelDRAW Graphics Suite. Это файл векторной графики, в котором хранится закодированное цифровое изображение, которое сжато и может быть открыто и обработано в программе для редактирования векторных изображений. Он широко используется в индустрии дизайна для художественных работ и различных графических данных, таких как брошюры, таблоиды и открытки.
Идеально для: проектов CorelDRAW
Плюсы:
- Транформируемый
- Популярен в художественном сообществе
- Масштабируемый
Минусы:
- Только для использования в приложениях Corel, поддерживаемых Windows
- Только для двухмерных изображений
В заключение
Выбор формата изображения файла зависит от его использования. Исходя из этого, вы можете определиться, использовать растр или вектор, и уже отсюда сузить область поисков. Нет бойтесь запутаться в названиях. Просто сделайте выбор и придерживайтесь его для изображений, которые используются идентичным образом. Ключевые точки внимания — это размер и хранение, которые важны для детализации, качества и скорости. Эта краткая статья охватывает основные моменты и, надеюсь, является хорошей базой, после знакомства с которой вы сможете окунуться в мир форматов файлов. Или, по крайней мере, научитесь понимать некоторые проблемы и потребности различных форматов изображений 🙂
Автор оригинальной статьи: Lyudmil Enchev
Автор перевода: dbayan
Не забудьте подписаться на наш Telegram канал с актуальными новостями о фотостоках и интересной информацией. Коротко и полезно.
Последнее изменение: 17 апреля 2021 в 08:37.