типов файлов изображений | Университет Webflow
Урок
Типы файлов изображений
Урок
Все уроки
Узнайте о растровых изображениях, GIF, PNG, JPEG, SVG и WebP.
элемента
У этого видео старый пользовательский интерфейс. Скоро будет обновленная версия!
Изображения и другая графика часто могут создать или испортить дизайн веб-сайта. Существует много типов файлов изображений, каждый из которых имеет свои сильные и слабые стороны. Здесь мы сосредоточимся на растровых изображениях, GIF, PNG, JPEG, SVG и WebP. Это наиболее распространенные форматы файлов изображений, используемые в Интернете, и вы можете смешивать и сочетать их в зависимости от того, что лучше всего подходит для каждого изображения на вашем сайте.
Bitmap
Мы не рекомендуем использовать этот тип файлов в Интернете, поскольку файлы Bitmap не поддерживают сжатие и выводят очень большие размеры файлов, что увеличивает время загрузки страницы.
GIF
GIF (или «JIF», в зависимости от того, из какой части Интернета вы находитесь) часто используется для простых анимаций. Он поддерживает только 256 цветов, но если это все, что вам нужно, это может быть хорошим вариантом для вас. GIF-файлы также допускают прозрачность, но не поддерживают альфа-прозрачность. Это означает, что все, кроме абсолютно непрозрачного или абсолютно прозрачного, не будет отображаться правильно.
PNG
Это отличный формат файла, если вам нужна прозрачность , в частности, альфа-прозрачность.
PNG существует в двух форматах: 8-битном и 24-битном. 8-битная версия представляет собой файл меньшего размера, который содержит только 256 цветов и не имеет полной настройки прозрачности. 24-разрядная версия представляет собой несжатый файл большего размера, который содержит 16 миллионов цветов и поддерживает альфа-прозрачность.
Оба могут использоваться в Интернете, но 24-битный PNG обычно предпочтительнее из-за его альфа-прозрачности. Кроме того, такие инструменты, как ImageOptim[↗] и ImageAlpha[↗], можно использовать для сжатия 24-битного PNG-файла до 256 цветов, чтобы уменьшить размер более чем наполовину при сохранении альфа-прозрачности.
JPEG
JPEG является чрезвычайно распространенным форматом и поддерживает сжатие для уменьшения размера файла. Возьмем изображение в формате JPEG с размером файла чуть более 300 килобайт.
Обратите внимание, что одно и то же изображение в растровом формате с тем же разрешением и размерами может иметь размер более 50 мегабайт, то есть файл растрового изображения более чем в 150 раз превышает размер JPEG. Это потому, что растровые изображения содержат точные данные о каждом пикселе. Это тонна информации. Поэтому, когда вы сохраняете растровое изображение, думайте об этом участке серых пикселей как о сохраненном как «серый пиксель, серый пиксель, серый пиксель» и так далее.
При создании JPEG эта область может быть сильно сжата без потери сущности изображения. Это означает, что нам, вероятно, не нужны все эти точные повторяющиеся данные для каждого из этих пикселей, что делает JPEG отличным гибким форматом.
SVG
SVG означает «масштабируемая векторная графика». Замечательная особенность векторной графики заключается в том, что вместо фиксированных пикселей, как в любом другом формате, SVG не зависит от разрешения.
Вы можете масштабировать их до бесконечности с действительно отличными результатами. И в большинстве случаев SVG используются для фигур, текста, эскизов и логотипов.
Примечание: Для фотографий, состоящих из реальных пикселей, лучше выбрать один из других форматов.Важно! SVG-изображения не поддерживаются для полей продуктов и вариантов изображений.Они также не поддерживаются для логотипов электронной почты электронной коммерции. Это связано с тем, что эти изображения будут использоваться в электронных письмах электронной коммерции (например, электронное письмо с подтверждением заказа), а SVG не поддерживаются во многих почтовых клиентах, таких как Gmail.
Они также не поддерживаются для логотипов электронной почты электронной коммерции. Это связано с тем, что эти изображения будут использоваться в электронных письмах электронной коммерции (например, электронное письмо с подтверждением заказа), а SVG не поддерживаются во многих почтовых клиентах, таких как Gmail.WebP
Формат файла изображения WebP сохраняет большую часть высокого качества изображения при его сжатии до файла меньшего размера. Этот формат файла может быть чрезвычайно полезен, если у вас есть сайт с большим количеством изображений или вы хотите сэкономить место для хранения сайта.
Есть много причин, по которым WebP является отличным форматом файлов для использования:
- WebP поддерживает более высокое сжатие, чем форматы JPEG или PNG, что может ускорить загрузку веб-страниц, повысить удержание посетителей сайта и сэкономить место на сайте
- WebP поддерживает как прозрачность, так и анимацию
- WebP обеспечивает сжатие как без потерь, так и с потерями
Вы можете преобразовать существующие изображения в файлы WebP с помощью инструмента преобразования Webflow на панели «Ресурсы».
Имейте в виду, что длина стороны изображений WebP ограничена 16383 пикселями. И хотя изображения WebP могут оптимизировать загрузку веб-страницы и пространство для хранения, не все браузеры поддерживают этот формат файла. Проверьте, какие браузеры поддерживают WebP.
Содержание
Типы файлов цифровых изображений
JPG, GIF, TIFF, PNG, BMP, RAW. Какие они и как выбрать? Эти и многие другие типы файлов используются для кодирования цифровых изображений. Выбор проще чем вы думаете.
Одной из причин множества типов файлов является необходимость сжатия .
Файлы изображений могут быть довольно большими, а большие типы файлов означают больше использования диска и
более медленные загрузки. Сжатие — это термин, используемый для описания способов резки
размер файла.
Схем сжатия может по с потерями или без потерь .
Другая причина существования множества типов файлов заключается в том, что изображения различаются номером цветов, которые они содержат. Если изображение имеет мало цветов, можно создать тип файла использовать это как способ уменьшить размер файла.
Сжатие с потерями и сжатие без потерь
Вы часто будете слышать термины «сжатие с потерями» и «сжатие без потерь». Алгоритм сжатия без потерь не отбрасывает никакой информации. Он ищет больше эффективные способы представления изображения без ущерба для точности. Напротив, алгоритмы с потерями допускают некоторое ухудшение изображения, чтобы для достижения меньшего размера файла.
Алгоритм без потерь может, например, искать повторяющийся шаблон в
файла и замените каждое вхождение на короткую аббревиатуру, тем самым сокращая
размер файла. Напротив, алгоритм с потерями может хранить информацию о цвете.
в меньшем разрешении, чем само изображение, так как глаз не так чувствителен
к изменению цвета на небольшом расстоянии.
Количество цветов
Изображения начинаются с разного количества цветов в них. Самые простые изображения может содержать только два цвета, например черный и белый, и потребуется только 1 бит для представления каждого пикселя. Многие ранние видеокарты для ПК поддерживали только 16 фиксированных цвета. Более поздние карты будут отображать 256 одновременно, любая из которых может быть выбран из пула 2 24 или 16 миллионов цветов. Текущие карты посвящают 24 бита на каждый пиксель и, следовательно, способны отображать 2 24 , или 16 миллионов цветов без ограничений. Некоторые отображают даже больше. Поскольку глаза плохо различают похожие цвета, 24 бита или 16 миллионов цвета иногда называют TrueColor. Лучшие современные камеры могут захватывать еще больше цветов.
Типы файлов
TIFF , в принципе, очень гибкий формат, который может быть без потерь или
с потерями. Детали алгоритма хранения изображений включены как часть
файл.
На практике TIFF используется почти исключительно как хранилище изображений без потерь.
формат, который вообще не использует сжатие. Большинство графических программ, использующих TIFF
не сжимайте. Следовательно, размеры файлов довольно велики. (Иногда без потерь
используется алгоритм сжатия под названием LZW, но он не повсеместно поддерживается.)
PNG также является форматом хранения без потерь. Однако, в отличие от обычных Использование TIFF, он ищет шаблоны в изображении, которые он может использовать для сжатия файла размер. Сжатие является полностью обратимым, поэтому изображение восстанавливается точно.
GIF создает таблицу до 256 цветов из 16 миллионов цветов. Если
изображение имеет менее 256 цветов, GIF может точно передать изображение. Когда
изображение содержит много цветов, программное обеспечение, создающее GIF, использует любой из нескольких
алгоритмы для аппроксимации цветов на изображении с ограниченной палитрой
Доступно 256 цветов.
Формат GIF сжимается двумя способами. Во-первых, это уменьшает количество цветов. цветных изображений, тем самым уменьшая количество битов, необходимых для каждого пикселя, как только что описано. Во-вторых, он заменяет часто встречающиеся шаблоны (особенно большие площади однородного цвета) с краткой аббревиатурой: вместо хранения «белый, белый, белый, белый, белый», он хранит «5 белых».
Таким образом, GIF «без потерь» только для изображений с 256 цветами или меньше. Для насыщенного, истинного цветного изображения GIF может «потерять» 99,998% цветов.
JPG оптимизирован для фотографий и подобных изображений с непрерывной тональностью.
которые содержат много, много цветов.
RAW — это вариант вывода изображения, доступный на лучших цифровых камерах. Хотя
без потерь, он в три из четырех раз меньше, чем файлы TIFF того же формата.
изображение. Недостаток в том, что у каждого производителя свой формат RAW,
и поэтому вам, возможно, придется использовать программное обеспечение производителя для просмотра изображений.
BMP — несжатый собственный формат, разработанный Microsoft. Там на самом деле нет причин использовать этот формат.
PSD, PSP и т. д. — это проприетарные форматы, используемые графическими программами. Файлы Photoshop имеют расширение PSD, а файлы Paint Shop Pro используют PSP или PSPimage. Это предпочтительные рабочие форматы при редактировании изображений в программном обеспечении. потому что только проприетарные форматы сохраняют все возможности редактирования программ. Эти пакеты используют слои, например, для создания сложных изображений и информации о слоях. могут быть потеряны в непатентованных форматах, таких как TIFF и JPG. Однако будь Обязательно сохраните конечный результат в виде стандартного TIFF или JPG, иначе вы не сможете просмотреть его через несколько лет, когда ваше программное обеспечение изменится.
В настоящее время форматы GIF, PNG и JPG используются почти для всех веб-изображений.
TIFF широко не поддерживается
веб-браузерами, и их следует избегать для использования в Интернете. PNG делает все гифка
делает, и даже лучше, поэтому все чаще заменяет GIF. PNG будет , а не заменить JPG, так как JPG способен к гораздо большему сжатию фотографических
изображения, даже при минимальной потере качества.
Сравнение размеров файлов
Ниже приведены сравнения одного и того же изображения, сохраненного в нескольких популярных типах файлов. (Обратите внимание, что нет необходимости просматривать более одного файла TIFF или PNG. Поскольку все они являются форматами без потерь, их внешний вид идентичен.)
| Тип файла | Размер | Пример изображения |
| Tiff, несжатый | 901К | Не отображается в большинстве браузеров. Нажмите здесь, чтобы попробовать. |
| Tiff, сжатие без потерь LZW (да, на самом деле больше) | 928К | Не отображается в большинстве браузеров. Нажмите здесь, чтобы попробовать. |
| JPG, Высокое качество | 319К | Нажмите здесь. |
| JPG, среднее качество | 188К | Нажмите здесь. |
| JPG, мое обычное веб-качество | 105К | Нажмите здесь. |
| JPG, низкое качество/высокая степень сжатия | 50К | Нажмите здесь. |
| JPG, абсурдно высокая степень сжатия | 18К | Нажмите здесь. |
| PNG, сжатие без потерь | 741К | Нажмите здесь. |
| GIF, сжатие без потерь, но только 256 цветов | 286К | Нажмите здесь. |
Когда следует использовать каждый из них?
TIFF
Обычно это наилучшее качество вывода с цифровой камеры.
Цифровые камеры
часто предлагают около трех настроек качества JPG плюс TIFF. Поскольку JPG всегда означает
хоть какая-то потеря качества, TIFF значит лучшее качество. Однако файл
размер огромен по сравнению даже с самой лучшей настройкой JPG, и преимущества могут не
быть заметным.
Более важным является использование TIFF в качестве рабочего формата хранения при редактировании и манипулировать цифровыми изображениями. Вы не хотите выполнять несколько операций загрузки, редактирования, сохранить циклы с хранилищем JPG, так как деградация накапливается с каждым новым сохранением. Одно-два сохранения JPG в высоком качестве может быть и не заметно, а вот десятое уж точно будет. TIFF не имеет потерь, поэтому нет ухудшения качества, связанного с сохранением. TIFF-файл.
НЕ ИСПОЛЬЗУЙТЕ TIFF для веб-изображений. Они создают большие файлы и, что более важно, большинство веб-браузеров не отображают файлы TIFF.
JPG
Это предпочтительный формат почти для всех фотографий в Интернете.
Цифровые камеры по умолчанию сохраняют в формате JPG. Переключение на TIFF или RAW улучшает качество в принципе, но разницу трудно увидеть. Съемка в TIFF имеет два недостатка по сравнению с JPG: меньше фотографий на карту памяти и подождите между фотографиями, пока изображение переносится на карту. я редко стреляю в режиме TIFF.
Никогда не используйте JPG для штриховой графики. На таких изображениях с областями однородного цвета с острыми краями JPG справляется плохо. Это задачи, для которых GIF и PNG хорошо подходят. См. JPG против GIF для веб-изображения.
GIF
Если ваше изображение содержит менее 256 цветов и содержит большие области однородного
цвет, GIF — хороший выбор, и в свое время единственный мудрый выбор.
Файлы будут небольшими, но идеальными. Вот пример
изображения, подходящего для GIF:
НЕ используйте GIF для фотографических изображений, так как он может содержать только 256 цветов. за изображение.
PNG: «GIF для более чем 256 цветов»
PNG имеет принципиальное значение в двух приложениях:
- более 256 цветов, PNG на ваш выбор. Его стратегия очень похожа на ту, GIF, но поддерживает 16 миллионов цветов, а не только 256.
- Если вы хотите отобразить фотографию ровно без потерь в сети, PNG на ваш выбор. Веб-браузеры более поздних поколений поддерживают PNG, а PNG единственный формат без потерь, который поддерживают веб-браузеры.
PNG превосходит GIF почти во всех отношениях. Он создает файлы меньшего размера и позволяет
больше цветов. PNG также поддерживает частичную прозрачность . Частичная прозрачность
может использоваться для многих полезных целей, таких как затухание и сглаживание текста.
В основном GIF используется для анимации, которую мы не будем обсуждать на этой странице.
RAW
Если ваша камера поддерживает формат RAW, это концептуальный эквивалент пленочного негатива. В нем есть вся информация, которую зафиксировала ваша камера. RAW не предназначен для размещения на вашем веб-сайте, в печати или в социальных сетях. Для этих целей экспортируйте в PNG или JPG.
Советую сохранять копию каждого изображения в формате JPG. Вы не хотите, чтобы ваши архивы изображений
быть только в собственном формате. Хотя большая часть графики
программы теперь могут читать формат RAW для многих цифровых камер, это неразумно
полагаться на любой проприетарный формат для долгосрочного хранения. Проблема в том, что RAW не является единым форматом. У каждого поставщика есть формат RAW, и производители меняют свои форматы RAW по мере развития своих камер. Сможете ли вы
прочитать RAW-файл вашей камеры через пять лет? Через двадцать? JPG — это формат, который, скорее всего,
быть читаемым через 50 лет.
Таким образом, целесообразно использовать RAW для хранения изображений
в камере и, возможно, для временного хранения без потерь на вашем ПК, но будьте
обязательно создайте TIFF, а еще лучше PNG или JPG для архивного хранения. Примечание: большинство камер, поддерживающих формат RAW, позволяют указать сохранение каждые изображения в RAW и JPG. сделай это.
Так зачем вообще возиться с RAW? Потому что изображение RAW с камеры сохраняет всю информацию, полученную камерой. Изображения с лучших современных камер имеют разрядность более 24 бит, и они сохраняются в формате RAW, но не в формате JPG или PNG. Такие программы, как Adobe Lightroom, позволяют использовать всю информацию в файле RAW для улучшения изображения. Вы можете изменить белый цвет. баланс, яркость, контрастность и т. д. с меньшим ухудшением, чем при работе с JPG или PNG.
Снова обратимся к аналогии с пленкой. Во времена пленки большинство фотографов отправляли контейнеры с экспонированной пленкой в фотопроцессоры, которые возвращали набор отпечатков и полосок негативов.