У меня есть признание, которое заставит инженеров по производительности вздрогнуть. на ранней версии информационной панели WordPress для WP Adminify я закодировал каждую иконку в базе64 и вставил их прямо в CSS, потому что я устал управлять листами спрайтов. Это сработало. иконки появились мгновенно, никаких дополнительных запросов, никакой вспышки отсутствующего изображения. Затем таблица стилей раздулась за мегабайт, и страница почувствовала себя медленнее при второй загрузке, потому что ни одно из этих встроенных изображений не могло быть кэшировано самостоятельно. именно в этом проекте я узнал, что " изображение на базе 64" это действительно полезный метод, который также легко чрезмерно использовать.
Это руководство охватывает обе половины этого урока. Я покажу, как преобразовать изображение в base64 с помощью Конвертер изображений в Base64 на Toolz.dev, как декодировать base64 обратно в изображение, что на самом деле представляет собой URI данных, и честные компромиссы, чтобы вы встраивали активы, которые приносят пользу, и оставляли те, которые этого не делают.
TL;DR: Преобразование изображения в base64 превращает его двоичное содержимое в текстовую строку, обычно обернутую URI данных
data:image/png;base64,iVBORw0KG.... Эта строка вставляется непосредственно в HTML, CSS, SVG или JSON без отдельного запроса файла. Конвертер Toolz.dev кодирует и декодирует в обоих направлениях, полностью работает в вашем браузере, поэтому изображение никогда не загружается, и дает вам необработанную базу 64, готовый URI данных, а также<img>тег, и фрагмент CSS.Base64 раздувает размер примерно на треть, поэтому встроенные небольшие активы, как значки, а не большие фотографии.
Что такое изображение base64, именно?
Base64 - это схема кодирования, а не сжатия, а не шифрования. Схема определяется RFC 4648, и data: URI, который завершает его РФЦ 2397. Он представляет произвольные двоичные данные, используя 64 печатных символа ASCII: буквы от A до Z и от a до z, цифры от 0 до 9 плюс + а /, с = используется для заполнения Схема определена в RFC 4648, том же стандарте, который управляет базой 64, которую вы видите в вложениях электронной почты и полезных нагрузках JSON.
Причина, по которой он существует, заключается в том, что большая часть интернета и #39;s сантехника была построена для текста, а не необработанных байтов. двоичные данные могут содержать значения байтов, которые будет искажать текстовый канал.Base64 обходит это, взяв три байта входных данных, разделив эти 24 бита на четыре группы по шесть и сопоставив каждую группу с одним из 64 символов. Три байта в, четыре символа в сторону. Это соотношение три к четырем - это именно то, почему закодированный выходной сигнал примерно на 33 процента больше исходного, число, которое стоит запомнить, потому что оно решает, является ли инлайнинг хорошей идеей.
"base64 image" - это просто файл изображения, который был запущен через эту кодировку. сама по себе строка - это просто текст. Что делает ее отображаемой, так это помещает ее в URI данных.
Что такое URI данных и почему браузер его отображает?
URI данных - это URL-адрес, который несет свою полезную нагрузку в строке вместо указания на удаленный ресурс. Его форма, определенная в RFC 2397, равна data:[<media-type>][;base64],<data>. Для PNG, который выглядит как data:image/png;base64,iVBORw0KGgo..., йо-
Важным произведением является тип носителя, image/png в том примере. он сообщает браузеру, как интерпретировать следующие байты. поскольку URI данных объявляет свой собственный тип MIME, браузер может обрабатывать data:image/png;base64,... в качестве изображения в тот момент, когда он анализирует атрибут, ожидающий URL-адрес, независимо от того, является ли он таковым src из <img> или url() в CSS background-image. Никакой сетевой поездки туда и обратно не происходит, потому что нечего взять. Изображение уже есть, прописано в наценке.
Это вся магия и вся стоимость в одном предложении. изображение уже есть, поэтому оно отображается мгновенно, а также почему его нельзя кэшировать отдельно или делиться между страницами так, как это может сделать связанный файл.
Как преобразовать изображение в base64 на Toolz.dev?
выше Конвертер изображений в Base64 имеет два направления, а кодирование - по умолчанию.
Выберите & quot;Image to Base64& quot; направление, затем загрузите или сбросьте изображение. инструмент считывает файл локально с помощью API файла браузера, и поскольку это чтение происходит в вашем браузере, изображение никогда не переходит на сервер. После его загрузки вы получаете предварительный просмотр плюс четыре выхода, каждый со своей собственной кнопкой копирования.
Необработанная база64 - это голая строка, полезная, когда у вас уже есть собственная обертка URI данных является полным data:... строка готова вставить в src или url(). HTML <img> тег - это полный элемент, который вы можете опустить в шаблон.The CSS background-image объявление готово для таблицы стилей. наряду с теми, которые вы видите размер декодированного байта и количество символов base64, так что вы можете судить вес перед фиксацией. если число выглядит тревожным, то это инструмент, выполняющий свою работу: фотография 200 КБ, становящаяся строкой 270 КБ в вашем HTML, - это именно момент для пересмотра.
Как декодировать base64 обратно в изображение?
Переключитесь на & quot;Base64 в Image& quot; направьте и вставьте либо необработанную строку base64, либо полный URI данных. конвертер терпим к входу: он удаляет пробелы, и если вы вставляете полный data:image/png;base64,... строка считывает тип MIME прямо из префикса Если вставить голую базу64 без префикса, предполагается PNG, что является безопасным по умолчанию для большинства скриншотов и экспортированных активов.
Сначала он проверяет строку. если то, что вы вставили, не является правдоподобным base64, то есть содержит символы за пределами алфавита RFC 4648, инструмент сообщает вам, а не показывает сломанное изображение. когда вход проверяет, вы получаете предварительный просмотр в реальном времени и кнопку загрузки, которая восстанавливает исходный двоичный файл и сохраняет его с правильным расширением. Это направление действительно удобно, когда вы находите URI данных, закопанный в таблицу стилей или ответ API, и хотите увидеть, что это на самом деле, или извлечь его обратно в реальный файл.
Здесь все на стороне клиента, что является тем же обещанием, которое проходит через остальную часть набора инструментов, от текстовой ориентации Конвертер Base64 в кодировщик URL. Если вам нужны более широкие причины сохранения такого рода работы в браузере, руководство по кодированию Base64 углубляется в саму кодировку.
Когда мне следует вставить изображение в качестве base64, а когда нет?
Это решение, которое существует для информирования инструмента, поэтому вот таблица, которую я действительно использую.
| положение | Встроенный как base64? | почему |
|---|---|---|
| Небольшой значок или логотип, используемый по всему сайту | Часто да | Удаляет запрос, появляется мгновенно, накладные расходы крошечные |
| Крошечный фон SVG или 1px | да | Накладные расходы в 33 процента незначительны для нескольких сотен байт |
| Экспорт HTML-кода в одном файле или электронная почта | да | Файл должен быть автономным, внешние активы не допускаются |
| Фотография или баннер большого героя | нет | Накладные расходы велики, и изображение нельзя кэшировать отдельно |
| Изображение повторно используется на многих страницах | нет | Связанный файл кэшируется один раз и передается; встраивание дублирует его повсюду |
| Образ контента, который часто меняется | нет | Редакторы не могут поменять блок base64 так же легко, как файл |
Шаблон за столом прост.Inlining торгует сетевой запрос на байты в вашем документе. что торговля выигрывает, когда актив мал, а сохраненный запрос имеет значение, что является классическим случаем для значков над складкой. он теряет, когда актив большой или общий, потому что вы платите 33-процентный налог, вы теряете независимое кэширование, и вы раздуваете тот самый файл, который браузер должен проанализировать, прежде чем он сможет что-либо нарисовать.
Для строк & quot;no & quot; лучше всего оптимизировать файл и нормально его обслуживать. именно здесь инструмент нравится Изображение компресс или конвертер формата зарабатывает на жизнь, сокращая актив, чтобы связанная версия была максимально легкой. Я написал больше обо всем этом рабочем процессе Набор инструментов для веб-разработчиков гид.
Сохраняет ли base64 мое изображение в тайне?
Да и нет, и различие имеет значение.Base64 является кодировкой, поэтому любой, у кого есть строка, может декодировать ее обратно к точному исходному изображению.Она обеспечивает нулевую секретность.Не рассматривайте URI данных как способ скрыть что-либо, потому что & quot;Base64 к Image& quot; направление этого самого инструмента переворачивает его в одну вставку.
Что является приватным, так это само преобразование.На Toolz.dev изображение читается и кодируется полностью в вашем браузере с API файла, и ничего не загружается.Так что художественное оформление, скриншот, логотип клиента, который вы кодируете никогда не покидает вашу машину в процессе. это другая гарантия от кодировки скрывая контент, и я стараюсь быть точным в этом, потому что "private" разбрасывается свободно. конфиденциальность в локальной обработке, покрывается более широко в конфиденциальность данных руководство, а не в базе64 как схема.
Несколько практических советов от доставки этого
Предпочитайте SVG для значков, когда вы можете, и встроить разметку SVG напрямую, а не кодировать ее по базе64. SVG уже является текстом, поэтому перенос его в базу 64 добавляет только 33-процентный налог просто так. Base64 светится для растровых форматов, таких как PNG и JPEG, которые действительно двоичны.
Смотрите общий размер документа, а не только одно изображение. Один встроенный значок невидим. Сорок из них, ошибка, которую я совершил на этой панели управления WordPress, превращают бережливый лист стилей в монстра. Если вы встраиваете более горстки, это сигнал отступить и вместо этого рассмотреть связанный спрайт или шрифт значка.
Держите тип MIME честным. если вы экспортируете JPEG, но пометьте его URI данных как image/png, некоторые браузеры справляются, а некоторые нет. конвертер обнаруживает реальный тип из файла, поэтому вывод правильный, но если вы вручную собираете URI данных в другом месте, сопоставите тип мультимедиа с фактическими байтами.
И когда вы наследуете кодовую базу, полную URI загадочных данных, запомните направление декодирования. Вставка одного в & quot;Base64 в Image& quot; сторона и попадание в загрузку - это самый быстрый способ увидеть, что на самом деле отправляет таблица стилей.
Как на самом деле работает кодирование base64, шаг за шагом?
Помогает увидеть механику один раз, потому что вся 33-процентная накладная история выпадает из нее естественным образом.Base64 работает на группах по три байта за раз. три байта - это 24 бита.Кодер разрезает эти 24 бита на четыре куска по шесть битов каждый. Шесть битов могут представлять 64 значения, от 0 до 63, и каждое из этих значений отображается на один символ в алфавите base64: от A до Z для 0 до 25, от a до z для 26 до 51, цифры от 0 до 9 для 52 до 61, затем + для 62 и / за 63.
Таким образом, три входных байта всегда становятся четырьмя выходными символами. Это источник увеличения размера. Четыре символа несут информацию о трех байтах, соотношение 4 к 3, что то же самое, что сказать, что выход на одну треть больше, чем вход. Обойти его невозможно, потому что он пропитан тем, как работает схема.
Паддинг обрабатывает остатки. Если ваши данные не являются чистыми кратными трем байтам, кодер заполняет окончательную группу, чтобы она по-прежнему выдавала целое количество символов, и добавляет один или два = знаки для записи, сколько заполнения он добавил. Вот почему строки base64 так часто заканчиваются = или ==. Одиночный след = означает, что последняя группа содержала два байта; двойной == означает, что он удерживал один. конвертер Toolz.dev обрабатывает заполнение автоматически в обоих направлениях, и при декодировании он с радостью принимает строки с или без конечного =, потому что некоторые системы его лишают.
Вы можете наблюдать за этим воспроизведением с помощью крошечного примера. три байта ASCII для букв & quot;Man& quot; кодировать в четыре символа & quot;TWFu& quot;, известный пример прямо из литературы по кодированию.Drop эти же три символа в URI данных в виде текста и вы можете увидеть путешествие туда и обратно, или запустить реальное изображение через инструмент и заметить, что количество символов в выходе всегда составляет около четырех третей от количества байтов, показанного рядом с ним.
Понимание этого также объясняет, почему base64 плохо подходит для больших изображений и хорошо подходит для крошечных Накладные расходы - фиксированный процент, поэтому на 300 байт значок это стоит вам 100 байт, никого это не волнует На двух мегабайт фотографии это стоит вам две трети мегабайт чистого текста раздувается в вашем документе, и этот документ должен быть загружен и проанализирован, прежде чем страница может рендеринг. математика не меняется с размером, но последствия это делают.
Часто задаваемые вопросы
Как преобразовать изображение в Base64?
Выберите направление Изображение в Base64, затем загрузите или сбросьте изображение. инструмент считывает файл локально, кодирует его и возвращает необработанный Base64 плюс готовый к использованию URI данных, тег img и фрагмент CSS, который вы можете скопировать.
Что такое URI данных?
URI данных - это строка, которая встраивает файл в линию вместо ссылки на него в виде данных: [тип mime];base64, [данные]. Для PNG это выглядит как данные: изображение/png;base64,iVBORw0KGgo... Браузеры отображают его как изображение везде, где ожидается URL-адрес, поэтому отдельный запрос не требуется.
Могу ли я преобразовать Base64 обратно в изображение?
Да. Переключитесь на Base64 в направлении изображения и вставьте либо необработанную строку Base64, либо полный URI данных. Инструмент декодирует его, показывает предварительный просмотр и позволяет загрузить восстановленный файл изображения.
Какие форматы изображений поддерживаются?
поддерживаются PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO и AVIF. Правильный тип MIME обнаруживается из файла, поэтому результирующий URI данных отображается правильно.
Почему строка Base64 больше моего изображения?
Base64 представляет три байта двоичных данных с четырьмя текстовыми символами, поэтому кодированный вывод примерно на 33 процента больше исходного. Именно из-за накладных расходов Base64 подходит для небольших значков и логотипов больше, чем для больших фотографий.
Безопасно ли здесь конвертировать изображения?
Да. каждое изображение полностью читается и кодируется в вашем браузере с помощью API файла. Никакой файл, строка или результат не загружаются на сервер, поэтому личные изображения остаются на вашем устройстве.
Должен ли я вставлять изображения в Base64 в производство?
Встраивание хорошо работает для небольших, часто используемых ресурсов, таких как значки, потому что он удаляет HTTP-запрос и позволяет избежать вспышки недостающего изображения. для больших изображений обычно лучше хранить отдельные файлы, чтобы браузер мог кэшировать их независимо.
Работает ли конвертер в автономном режиме и на мобильном?
Да. поскольку вся обработка осуществляется на стороне клиента, она работает после того, как страница загрузилась даже без подключения, а интерфейс реагирует на современные настольные и мобильные браузеры.
