Выводим изображение в кодировке 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
Try out some of Our Tools
Используйте бесплатный онлайн Конвертер изображений для быстрой загрузки изображений и их преобразования в строку base64. Изображения могут быть в форматах jpeg, gif и png.
Base64 — это алгоритм кодирования, который позволяет преобразовывать любые символы в алфaвит, содержащий латинские буквы, цифра, символы “+” и “/”. Благодаря этому алгоритму даже китайские иероглифы, эмоджи и изображения могут быть преобразованы в “читаемую” строку.
В компьютерных науках Base64 — это группа схем кодирования двоичного текста, которая представляет двоичные данные в формате строки ASCII через их перевод в radix-64 представление. Термин Base64 происходит от определенной кодировки передачи содержимого MIME. Каждая цифра Base64 представляет ровно 6 бит информации. Три 8-битных байтов (т.е. 24 бит), следовательно, могут быть представлены четырьмя 6-битными цифрами.
Свойственный всем схемам кодирования двоичного текста, Base64 предназначен для отправки данных, хранящихся в двоичных форматах, по каналам, которые надежным образом поддерживают текстовое содержимое. Base64 особенно распространен во Всемирной паутине, где он используется для вставки файлов-изображений или других двоичных ресурсов в текстовые ресурсы, подобно файлам HTML и CSS. (Wikipedia)
Изначально алгоритм назывался “печатаемое кодирование” (printable encoding), и только в июне 1992 RFC 1341 дал ему название “Base64”. 64 символов представляют 64 значений разрядов, и они могут иметь разные применения.
История алгоритма Base64 началась, когда между инженерами были разногласия по поводу того, сколько бит должно быть в байте. Несколько десятилетий назад использовались 7-битные, 6-битные и 3-битные байты. Но когда 8-битный байт был утвержден в качестве стандарта, многие системы все еще продолжали использовать старые стандарты и не принимали новый. Тогда произошли некоторые проблемы. Например, почтовый сервер отбрасывал восьмой бит при отправке электронных сообщений, или можно было отправить только текст. Отправка изображений, видео, архивов было невозможно. И таким образом для решения подобных проблем был разработан новый алгоритм.
Base64 широко используется, чтобы кодировать двоичные данные, такие как изображения или звуковые файлы, для вложения в HTML, CSS, EML и в другие текстовые документы. Кроме этого Base64 используется для кодирования данных, которые могут не поддерживаться или быть повреждены при передаче, хранении или выводе. Ниже представлены некоторые применения алгоритма:
- Прикрепление файлов при отправке электронных сообщений
- Вложение изображений в HTML или CSS через данные URI
- Сохранение исходных байтов криптографических функций
- Вывод двоичных данных в виде XML или JSON в запросах к API
- Хранение двоичных файлов в базе данных при недоступности BLOB
Когда использовать Конвертер изображений Base64?
Base64 не отображает изображения, и поэтому Google не формирует индекс изображения, так как он не появляется в процессе поиска изображений.
Можно использовать Конвертер изображений Base64 для не столь важных изображений, которые не приносят трафик, например, для иконок социальных сетей. В таких иконках (например, Twitter, Google+, Facebook и др.) изображения такие маленькие, что нет необходимости в формировании индекса. Такие иконки никогда не приносят трафик.
Лучше всего использовать кодирование base64 для миниатюрных изображений. Если использовать его для крупных изображений, вы получите длинный код в HTML. Большинство веб-страниц имеют от 8 до 12 социальных иконок, и нет необходимости в из загрузке. В этом случае Base64 — это наилучший выбор.
Data URI и Base64-кодирование неразрывно связаны друг с другом. Data URL — это схема унифицированного указателя ресурса, который позволяет включать элемент данных в веб-страницу подобно внешним ресурсам. Data URL — это локатор единообразного ресурса, но он фактически удаленно не определяет местонахождение. Вместо этого, данные ресурсов находятся в URL-строке в виде закодированной строки base64. Это не позволяет браузеру делать дополнительные HTTP-запросы для внешних ресурсов и таким образом может увеличить скорость загрузки страницы.
Data URL сокращает количество HTTP-запросов, которые необходимы браузеру для отображения HTML-документа. Сокращение количества запросов браузера является важной частью оптимизации времени загрузки веб-страниц. Поэтому Data URL может иметь положительный эффект на функционирование.
Data URL обеспечивает быструю загрузку при передаче маленьких файлов
Передача данных через TCP начинается медленно, и каждый внешний ресурс устанавливает новое TCP-подключение к серверу. Скорость передачи может быть замедлен трафиком TCP-подключения.
Меньшая нагрузка сети
Data URL использует меньше трафика, когда нагрузка кодирования данных в виде Data URL меньше нагрузки HTTP-запроса. Например, необходимое для изображения в 600 байт кодирование base64 будет иметь 800 байт, поэтому, если HTTP-запрос требует нагрузки больше 200 байт, data URI будет более эффективным.
Быстрые HTTP-запросы
HTTPS-запросы имеют намного больше нагрузки, чем обычные HTTP-запросы. Если веб-сайт обслуживается с помощью HTTPS, обеспечение ресурсов через Data URL поможет значительно улучшить функционирование .
Как выглядит Data URL?
Data URL — это строка, начинающаяся с данных, за которой следует формат типа MIME. Например, PNG-изображение имеет mime-тип image/png, за которым следует запятая и только потом фактические данные.
Текст обычно передается в текстовой форме, а двоичные данные обычно закодированы в base64.
Ниже представлено, как выглядят Data URL:
Пример Data URL, закодированного в base64:
data:image/png;base64:
Можно использовать закодированную строку base64 в CSS. Скопируйте строку и вставьте в код следующим образом:
Какие минусы при храненнии картинок в base64 в html?
Cпасибо всем ответившим. Попробую подвести итоги.
Из минусов — увелечение размера картинки на 30%. Также ещё использование памяти сервера можно упомянуть. Т.е. если картинка в статье в виде base64, то перед отправкой она будет жрать память сервера. Если же картинка в файле, то просто будет отдаваться статический файл.
Так что сделаю вариант с хранением картинок в отдельных файлах. Чтобы «шпионы» не смогли поглядеть картинки методом перебора, сделаю генератор ссылок на картинки через md5 а не просто идентификатор картинки. Ну и для параноидальных случаев постараюсь сделать возможным переключение, как хранить картинки: вложенными или отдельно.
Anton Mashletov, извиняюсь. думал что решение может быть только одним. Тогда поставлю по всем ответам.
p.s.насчет «удалит ответ» — мне нужно было получить овтет на свой вопрос, а не рейтинг себе набить.
Скопирую сюда свой комментарий из ответа к другому вопросу:
Предположим, что у вас коллективный блог типа Хабра, под публикациями в котором пользователи ведут оживлённую переписку и около каждого комментария отображается аватарка. Допустим, есть публикация под которой 10 пользователей оставили по 10 комментариев. Замечу сразу, это не много. Итого 100 комментариев. Средний размер одной аватарки — 10 килобайт. В случае использования обычных изображений, браузер пользователя загрузит 50 килобайт текста и 100 килобайт изображений. Изображения он закэширует и не будет грузить при обновлении страницы или на других страницах. В случае использования задуманного вами сценария, грузить придётся больше и чаще. Во-первых, base64-кодирование в среднем на треть увеличивает размер данных. То есть все картинки теперь весят 15 килобайт. Так как они внедрены в страницу, загружены будут все экземпляры. И кэшироваться они не будут. Вес страницы увеличится до 1550 килобайт. Поэтому она будет дольше загружаться, дольше анализироваться браузером, и браузер отожрёт больше памяти. Удобство пользователя снижено. Но это ещё не все беды. Если блог ваш раскручен и вы имеете в среднем тысячу пользователей в сутки (опять же, это не много), то web-серверу придётся только для этой вашей публикации отдать около 1500 мегабайт трафика. А если у вас случился хабраэффект и поток пользователей генерирует 100 запросов в секунду, то web-сервер будет генерировать поток данных около гигабита. Ну, и не стоит забывать, что до того, как страница весом 1550 килобайт уйдёт по сети отжирать память пользовательской машины, она будет отжирать память сервера.
Про аватарку речи не идет, тут все понятно. Её сделал через отдельный файл, руководствуясь как раз тем, что вы написали.
Речь про картинки статьи и комментариев. Т.е .про картинки, которые повторяться не будут.