Какой формат изображения лучше: все что нужно знать
С вами наверняка такое случалось: фотограф прислал долгожданные снимки с фотосессии, а большинство из них не открываются ни в какой программе. И в телефоне тоже не отображаются – а ведь хочется скорее залить их в соцсети! Или вы сами хотели сохранить картинку на компьютер и не знали, в каком формате это лучше сделать – и кликали наугад в один из пунктов бесконечного списка.
Зачем нужно так много форматов, кому они нужны и почему нельзя все подряд хранить в JPEG? Казалось бы, можно было бы обойтись всего одним разрешением для изображений и ничего не усложнять. На самом деле – нет. У каждого формата есть свое назначение, свои недостатки и преимущества.
Разбираемся в самых популярных разрешениях и отвечаем на главные вопросы о них: какие есть форматы изображений, чем отличаются друг от друга, что такое векторная графика.
Растр vs. вектор: в чем разница
Возможно, вы уже слышали, что есть растровые форматы и векторные.
Растровые изображения состоят из пикселей – маленьких квадратов. Каждый пиксель картинки имеет свой определенный цвет и позицию, файл сохраняет эти характеристики и гарантирует их неизменность. Вместе все эти пиксели составляют своеобразную цифровую мозаику, которую человеческий глаз воспринимает, как целостное изображение – мы смотрим на нее как бы «издалека». Но если мы сильно увеличим картинку, мы увидим границы между пикселями. Если этот эффект мозаики заметен даже без приближения, обычно это говорит о том, что изображение плохого качества.
Большинство изображений, которые вы видите в онлайн-журналах и, в частности, в нашем блоге – растровые. Растровые форматы хорошо передают цветовые переходы и используются для фотографий и цифровых рисунков.
Векторные изображения построены по другому принципу. Они состоят не из множества пикселей, а совокупности точек и соединяющих их кривых линий. Векторное изображение можно представить в виде аппликации, состоящей из цветной бумаги: несколько цветных листков разных форм наложены друг на друга.
В редакторе можно менять их цвет и расположение.
Векторные картинки можно увеличивать сколько угодно – пикселей там нет, и качество будет оставаться неизменным. Информация в таких изображениях хранится не в пикселях, а в сложных математических формулах. Увеличение или уменьшение картинки происходит благодаря изменению соответствующего коэффициента в формуле. Проще говоря, кривые линии просто растягиваются, как резина, и изображение становится больше.
Векторная графика легко масштабируется, но не может передать такие плавные цветовые переходы, как растровая. Векторные изображения используют для иллюстраций, иконок, логотипов.
Самые популярные форматы картинок
Теперь поговорим о каждом современном формате подробнее – расскажем об их свойствах и особенностях.
Растровые форматыJPEG (JPG)Расшифровывается как «Joint Photographic Experts Group». Это один из наиболее распространенных форматов графических файлов. Это расширение стало таким популярным благодаря гибким возможностям для сжатия данных: можно сохранить картинку в максимальном качестве, а можно – сжать до минимума и за секунды отправить в мессенджере или опубликовать на сайте.
Большинство социальных сетей автоматически конвертируют залитый файл в JPEG.
Плюсы:
➕ Небольшой размер при нормальном качестве
➕ Поддерживается абсолютным большинством программ для просмотра и редактирования изображений
Минусы:
➖ При каждом сохранении теряется качество
➖ Также теряется качество при масштабировании
➖ Из-за сжатия может плохо отображаться текст
Поддержка:
- JPEG открывается во всех основных браузерах: Chrome, Safari, Firefox, Opera и так далее.
- Можно просматривать и обрабатывать в большинстве программ – в том числе в тех, что встроены в ваш компьютер изначально.
Где используют:
- Иллюстрации к статьям в блогах, онлайн-изданиях
- Социальные сети
- Рекламные изображения
Название этого формата изображений расшифровывается как «Portable Network Graphics». Формат использует сжатие без потерь. В PNG хорошо сохраняются детали и контрасты между цветами.
Кроме того, это разрешение поддерживает прозрачный фон и разные степени прозрачности – можно сделать плавные переходы из четкого изображения в фон. Если на таком изображении есть текст, он будет читаться лучше, чем в файле JPEG.
Все это делает PNG идеальным форматом для инфографик, баннеров, скриншотов и других изображений, где есть много текста.
Плюсы:
➕ Сжатие без потери качества
➕ Поддержка прозрачного фона
Минусы:
➖ Большие файлы могут замедлять загрузку сайта
Поддержка:
- PNG тоже открывается во всех основных браузерах: Chrome, Safari, Firefox, Opera и так далее.
- Открывается в большинстве программ для просмотра и обработки файлов.
Где используют:
- Инфографики, баннеры, скриншоты, купоны и другие изображения, которые содержат много текста.
GIF – довольно старый формат, который изначально использовали для передачи изображений. О том, как он появился, мы уже рассказывали в этой статье.
GIF поддерживает сжатие без потери качества, но хранит данные в формате данных до 256 цветов. А еще GIF поддерживает анимацию – благодаря чему до сих пор жив и, более того, входит в список самых популярных современных форматов. Ограничения в цветах позволяют делать файлы легкими и internet-friendly.
Плюсы:
➕ Небольшой размер файлов
➕ Поддерживает анимацию
Минусы:
➖ Плохая цветопередача
Поддержка:
- GIF не хуже JPEG открывается во всех основных браузерах: Chrome, Safari, Firefox, Opera и так далее.
- Открывается практически во всех редакторах и программах для просмотра изображений.
Где используют:
- Мемы
- Быстрые наглядные туториалы
Расшифровывается как «Tagged Image File Formats». Этот формат подходит для хранения и редактирования изображений большого разрешения, которые потом пойдут в печать. Это формат без сжатия, поскольку его фокус – сохранение качества.
Плюсы:
➕ Подходит для хранений файлов высокого разрешения
➕ Поддерживает прозрачный фон и сохраняет слои
Минусы:
➖ Нет сжатия
➖ Большой размер
Поддержка:
- Браузеры в основном не поддерживают TIFF, нужно скачивать специальные расширения
- Поддерживается программами для редактирования
Где используют:
- Изображения для печати в больших форматах
- Для сканирования изображений
Формат картинок, разработанный Google специально для того, чтобы достичь лучшего сжатия – с потерей качества или без. Такие файлы при аналогичном качестве весят меньше, чем JPEG или PNG и подходят для публикации в сети.
Плюсы:
➕ Легкие файлы при хорошем качестве
➕ Качественное сжатие
Минусы:
➖ Поддерживается не всеми браузерами
Поддержка:
- Google Chrome (версия 17+ на компьютере и 25+ мобильного приложения), Firefox (версия 65+), Edge (18+), Opera (11+), Safari (14+).
- Поддерживается распространенными профессиональными редакторами (типа Photoshop). Но в некоторых «родных» программах MacOS или Windows могут не открываться.
Где используют:
- Размещение изображений в интернете
Расшифровывается как «High Efficiency Image File». Этот формат – относительно молодой конкурент JPEG. По задумке, он должен быть вдвое компактнее в сравнении со своим предшественником: при аналогичном качестве файлы весят в два раза меньше.
Плюсы:
➕ Отличное соотношение размер/качество
Минусы:
➖ Не сильно распространен и не поддерживается браузерами
Поддержка:
- Поддерживается в MacOS версии Sierra и более поздних, а также IOS 11 и более поздних версиях этой операционной системы.
Где используют:
- Используются новыми смартфонами для хранения фотографий хорошего качества.
RAW – это формат, в котором хранится необработанная информация, которая поступает напрямую с матрицы фотокамеры.
Этот формат широко используется фотографами, поскольку открывает огромные возможности для редактирования снимков. Можно снимать и сразу в JPEG, но тогда «спасти» неудачный кадр в фоторедакторе будет невозможно.
Чаще всего RAW файлы после обработки сохраняют в растровых форматах. Кстати, единого формата RAW нет – каждый производитель фотокамер называет такие файлы по-своему. У Nikon, например, это NEF, а у Canon – CR2. Так что если совсем по-честному, то RAW – это группа форматов.
Плюсы:
➕ Позволяет редактировать снимки – например, высветлять экспозицию и корректировать баланс белого
➕ Хранит полные данные об изображении
Минусы:
➖ Большой размер
➖ Требуют обязательной обработки и конвертации
Поддержка:
- В браузерах не открываются
- Поддерживаются большинством редакторов изображений
Где используют:
- Формируются фотокамерами и хранятся для дальнейшей обработки
Расшифровывается как Scalable Vector Graphics.
Изначально формат был создан для визуализации двухмерных изображений прямо в веб-браузере. Широко используется в веб-дизайне.
Плюсы:
➕ Небольшой размер
➕ Распространенный формат: поддерживается большинством браузеров
Минусы:
➖ Не подходит для сложных изображений с большим количеством оттенков
Поддержка:
- Все основные браузеры: Google Chrome, Edge, Firefox, Safari, Opera, Internet Explorer)
- Большинство редакторов, поддерживающих работу с векторной графикой (Adobe Illustrator, Sketch и так далее)
Где используют:
- Отлично подходит для логотипов, иконок и простых иллюстраций
Еще один стандартный векторный формат. Как и SVG, его используют для хранения и переноса векторной графики. Как и любые другие векторные изображения, EPS файлы можно бесконечно масштабировать без потери качества.
Плюсы:
➕ Легко преобразуются в растровые форматы
➕ Поддерживается принтерами
Минусы:
➖ Не открывается в браузерах
Поддержка:
- Большинство векторных редакторов (Adobe Illustrator, Sketch и так далее)
Где используют:
- Для хранения и печати иллюстраций
Большинство ассоциируют PDF с текстовыми документами.
Плюсы:
➕ Много возможностей для работы с текстом: можно искать слова или, например, вставлять ссылки
➕ Масштабирование без потери качества
Минусы:
➖ Не загружается как часть веб-страницы, нужно размещать отдельной ссылкой для скачивания
Поддержка:
- Поддерживается всеми браузерами
- Открывается как в текстовых редакторах (MS Word, Google Docs)
Где используют:
- Лучший вариант для интерактивного документа или кликабельной инфографики
Помимо названных, у большинства редакторов изображений – векторных и растровых – есть свой формат. Так, «родной» формат Photoshop – это PSD, программа для верстки Adobe InDesign предлагает работать с файлами INDD, а векторные редакторы CorelDraw и Adobe Illustrator – с CDR и AI соответственно.
| Графика для сети | Печать в больших форматах | Фото | Анимация | Высокое качество | Веб-дизайн | |
| JPG | ✅ | ✅ | ✅ | |||
| PNG | ✅ | ✅ | ||||
| GIF | ✅ | |||||
| TIFF | ✅ | ✅ | ||||
| WebP | ✅ | |||||
| HEIF | ✅ | |||||
| RAW | ✅ | |||||
| SVG | ✅ | ✅ | ||||
| EPS | ✅ | |||||
| ✅ | ✅ |
Хорошо, с назначениями форматов разобрались.
Но что делать, если к вам попал файл формата TIFF, а его нужно преобразовать в JPEG? Тут помогут специальные программы – конвертеры файлов. Мы уже рассказывали о лучших бесплатных приложениях для конвертации файлов. А сегодня расскажем про наш любимый софт такого рода – Movavi Video Converter.
Это программа поддерживает более 20 форматов изображений и поможет преобразить любой графический файл за считанные секунды. Как вы уже наверняка поняли из названия, эта програма также может конвертировать видео и аудио. А еще преобразованные в нем файлы можно легко отредактировать: обрезать, повернуть или добавить текст.
Хотите попробовать? Скачивайте Movavi Video Converter со специальной секретной скидкой для читателей нашего блога:
Попробовать Movavi Video Converter со скидкой 10% для Windows
Попробовать Movavi Video Converter со скидкой 10% для Mac
Типы графических файлов, которые можно вставлять и сохранять
Word для Microsoft 365 для Mac Word 2021 для Mac Word 2019 для Mac Word 2016 для Mac Word для Mac 2011 Еще.
..Меньше
Типы графических файлов, которые можно вставлять в документы Office
Графические файлы любых типов, открывающиеся с помощью доступной версии QuickTime, скорее всего, откроются и в Office. В документы Office можно вставлять графические файлы любых из перечисленных ниже типов. Вставленные графические файлы сохраняются вместе с документами Office.
|
Тип файла |
Формат файла |
|---|---|
|
BMP |
точечный рисунок Windows |
|
EMF |
Расширенный метафайл Windows |
|
EMZ |
Сжатый расширенный метафайл Windows |
|
EPS |
Инкапсулированный PostScript |
|
FPix, FPX |
FlashPix |
|
GIF |
Формат GIF |
|
JPEG, JFIF, JPEG-2000 |
Формат JPEG |
|
|
Формат PDF |
|
PICT, PCT |
Рисунок Macintosh |
|
PNG |
Формат PNG |
|
PNTG |
Macintosh Paint |
|
PSD |
Документ Photoshop |
|
QTIF |
Формат изображения QuickTime |
|
SGI |
Формат SGI |
|
TGA, TPIC |
Targa |
|
TIFF, TIF |
Формат TIFF |
|
WMF |
метафайл Windows |
|
WMZ |
Сжатый метафайл Windows |
Типы файлов, которые можно использовать для сохранения отдельных графических файлов
Изображения и объекты из документов Office можно сохранять в виде отдельных файлов различных типов.
Некоторые типы графических файлов больше других подходят для определенных задач. Информацию о том, какие типы графических файлов подходят для конкретных задач, см. в представленной ниже таблице.
Примечание: При сохранении изображений из приложения Office в виде отдельных файлов нельзя контролировать сжатие и другие параметры, влияющие на качество изображения. Если доступна изначальная версия графического файла, сжатием и другими характеристиками рисунка можно управлять при сохранении с помощью специального графического ПО.
|
Сохранение изображени й из приложения Office |
Тип графического файла |
|---|---|
|
Для использования в браузерах |
JPEG, GIF, PNG |
|
Для одновременного использования на компьютерах под управлением Windows и компьютерах Macintosh |
GIF, JPEG, PNG, PDF |
|
С тысячами и миллионами цветов |
JPEG, PNG, BMP |
|
С не более чем 256 цветами |
GIF |
|
Для использования в других приложениях Macintosh |
GIF, JPEG, PDF |
Узнайте о форматах файлов изображений и API-интерфейсах, которые могут создавать и открывать файлы изображений
Формат файла изображения — это стандартный метод организации и хранения изображений на таких устройствах, как компьютеры, планшеты и смартфоны.
Цифровые изображения хранят данные изображения в двумерной сетке пикселей, где каждый пиксель представляет собой представление цвета с точки зрения количества битов. Типы файлов изображений подразделяются на форматы векторных изображений и форматы растровых изображений. 3D-изображения — это еще один тип формата файла векторного изображения, который используется для управления 3D-изображениями.
Растровые форматы
Растровая графика — это цифровые изображения, состоящие из данных пикселей для представления цветов. Это наиболее распространенные типы изображений для графики, используемой как для Интернета, так и для цифровых фотографий. Некоторые растровые изображения могут быть сжаты для уменьшения размера файла изображения. Распространенные расширения файлов растровых изображений и их форматы файлов включают BMP (файл растрового изображения), PNG (переносимая сетевая графика) и GIF (файл обмена графикой).
Векторные форматы
Векторные изображения определяются двумерными точками, а не пикселями, которые соединяются для придания геометрической формы изображению. Точки имеют свойства, определяющие направление путей, цвет, форму, кривую, толщину и заливку. Распространенные расширения файлов векторных изображений и их форматы файлов включают SVG (масштабируемая векторная графика), EPS (язык Encapsulated PostScript) и PDF (формат переносимых документов).
Есть вопросы, связанные с форматами файлов изображений? Посетите форумы нашего сообщества, чтобы воспользоваться знаниями, которыми поделились эксперты по форматам файлов.
Список расширений файлов изображений и связанных форматов файлов
Ниже приведен список распространенных форматов файлов изображений вместе с их расширениями.
Узнайте о формате файлов BIF и API, которые могут создавать и открывать файлы BIF. Подробнее »
Узнайте о формате файлов JXL и API, которые могут создавать и открывать файлы JXL.
Подробнее »
Узнайте о формате файлов AGIF и API, которые могут создавать и открывать файлы AGIF. Подробнее »
Узнайте о формате файлов AGP и API-интерфейсах, которые могут создавать и открывать файлы AGP. Подробнее »
Узнайте, что такое формат файлов AFPHOTO, с примерами и API, которые могут создавать и открывать файлы AFPHOTO. Подробнее »
Узнайте о формате файлов AFX и API-интерфейсах, которые могут создавать и открывать файлы AFX. Подробнее »
Узнайте о формате файлов HDR и API, которые могут создавать и открывать файлы HDR. Подробнее »
Узнайте о формате файлов PSP и API, которые могут создавать и открывать файлы PSP. Подробнее »
Узнайте о формате файлов PSPIMAGE и API-интерфейсах, которые могут создавать и открывать файлы PSPIMAGE. Подробнее »
Узнайте о формате файлов NEF и API-интерфейсах, которые могут создавать и открывать файлы NEF. Подробнее »
Узнайте о формате файлов JPC и API-интерфейсах, которые могут создавать и открывать файлы JPC.
Подробнее »
Узнайте о формате файлов DDS и API-интерфейсах, которые могут создавать и открывать файлы DDS. Подробнее »
Узнайте о формате файлов ART и API-интерфейсах, которые могут создавать и открывать файлы ART. Подробнее »
Узнайте о формате файлов CR2 и API-интерфейсах, которые могут создавать и открывать файлы CR2. Подробнее »
Узнайте о формате файлов CR3 и API-интерфейсах, которые могут создавать и открывать файлы CR3. Подробнее »
Узнайте о формате файла CSL и API-интерфейсах, которые могут создавать и открывать файлы CSL. Подробнее »
Узнайте о формате файла CT и API-интерфейсах, которые могут создавать и открывать файлы CT. Подробнее »
Узнайте о формате файлов XPR и API-интерфейсах, которые могут создавать и открывать файлы XPR. Подробнее »
Узнайте о формате файлов DCX и API, которые могут создавать и открывать файлы DCX. Подробнее »
Узнайте о формате файлов PCT и API-интерфейсах, которые могут создавать и открывать файлы PCT.
Подробнее »
Узнайте о формате файлов PCX и API, которые могут создавать и открывать файлы PCX. Подробнее »
Узнайте о формате файлов PICT и API-интерфейсах, которые могут создавать и открывать файлы PICT. Подробнее »
Узнайте о формате файлов PSD и API-интерфейсах, которые могут создавать и открывать файлы PSD. Подробнее »
Узнайте о формате MP-файлов и API-интерфейсах, которые могут создавать и открывать MP-файлы. Подробнее »
Узнайте о формате файла MPO и API-интерфейсах, которые могут создавать и открывать файлы MPO. Подробнее »
Узнайте о формате файла CLIP и API-интерфейсах, которые могут создавать и открывать файлы CLIP. Подробнее »
Узнайте, что такое файл THM и API, которые могут создавать и открывать файлы THM. Подробнее »
Узнайте о формате файла CUR и API-интерфейсах, которые могут создавать и открывать файлы CUR. Подробнее »
Узнайте о формате файлов ICNS и API-интерфейсах, которые могут создавать и открывать файлы ICNS.
Подробнее »
Узнайте о формате файлов JPF и API, которые могут создавать и открывать файлы JPF. Подробнее »
Узнайте о формате файлов JPX и API, которые могут создавать и открывать файлы JPX. Подробнее »
Узнайте о формате файлов AI и API-интерфейсах, которые могут создавать и открывать файлы AI. Подробнее »
AVIF (формат файла изображения AV1) — это формат файла изображения, который сохраняет изображения, сжатые с помощью AV1, в формате файла HEIF. Файлы AVIF хранятся с расширением .avif. Подробнее »
Узнайте о формате файла BPG и API-интерфейсах, которые могут создавать и открывать файлы BPG. Подробнее »
Узнайте о формате файлов CPC и API, которые могут создавать и открывать файлы CPC. Подробнее »
Узнайте о формате файлов FLIF и API-интерфейсах, которые могут создавать и открывать файлы FLIF. Подробнее »
Узнайте о формате файлов JFIF и API-интерфейсах, которые могут создавать и открывать файлы JFIF. Подробнее »
Узнайте о формате файлов JXR и API, которые могут создавать и открывать файлы JXR.
Подробнее »
Узнайте о формате файлов DIB и API-интерфейсах, которые могут создавать и открывать файлы DIB. Подробнее »
Узнайте о формате файла OTG и API-интерфейсах, которые могут создавать и открывать файлы OTG. Подробнее »
Узнайте о формате файлов JPEG и API-интерфейсах, которые могут создавать и открывать файлы JPEG. Подробнее »
Узнайте о формате файлов JPM и API, которые могут создавать и открывать файлы JPM. Подробнее »
Узнайте о формате файлов APNG и API-интерфейсах, которые могут создавать и открывать файлы APNG. Подробнее »
Узнайте о формате файлов BMP и API-интерфейсах, которые могут создавать и открывать файлы BMP. Подробнее »
Узнайте о формате файла CDR и API-интерфейсах, которые могут создавать и открывать файлы CDR. Подробнее »
Узнайте о формате файлов CMX и API, которые могут создавать и открывать файлы CMX. Подробнее »
Узнайте о формате файлов DCM и API, которые могут создавать и открывать файлы DCM.
Подробнее »
Узнайте о формате файлов DICOM и API-интерфейсах, которые могут создавать и открывать файлы DICOM. Подробнее »
Узнайте о формате файла DJVU и API-интерфейсах, которые могут создавать и открывать файлы DJVU. Подробнее »
Узнайте о формате файлов DNG и API-интерфейсах, которые могут создавать и открывать файлы DNG. Подробнее »
Узнайте о формате файлов EMF и API-интерфейсах, которые могут создавать и открывать файлы EMF. Подробнее »
Узнайте о формате файлов EMZ и API-интерфейсах, которые могут создавать и открывать файлы EMZ. Подробнее »
Узнайте о формате файлов EXIF и API-интерфейсах, которые могут создавать и открывать файлы EXIF. Подробнее »
Узнайте о формате файлов FODG и API-интерфейсах, которые могут создавать и открывать файлы FODG. Подробнее »
Узнайте о формате файла GBR и API-интерфейсах, которые могут создавать и открывать файлы GBR. Подробнее »
Узнайте о формате файлов GIF и API-интерфейсах, с помощью которых можно создавать и открывать файлы GIF.
Подробнее »
Узнайте о файле .heic и API, которые могут создавать и открывать файлы HEIC. Подробнее »
Узнайте о формате файлов HEIF и API-интерфейсах, которые могут создавать и открывать файлы HEIF. Подробнее »
Узнайте о формате файлов ICO и API-интерфейсах, которые могут создавать и открывать файлы ICO. Подробнее »
Узнайте о формате файлов J2C и API, которые могут создавать и открывать файлы J2C. Подробнее »
Узнайте о формате файлов J2K и API, которые могут создавать и открывать файлы J2K. Подробнее »
Узнайте о формате файлов JP2 и API, которые могут создавать и открывать файлы JP2. Подробнее »
Узнайте о формате файлов MNG и API, которые могут создавать и открывать файлы MNG. Подробнее »
Узнайте о формате файлов ODG и API-интерфейсах, которые могут создавать и открывать файлы ODG. Подробнее »
Узнайте о формате файлов PNG и API-интерфейсах, которые могут создавать и открывать файлы PNG. Подробнее »
Узнайте о формате файла PSB и API-интерфейсах, которые могут создавать и открывать файлы PSB.
Подробнее »
Узнайте о формате файлов PSD и API-интерфейсах, которые могут создавать и открывать файлы PSD. Подробнее »
Узнайте о файле .skp и API-интерфейсах, которые могут создавать и открывать файлы SKP. Подробнее »
Узнайте о формате файлов EMZ и API-интерфейсах, которые могут создавать и открывать файлы SVGZ. Подробнее »
Узнайте о формате файлов TGA и API-интерфейсах, которые могут создавать и открывать файлы TGA. Подробнее »
Узнайте о формате файлов TIFF и API-интерфейсах, с помощью которых можно создавать и открывать файлы TIFF. Подробнее »
Узнайте о формате файлов WEBP и API, которые могут создавать и открывать файлы WEBP. Подробнее »
Узнайте о формате файлов WMF и API, которые могут создавать и открывать файлы WMF. Подробнее »
Узнайте о формате файлов WMZ и API, которые могут создавать и открывать файлы WMZ. Подробнее »
Узнайте о формате файлов XPM и API-интерфейсах, которые могут создавать и открывать файлы XPM.
Подробнее »
Узнайте о формате файла DCR и API-интерфейсах, которые могут создавать и открывать файлы DCR. Подробнее »
Узнайте о формате файла ECW и API-интерфейсах, которые могут создавать и открывать файлы ECW. Подробнее »
Форматы веб-графики
Форматы веб-графикиВернуться на страницу пятого класса »
Назначение
- Визуальная/эстетическая привлекательность — поддержание интереса и внимания посетителей
- Создать визуальную структуру — прояснить информационную иерархию (вспомните типографику и иерархию)
- Сообщайте идеи визуально
Наши сайты обычно довольно скучны без использования графики.
Руководство по веб-графике
- Веб-графика должна соответствовать назначению, организации и стилю сайта
- Большая (размер файла) графика увеличивает время загрузки страницы — избегайте.
- Графика должна помочь сосредоточить внимание посетителя на том, что важно на странице
- Избегайте надоедливых изображений, анимации, бесполезных эффектов — они быстро устаревают без цели.
- Графика никогда не должна использоваться для текстового содержимого, за исключением случаев, когда заголовок требует включения логотипа. . Это снижает индексацию поисковыми системами, доступность и т. д. 90 196
- Сделать графику доступной с альтернативным текстом.
- При использовании текста в графике убедитесь, что он достаточно контрастен, чтобы он был разборчивым. Это особенно важно при использовании фоновых изображений.
Форматы веб-графики
Существует три формата графических файлов, используемых в Интернете: JPG, GIF и PNG. Каждый из этих форматов файлов разработан с определенной целью, поэтому важно понимать различия, когда мы используем их на наших веб-сайтах.
JPG
Формат изображений JPG был разработан для эффективного хранения и сжатия реалистичных изображений и иллюстраций (как в цвете, так и в оттенках серого). Формат JPG очень хорошо сжимает изображения с большим количеством цветов и градаций цветов.
Думайте о JPG как о сильно сжатой фотографии.
Формат JPG не позволяет сохранять прозрачные пленки. Если требуется прозрачность фона вашего изображения, вы должны выбрать другой формат.
При сохранении изображений в формате JPG вы можете выбрать уровень сжатия, чтобы сбалансировать размер файла и качество изображения. Размер файла напрямую связан с фактическим размером (в пикселях) изображения. Большой размер пикселя всегда приводит к большему размеру файла.
Примеры изображений, которые следует сохранять в формате JPG:
GIF и PNG
В форматах изображений GIF и PNG используется так называемый «индексный цвет». Они хранят минимизированную цветовую палитру в файле изображения и ключи к тому, где эти цвета должны располагаться на изображении. Размер файла для изображений GIF и PNG обычно зависит от количества используемых цветов. Общие номера цветов: 2, 4, 8, 16, 32, 64, 128, 256.
Форматы изображений GIF и PNG идеально подходят для изображений с однородными цветами (без градиентов) и резкими краями.
Распространенными примерами таких типов изображений являются логотипы, логотипы и иллюстрации без градиентов.
Прозрачность
Форматы GIF и PNG также поддерживают прозрачность. Если вам нужен какой-либо уровень прозрачности вашего изображения, вы должны использовать либо GIF, либо PNG.
изображений GIF (а также PNG) поддерживают одноцветную прозрачность. В основном это означает, что вы можете сохранить изображение с прозрачным фоном.
В качестве примера возьмем логотип Good Food. Это должен быть файл изображения, потому что мы используем причудливый шрифт, а также изображение яблока вместо a. Мы хотим, чтобы наш логотип располагался на светло-зеленом фоне. Вот наш фоновый цвет, на котором мы сохраняем логотип.
Если бы мы сохранили логотип в формате JPG, у нас остался бы фоновый цвет.
JPG не даст нам прозрачности
Очевидно, что цвет фона в этой ситуации не идеален. Если мы сохраним изображение в формате GIF, мы можем использовать прозрачный цвет фона.
GIF дает нам прозрачный фон. Обратите внимание на кольцо вокруг текста.
Использование GIF-изображения с прозрачным фоном позволило нам поместить наше изображение на фон другого цвета. Обратите внимание на белое кольцо вокруг изображения. Это связано с тем, что изображения GIF могут использовать только одноцветную прозрачность. Мы не можем медленно становиться прозрачными. Вокруг изображения всегда будет цветное кольцо. Мы можем изменить цвет кольца, но это означает, что мы должны заранее знать, какой цвет фона мы собираемся использовать.
Переменная прозрачность
Формат файла PNG позволяет сохранять различные уровни прозрачности. Это известно как альфа-канал. Используя переменную прозрачность, мы можем фактически использовать прозрачность в качестве градиента.
Самый простой способ продемонстрировать прозрачность переменных — на примере. Ниже показано одно и то же изображение дважды на двух разных цветах фона.
Обратите внимание, что цвет фона просто растворяется в изображении.
Это будет работать хуже, если вы сохраните как png8. Обязательно сохраните как png24.
Возвращаясь к нашему логотипу Good Food, мы можем использовать ту же технику, чтобы убедиться, что наш логотип сочетается с любым фоновым цветом.
GIF против PNG
В этот момент вам может быть интересно, как узнать, когда использовать GIF или PNG. GIF — это более старый формат файла, восходящий к началу 1990-х годов. Раньше мы использовали его для действительно неприятных анимаций изображений (на самом деле, мы все еще делаем это). GIF — единственный формат файла, который может это сделать. Но, если вы не планируете делать что-то для Facebook или MySpace, вы, вероятно, не захотите использовать анимированный GIF.
Формат PNG является более новым и лучшим форматом. Раньше мы использовали GIF из соображений совместимости,
но к настоящему времени любой браузер, который не поддерживает PNG, является действительно старым браузером.
Формат PNG использует лучшую схему сжатия, чем GIF, поэтому размеры файлов обычно меньше.