Как вставить base64 в html
WebComplex – самостоятельное создание сайтов
Все о самостоятельном создании сайта
Используем base64 строку вместо картинки
Конвертировать файл изображения в base64 строку – это очень удобная вещь. Base64 картинки мы можем использовать в создании e-mail писем или заключить фоновую картинку блока внутрь CSS файл, тем самым уменьшив количество запросов к серверу и увеличив скорость загрузки страницы.
Не стоит думать что base64 картинки – это наше все 🙂
Нужно с умом подходить к замерам полученных результатов. Но учитывая скорости современного интернета, время загрузки картинки может быть быстрее отклика самого сервера.
В современном мире веб-дизайна идет “борьба” за сокращение количества запросов к серверу, тут и спрайты и base64 изображения могут быть хорошими помощниками.
Онлайн сервисы конвертирования изображения в base64 строку
Ниже предоставляю ссылку на сервисы кодирования картинок в строку:
по сути они одинаковы, но всегда приятнее когда есть выбор 🙂
Вставляем base64 картинку, как img тег
Вставляем base64 картинку, как CSS фон
Пример использования base64 изображения
Небольшой пример использования base64 строки в качестве теговой и фоновой картинки. 
Если у вас остались вопросы по использованию конвертированных base64 изображений или у вас есть свои мысли на этот счет, буду рад если вы ими поделитесь в комментария к этому посту.
2 thoughts on “ Используем base64 строку вместо картинки ”
Как менять изображения в base64 строке с помощью команды:
document.getElementById(id).src=”. ”;
А зачем вам менять картинку? может более удобнее сделать замену с помощью jQuery если оно у вас подключено к проекту.
Добавить комментарий Отменить ответ
Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.
Выводим изображение в кодировке Base64 на HTML/CSS и сохраняем его на jQuery+PHP
Base64 – это некий стандарт кодирования информации посредством только 64 символов таблицы ASCII. В эту таблицу входят символы латинского языка (A-Z и a-z), цифры от 0 до 9, а также некоторые знаки.
Принцип этого кодирования – представление любой цифровой информации в виде уникального набора символов этой таблицы.
Чтобы вы наглядно понимали, что это такое, поясню. Перед вами изображение:
А вот его кодировка Base64:
Что нас здесь интересует? Как сохранить такие данные и представить их в читабельном виде на примере все тех же изображений.
Выводим изображение в формате Base64 на HTML/CSS
В HTML встраивание подобного рода кода осуществляется с помощью всем привычного тега IMG. И на примере все той же картинки результат будет следующим:
Помимо этого, Base64 можно встроить и в CSS-файл:
Какие есть преимущества у этой кодировки? Основное преимущество – это то, что изображения вы не храните на своем сервере и вообще ни на каком в принципе, а просто размещаете нужные вам файлы в теле страницы обычным текстом.
Сохранение изображения в формате Base64 на jQuery+PHP
Чуть выше мы разобрали с вами встраивание изображений непосредственно в страницу вашего сайта с помощью HTML и CSS, а сейчас мы рассмотрим способ сохранения такого изображения на вашем сайте.
В одной из статей был рассмотрен вопрос о том, как же сделать скриншот элемента на JavaScript, используя библиотеку html2canvas. В примере мы рассматривали скриншот как уже готовое изображение, но мы не упомянули, что при использовании там кода:
можно получить изображение как раз в кодировке Base64.
Давайте попробуем сохранить это (вы можете использовать свое) изображение в кодировке Base64, используя технологию AJAX и не большой PHP-скрипт.
Начнем с jQuery. Скрипт, который будет посылать в обработчик (PHP-скрипт) наши данные, будет выглядеть следующим образом:
Где «base_image» – данные изображения в Base64, «/upload/base-image.php» – путь до PHP-скрипта, а «#result» – ID элемента, в который будет выводиться результат.
Сам же скрипт-обработчик будет выглядеть следующим образом:
Здесь все предельно просто – получаем данные, обрабатываем и сохраняем их в той же директории, что и сам обработчик.
В качестве функции запуска я использовал обычную загрузку страницы, вы же можете привязать ее, например, к клику по ссылке или другому нужному вам действию.
Расписал вроде все максимально подробно, но если какие-то моменты вызывают у вас трудности, не стесняйтесь и задавайте их в комментариях – никого не оставим без внимания.
Как вставить base64 в html
Встроенные (inline) изображения используют схему data:URI для внедрения прямо в тело веб-страницы. Как было определено в RFC 2397, такие URI предназначены для вставки небольших объектов как «непосредственные» данные. Такие объекты должны рассматриваться так же, как и любые другие внешние файлы. Использование встроенных изображений позволяет сэкономить HTTP-запросы к внешних ресурсах.
Поддержка браузерами data:URL
Схема data:URL
В случае простых изображений вам нужно указать mime-тип для них (например, image/gif ), за ним идет base64-представление бинарного файла с изображением. Ниже приведен пример (переводы строк добавлены, чтобы не разрывать страницу, на самом деле, их нет):
В результате вы получите следующее изображение иконки папки (частичный скриншот ниже):
CSS и встроенные изображения
Такие изображения, внедренные в HTML-страницы, не кешируются для повторного использования, и они не кешируются от странице к странице (это логично: ведь нам нужно каждый раз загрузить HTML-код для отображения этой картинки, они будут кешироваться только с HTML, их содержащим). Однако, CSS кешируется браузерами, и такие изображения могут быть повторно использованы вместе с использующим их селектором, например:
Теперь иконка папки будет повторяться для каждого вхождения LI (или можно также использовать соответствующий класс или ID ).
Что выглядит в Firefox примерно следующим образом (частичный скриншот):
Проблемы data:URL
С описанным выше подходом для подключения изображений связано две основные проблемы. Во-первых, вам нужно пересчитывать base64-представление изображений и редактировать CSS-файл каждый раз, когда само изображением меняется. Также IE до версии 7 включительно не поддерживает встроенных изображений. У первой проблемы есть простой решение на PHP:
Этот код читает файл с изображением и автоматически преобразовывает его на сервере в base64. Однако, это простота этого решения повлечет некоторую дополнительную нагрузку на сервер. Как вариант можно рассмотреть автоматический пересчет всех картинок и вставка их в CSS-файл, например, раз в 5 минут по необходимости (если файл с изображением изменился). Дополнительно нужно будет озаботиться, чтобы сбросить кеширование для самого CSS-файла.
Работа в Internet Explorer
Когда ваш сервер анализирует CSS-файл, он автоматически перекодирует бинарный файл изображения в base64 и отправит эти данные внутри CSS-файла. Следующим шагом будет добавление распознавания браузеров для отправки изображения только IE, и встроенных изображений всем остальным. Это можно сделать либо внутри CSS-файла с PHP-кодом, либо с помощью условных комментариев, например:
В файле ie.css должно быть нормальное обращение к картинке, например:
Лично мне вышеприведенный код кажется сомнительным: все браузеры, кроме IE, посчитают, что CSS-файлы закомментированы и вообще к ним не обратятся. Поэтому я бы советовал оставить комментарии только для первого файла и переместить его вызов в конец, чтобы он переопределял общие стилевые правила.
Преимущества data:URL
Недостатки data:URL
Встроенные изображения не поддерживаются в Internet Explorer 5–7, хотя сообщается, что версия 8 их поддерживает. Текстовое base64-представление данных также занимает больше, чем бинарное изображение. В наших тестах base64-данные были на 39–45% больше бинарного аналога, но gzip-сжатие позволяет уменьшить разницу до 89%. Предварительная оптимизация изображений перед base64-кодированием позволяет уменьшить их размер пропорционально.
Также существует ряд ограничений на размер встроенных изображений. От браузеров требуется поддерживать только URL длиной до 1024 байтов, в соответствие с вышеупомянутой спецификацией RFC. Однако, браузеры более либеральны к пользователям в том, что они принимают. Например, Opera ограничивает data:URL до примерно 4100 символов. Firefox поддерживает data:URL вплоть до 100Кб. В итоге, эта техника подходит больше для небольших по размеру изображений. Краткий список минусов:
Примеры data:URL
Ниже приведено несколько примеров, которые вы можете проверить в своем браузере. Все они отражают вышеприведенный код.
Дополнительные соображения по оптимизации
Также возможно автоматическое кодирование изображений, которые выводятся в base64, автоматически при изменении этих изображений (для этого потребуется простой скрипт, который проверяет, обновились ли соответствующие файлы, если обновились, то перезаписывает их представление в CSS-файле, заодно и меняет хеш-строку для подключения этого файла в HTML, чтобы избежать кеширования.
Для включения небольших графиков прямо в HTML-код прекрасно подойдут условные комментарии, когда для ряда браузеров изображение выводится в base64, а для остальные в виде IE подключается через условные комментарии. Если использовать связку относительное позиционирование родителя абсолютное позиционирование дочернего элемента, то IE будет просто выводить картинку из внешнего файла поверх непонятного (для него) объекта. Например, так:
Хочу подчеркнуть, что решение об использовании data:URL должно приниматься на основе статистики использования браузеров для просмотра сайта (для webo.in доля IE составляет меньше 20%, что позволяет использовать более прогрессивные методы для оптимизации скорости загрузки).
Заключение
С релизом Internet Explorer 8 data:URI должны стать реальной альтернативой существующим методам вывода изображений. Вы можете вставить небольшие изображения прямо в тело страницы с помощью data:URL для экономии числа HTTP-запросов. data:URL является удобным способом для создания автономных веб-страниц, которым не требуются никакие внешние объекты для полного своего отображения.
How to display Base64 images in HTML
I’m having trouble displaying a Base64 image inline.
12 Answers 12
My suspect is of course the actual Base64 data. Otherwise it looks good to me. See this fiddle where a similar scheme is working. You may try specifying the character set.
You can try this Base64 decoder to see if your Base64 data is correct or not.
You need to specify the correct Content-type, Content-encoding and charset.
according to the syntax of the data URI scheme:
If you have PHP on the back-end, you can use this code:
First convert your image to Base64 (encode to Base64). You can do it online or with a PHP script.
After converting you will get the result as
Now it’s simple to use.
You have to just put it in the src of the image and define it there as it is in Base64-encoded form.
This will show an image of Base64 data:
You can put your data directly in a url statement, like:
And to get the image data you can use the PHP function:
So you can copy paste the value of imageData and paste it directly to your URL and assign it to the src attribute of your image.
The + character occurring in a data URI should be encoded as %2B. This is like encoding any other string in a URI. For example, argument separators (? and &) must be encoded when a URI with an argument is sent as part of another URI.
Programing base64 images manually are (almost) impossible so there is a web application to do that. Here is the link for the app: https://www.opinionatedgeek.com/codecs/base64decoder
I know it just outputs a red dot, but it can be useful when you don’t have enough space to include the images or something like that.
The only problem is that this type of encoding is very long, it can be like 20 lines. Hope this helps you!
Как отобразить изображения Base64 в HTML?
У меня возникли проблемы с отображением встроенного изображения Base64.
может кто-нибудь указать мне в правильном направлении?
10 ответов
мой подозреваемый, конечно, фактические данные base64, иначе это выглядит хорошо для меня. См.эта скрипка где работает аналогичная схема. Вы можете попробовать указать набор символов.
вы можете попробовать этот декодер base64 чтобы узнать, верны ли ваши данные base64 или нет.
вам нужно указать правильный тип контента, кодировку контента и кодировку как
в соответствии с синтаксисом схема URI данных:
вы можете использовать этот
сначала преобразуйте изображение в Base64 (encode to Base64). Вы можете сделать это онлайн или с PHP-скрипт.
после преобразования вы получите результат как
Теперь он прост в использовании.
вы должны просто положить его в src изображения и определить там, как это в кодированной форме base64.
Это покажет изображение базы 64 данных:
символ+, встречающийся в URI данных, должен быть закодирован как %2B. Это похоже на кодирование любой другой строки в URI. Например, разделители аргументов (? и &) должен быть закодирован, когда URI с аргументом отправляется как часть другого URI.
вы можете поместить свои данные непосредственно в заявлении адрес, как
и для получения данных изображения u может использовать функцию php
таким образом, вы можете скопировать вставить значение imageData и вставить его непосредственно в url-адрес и назначить его атрибуту src вашего изображения
кажется, есть какая-то ошибка в URL-адресе данных.
вы можете использовать этот онлайн кодировка base64 / base64 декодировать инструмент для кодирования изображений для встраивания: http://base64online.org/encode/
проверить формат «в качестве URL-адресов» в формате base64-данные в URL-адрес.
то, что я сделал, это завершить url с img.jpg, чтобы избежать кэширования и потерять возможность проверить, если клиент открыл письмо полный URL выглядит как» http://midomain.com/ /img.jpg «
используя случайные вещи, как часть URL, Google не будет кэшировать изображения. Важной частью является завершение URL-адреса с допустимым именем изображения с расширением.
Это мой код Symfony (я думаю, что это будет хорошо для голого PHP тоже), чтобы отправить изображение.
на exit очень важно, чтобы PHP не отправлял что-нибудь другое.
не рекомендуется для производства, поскольку он совместим только с современными браузерами.