Create by jsliang on 2019-3-1 13:27:47
Recently revised in 2019-3-5 21:35:45
Привет друзья, если вы считаете, что эта статья неплохая, не забудьте датьstar, ВашstarЭто моя мотивация учиться!Адрес GitHub
【2019-08-16】Привет друзья, потому чтоjsliangБиблиотека документации подверглась рефакторингу, некоторые ссылки на эту статью могут быть битыми, иjsliangУ меня нет сил поддерживать старые статьи на стороне Nuggets, извините за это. Для тех, кому нужно получать последние статьи, щелкните адрес GitHub выше и перейдите в библиотеку документов, чтобы просмотреть скорректированные статьи.
В своей повседневной работе мы часто используем JPG, PNG, GIF, SVG и другие форматы изображений.
Но действительно ли вы разбираетесь в картинках? Различие между разными форматами картинок, их преимущества и недостатки, сценарии использования...
под,jsliangНа основе собранных данных будет проведена научно-популярная работа по картинкам.
каталог
Чем отличается передок без закидывания от соленой рыбы?
| содержание |
|---|
| каталог |
| 2 Предисловие |
| три текста |
| 3.1 BMP |
| 3.2 JPEG |
| 3.3 PNG |
| 3.4 GIF |
| 3.5 SVG |
| 3.6 Base64 |
| 3.7 WebP |
| 3.8 Спрайт |
| Четыре резюме |
| 5 ссылок |
2 Предисловие
существуетjsliangВо время интервью 27 февраля меня вдруг захлестнула серия вопросов: Знакомы ли вы с картинками? Можете ли вы рассказать о применимых сценариях JPG, PNG и GIF? Тогда почему PNG имеет PNG-8 и PNG-24? Знакомы с SVG? Можете рассказать о разнице между ними и JPG, PNG, GIF? ...
Только началjsliangЯ все еще могу ответить, и тогда я чувствую себя неудержимым!
тогда,любовный бросокЯ вернулся к поиску информации и написал эту статью.
три текста
первый, нам нужно четко понимать, что картинки можно разделить набитовая картаа такжевектор.
- битовая карта: Растровое изображение также называют растровым изображением или пиксельной картой. Изображение на экране компьютера состоит из светящихся точек (то есть пикселей) на экране. Каждая точка использует двоичные данные для описания своего цвета и яркости. Поскольку эти точки являются дискретными, как точечная матрица, и поскольку цветовая комбинация нескольких пикселей образует изображение, такое изображение называется растровым или растровым. Общие растровые изображения включают JPG, PNG, GIF и другие форматы.
- вектор: векторная диаграмма также называется векторной диаграммой. Это последовательность компьютерных инструкций для описания и записи диаграммы. Диаграмма может быть разложена на подграфы, состоящие из точек, линий и поверхностей. Сгенерированные файлы векторной графики имеют небольшой объем памяти, что особенно подходит для текстового дизайна, дизайна шаблонов и т. д., а наиболее часто используемой векторной графикой во внешнем интерфейсе являются SVG и другие форматы...
потом, делим по сжатию, картинку можно разделить насжатие без потерьа такжесжатие с потерями.
- сжатие без потерь: Сжатие без потерь — это сжатие самого файла, благодаря чему объем памяти, занимаемый изображением, становится меньше, а качество изображения не ухудшается. Обычное сжатие без потерь включает PNG и так далее.
- сжатие с потерями: Сжатие с потерями — это изменение самого изображения, которое ухудшает качество изображения.По мере увеличения количества сжатий качество изображения будет становиться все хуже и хуже. Распространенным сжатием с потерями является JPG и так далее.
наконец, в конце концов, нам нужно знать, что в компьютерах пиксели представлены двоичным кодом. Соответствие между пикселями и двоичными цифрами в разных форматах изображения различно. Чем большему количеству двоичных цифр соответствует пиксель, тем больше цветов он может отображать, тем тоньше эффект изображения и тем больше размер файла.
Один двоичный бит представляет два цвета【 0|1 черный|белый 】, если формат изображения соответствует n двоичным разрядам, то он может отображать 2^n цветов. Например:
- PNG-8: имеет 2 ^ 8 цветов, что составляет 256 цветов.
- PNG-24: имеет 2 ^ 24 цвета, что составляет 1677216 цветов (16 миллионов цветов).
Хорошо, зная эти базовые знания, давайте объясним общие знания о картинках одну за другой в том порядке, в котором они появляются!
3.1 BMP
Формат изображения, использовавшийся в первые дни, называлсяBMP, взято из английского слова BitMap, переведенного с китайской версии Windowsбитовая карта, его файловая структура очень проста, сжатия нет, и он записывается попиксельно.
Если ваша система Windows, вы можете открытьрисоватьИнструменты, а затем нажмите Сохранить как, вы увидите, что24-битное растровое изображение, который представляет собой изображение с 16 миллионами цветов.
Конечно, история всегда движется вперед, и BMP, несжатый формат изображения, постепенно вытесняется восходящей звездой.
Не знаю почему, но я не могу найти порядок появления JPG, PNG и GIF, поэтому приходится редактировать абзацы статьи по своей памяти.
3.2 JPEG
ключевые слова: сжатие с потерями, небольшой размер, быстрая загрузка, отсутствие поддержки прозрачности
краткое введение:
Формат JPEG/JPG является одним из наиболее широко используемых форматов изображений со следующими характеристиками:
- JPEG/JPG использует специальный алгоритм сжатия с потерями для удаления цвета изображения, который не может быть обнаружен человеческим глазом, чтобы достичь большей степени сжатия, поэтому размер сжатого файла меньше, а скорость загрузки высокая. , став наиболее широко используемым форматом в Интернете.
- Поскольку JPEG/JPG представляет собой сжатие с потерями, при постепенном увеличении уровня сжатия качество изображения будет постепенно теряться, поэтому сжатие должно быть соответствующим.
В правильном сценарии, даже если мы сожмем объем изображения менее чем на 50 % от исходного объема, JPG все равно сможет сохранить 60 % качества, а поскольку формат JPG хранит одно изображение в 24-битных изображениях, он может отображать до 16 миллионов видов изображений Цвет, достаточный для большинства сцен,
Применимая сцена:
- большое фоновое изображение
- карусель
- Изображение баннера
3.3 PNG
ключевые слова: Сжатие без потерь, высокое качество, большой объем, прозрачная поддержка
краткое введение:
PNG (Portable Network Graphics Format) – это формат изображения высокой четкости со сжатием без потерь. Он имеет более высокий коэффициент сжатия, чем GIF, поддерживает прозрачность изображения и может использовать альфа-канал для регулировки прозрачности изображения.
PNG делится на PNG-8 и PNG-24.
- PNG-8: PNG-8 — это индексированный цветовой режим для сжатия без потерь. PNG-8 — хорошая замена формату GIF, хотя и не такая анимированная, как GIF, и несовместимая со старыми браузерами, такими как IE6. PNG-8 поддерживает до 256 цветов.
- PNG-24: PNG-24 — это прямой цветовой режим со сжатием без потерь. PNG-24 займет больше места для хранения, чем JPEG, GIF, PNG-8. PNG-24 может отображать 16 миллионов цветов.
2^8 = 256, 2^24 = 1677216
Применимая сцена:
- общая сцена
- Небольшие логотипы, простые цвета и яркие контрастные изображения или фоны.
- Прозрачные миниатюры с простыми цветами и высокой контрастностью.
- Когда использовать PNG-8 и когда использовать PNG-24?
- Теоретически тот, у которого наибольшее количество цифр, является лучшим, и PNG-24 используется напрямую, но на самом деле, чтобы избежать проблемы чрезмерного размера, как правило, в сцене, пригодной для использования PNG, меньший PNG- 8 предпочтительнее.
- Как определить, следует ли использовать PNG-8 или PNG-24, это зависит от вашего дизайнера пользовательского интерфейса или ответственного лица, которое может принять, если ваши навыки проектирования не очень хороши, в противном случае не делайте этот выбор!
3.4 GIF
ключевые слова: Поддержка анимации
краткое введение:
Формат GIF не только поддерживает неподвижные изображения, но также поддерживает анимацию и поддерживает прозрачные фоновые изображения. Он подходит для различных операционных систем и имеет небольшой размер. Многие небольшие анимации в Интернете представлены в формате GIF. Но цветовой охват не слишком широк, поддерживается всего 256 цветов, а значит, видов цветов меньше.
Коэффициент сжатия формата GIF обычно составляет около 50%.
Применимая сцена:
- гифка
3.5 SVG
ключевые слова: Текстовый файл, небольшой размер, без искажений, хорошая совместимость
краткое введение:
SVG (Scalable Vector Graphics) — это формат изображения на основе синтаксиса XML, представляющий собой масштабируемую векторную графику. В отличие от растровых изображений, таких как JPG, PNG, GIF и т. д., SVG может напрямую использовать код для описания изображения и открывать изображение SVG с помощью любого инструмента обработки текста, изменять часть кода, чтобы сделать изображение интерактивным, и может быть вставлено в HTML в любое время, просматривая устройство для просмотра.
Изображения в формате SVG можно отображать в любом масштабе без потери качества; формат SVG доступен для редактирования и поиска; формат SVG в среднем меньше файлов в формате JPG и GIF и загружается быстрее.
Файлы SVG обычно очень маленькие, но при увеличении сложности графики размер файла SVG будет увеличиваться, потому что SVG требует для рендеринга большей вычислительной мощности, чем растровое изображение, что также означает потерю производительности. Поэтому на логотипе и других схемах оно должно быть максимально лаконичным.
Применимая сцена:
- SVG Render Renders:SVG-Loaders
- Инструмент преобразования:Онлайн-инструмент JPG, PNG в SVG
- Библиотека векторных иконок:Значок вектора Алибабы
3.6 Base64
ключевые слова: текстовые файлы, зависимое кодирование, решения с маленькими значками
краткое введение:
Base64 — это не формат изображения, а метод кодирования, который похож на изображение спрайта и существует в виде решения для небольших значков. Как и спрайтовые изображения, появление изображений Base64 также должно уменьшить количество запросов к серверу при загрузке изображений веб-страницы, тем самым улучшив производительность веб-страницы. Base64 существует как дополнение к Sprite.
Base64 — это метод кодирования, используемый для передачи 8-битного байт-кода.Кодируя изображение в Base64, мы можем напрямую записывать результат кодирования в HTML или CSS, тем самым уменьшая количество HTTP-запросов.
Применимая сцена:
- Реальный размер картинки небольшой. Насколько это возможно, размер изображения не превышает 2 КБ (см. изображение Nuggets Base64).
- Изображения нельзя комбинировать с другими небольшими изображениями в виде изображений спрайтов (синтетические изображения спрайтов по-прежнему являются основным способом сокращения HTTP-запросов, а Base64 является дополнением к изображениям спрайтов).
- Частота обновления изображения очень низкая (не требует многократного кодирования и изменения содержимого файла, а стоимость обслуживания низкая)
Почему большие изображения не используют Base64?
Потому что после кодировки Base64 размер изображения увеличится до 4/3 от исходного файла.Если большое изображение закодировать в HTML или CSS, то объем последнего увеличится.Даже если уменьшить HTTP-запрос, он не может компенсировать из-за огромного объема накладных расходов на производительность.
Как получить:
- Загрузчик Webpack:url-loader
- Инструменты онлайн-кодирования:Преобразование изображения Base64
3.7 WebP
ключевые слова: Молодой универсал
краткое введение:
Представленный Google в 2010 году, это формат изображений, разработанный для Интернета, который направлен на ускорение загрузки изображений и поддерживает сжатие с потерями и сжатие без потерь.
WebP так же детализирован, как JPEG, поддерживает прозрачность, как PNG, и может отображать динамические изображения, такие как GIF.
Официальное введение: изображения WebP без потерь на 26% меньше по размеру по сравнению с PNG. При эквивалентном индексе качества SSIM изображения WebP с потерями на 25-34% меньше, чем сопоставимые изображения JPEG. WebP без потерь поддерживает прозрачность (также известную как альфа-канал) всего с 22% дополнительных байтов. В случаях, когда допустимо сжатие RGB с потерями, WebP с потерями также поддерживает прозрачность, обычно предлагая 3-кратный размер файла по сравнению с PNG.
Применимая сцена:
Поскольку WebP поддерживается только несколькими браузерами, такими как Chrome и UC, он имеет большие ограничения и в настоящее время не рассматривается для использования.
Ссылка с уровня поддержки браузера на веб-сайте Can I Use:webp
3.8 Спрайт
Изображение спрайта, спрайты CSS, своего рода изображение, которое звучит очень освежающе, в началеjsliangДумал, что это изображение бутылки с напитком «Спрайт» за 3 юаня, продаваемого на улицах, но позже узнал, что это совсем не то же самое.
Спрайт — это не формат изображения, а форма приложения изображения. Но поскольку он известен во фронтенде и часто используется, он записывается.
Карта спрайтов также называется картой спрайтов, потому что причина спрайтов называется «Спрайт». Причина в том, что с увеличением скорости сети и из-за слишком большого количества запросов веб-страница будет зависать, поэтому мы объединить N маленьких картинок в одну большую, чтобы увеличить скорость открытия страницы. Эта операция размещения нескольких маленьких изображений на большом изображении называется изображением спрайта (Sprite Image — CSS Sprites).
Итак, как вы обычно используете Sprite Maps?
.img{background:url(../images/img.png) no-repeat;}
.my-head{height:160px;width:120px;background-position:0 0;}
.my-picture{height:292px;width:1253px;background-position:0 -160px;}
@mixin img{background:url(../images/img.png) no-repeat; }
@mixin my-head{height:160px;width:120px;background-position: 0 0;}
@mixin my-picture{height:292px;width:1253px;background-position: 0 -160px;}
Как показано в приведенном выше коде, сейчас в Интернете есть много инструментов для создания изображений спрайтов, нам нужно только отправить маленькое изображение в инструмент, чтобы сгенерировать большое изображение и одновременно получить его код css/sass, без необходимо найти его один за другим.
Это версия инструмента для Windows.В Интернете есть много инструментов для рисования спрайтов/спрайтов, поэтому я не рекомендую их здесь.
Определение MDN: спрайты изображений (спрайты, то есть спрайты) используются во многих веб-приложениях, использующих множество маленьких иконок. Его можно использовать как часть изображения, что позволяет использовать один файл изображения вместо нескольких небольших файлов. По сравнению с небольшим значком и файлом изображения для одного изображения требуется меньше HTTP-запросов, а также меньше памяти и пропускной способности.
Четыре резюме
На этом наше знакомство с картинками закончено, здесь мы приводим таблицу для подведения итогов:
| Формат | сцены, которые будут использоваться |
|---|---|
| JPG/JPEG | 1. Большое фоновое изображение 2. Карусельное изображение 3. Баннерное изображение |
| PNG | 1. Маленький логотип 2. Прозрачный фон |
| GIF | динамическое изображение |
| SVG | Изображения, которые могут адаптироваться к различным устройствам и не могут быть повреждены по качеству |
| Base64 | Изображения размером менее 2 КБ и с низкой частотой обновления |
| Спрайт | Если слишком много маленьких картинок, сконцентрируйте их в одной картинке, чтобы уменьшить HTTP-запросы. |
Спрайт - это не формат, а форма приложения
Наконец, некоторая информация будет широко использоваться при разработке, а именно:jsliangЛичные ресурсы с точки зрения изображений, если у вас есть другие полезные ресурсы, которые можно порекомендовать, вы можете оставить сообщение на QQ или комментарий:
- Обычно используемые отличные ресурсы:
- Эффект загрузки SVG:SVG-Loaders
- Библиотека векторных иконок:Библиотека векторных иконок Iconfont-Alibaba
- Сделать логотип онлайн:U кальциевая сетка
- Сжать PNG или JPG:TinyPNG
- Получить фотоматериал:
- Инструмент онлайн-конверсии:
- Другая поддержка данных:
- Могу ли я использовать — просмотр различных уровней поддержки браузеров:caniuse.com
5 ссылок
- «Разница между jpg, png, svg, gif и другими форматами изображений»
- «Что следует использовать в формате PNG, JPEG, GIF или SVG? 》
- «Оптимизация изображений — игра между качеством и производительностью»
- "Горизонтальное сравнение gif, jpeg, png, svg, научит разумно выбирать формат изображения"
- "JPG? GIF? PNG? Как выбрать формат изображения на фронтенде? 》
- Отличие векторной графики от растровой
- Сжатие без потерь и сжатие с потерями — это два типа сжатия файлов цифровых изображений. 》
jsliangРекламный толчок:
Может быть, друг хочет узнать об облачных серверах
Или друг хочет купить облачный сервер
Или небольшим партнерам необходимо обновить облачный сервер
Добро пожаловать, чтобы нажатьПродвижение облачного сервераПроверить!
библиотека документации jsliangЗависит отЛян ЦзюньронгиспользоватьCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.
на основеGitHub.com/l ian Jun Ron…Создание работ выше.
Права на использование, отличные от разрешенных в настоящем Лицензионном соглашении, могут быть получены отCreative Commons.org/licenses/не…получено в.