Картинки в base64
Дек 142017Base64 представляет собой метод кодирования данных в ASCII формат. В таком формате мы можем закодировать ссылки, картинки, файлы, теоретически всё что угодно. На выходе мы получим код, типа YmFzZTY0 (base64), который можно декодировать с помощью браузера и получить исходное значение.
Зашифровать (закодировать) тексты вы можете на моём сервисе md5.opiums.eu, или же с помощью php файла (echo base64_encode). Но речь сейчас пойдёт не о кодировании ссылок или текста, а о шифровании картинок.
С помощью этого метода мы можем добавлять картинки на сайт, не загружая их на сервер, т.к. используем зашифрованный код картинки. Главное не забывать, что страничка увеличится на тот объём данных, который занимает картинка и не использовать большие изображения.
Выше добавлен сервис кодирования картинок в base64. Сервис поддерживает 4 формата - gif, jpeg, pjpeg, png. После загрузки изображения мы получим HTML тег и Base64 код. О тегах я рассказывать не буду, этому вас научит HTML учебник, разберём непосредственно сам код:
data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
82lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjardA/SgNBHMXx70TULloE67mAgmu15eQPi2AR
YopsqkxmBw1hd4fZn3/2Bh7B43iDFIIXUVJbqARLwU/1eM2DB+rZDPujzjGUlcRsYvJZPteHGw7Y
AwDrmmDG4yuAqq48vynYvqEAXk/NsD/ib/ZdiAK8AEnhGwd8AKsHCQJqAfSW6yCgBOitp5MBqCeg
K/5RAAZ1aOPq5lb0eZqm2hT10uvrthFfNvqycnUMdbTiC+B7A+Aoi7bVmS1Lq5OzhH83y+f6K71P
UYA62ey6HXcX73/+7FzAJ0sbODDOTdGSAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAA
ADqYAAAXb5JfxUYAAACRSURBVHjaBMFdS4NgGADQ89Kjk5z0QXWxDeq26D/2Q+siRjQMa0xNpm3V
OekpCZlcJjn6MTmEzMxc5VSY9FpDyFRuLF3J9WobTShcuHXvTunTM8ZQOLfy4NFcLdlqwomZyrWF
M8mlUh5+Hez1On86g9ExTDq1F0mp8arxHUZba8mHws67jS6MWgzehL3Wl/5/AGY7NAWQ1C5yAAAA
AElFTkSuQmCC data:image/png; - указывает нам на то, что используется картинка в png формате
base64, - непосредственно формат кода, в котором зашифровано изображение
iVBORw0KGgoAAAANSUhEUgAAAA... - сам base64 код
Пример данной картинки выглядит так - 
, а её HTML код:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
82lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjardA/SgNBHMXx70TULloE67mAgmu15eQPi2AR
YopsqkxmBw1hd4fZn3/2Bh7B43iDFIIXUVJbqARLwU/1eM2DB+rZDPujzjGUlcRsYvJZPteHGw7Y
AwDrmmDG4yuAqq48vynYvqEAXk/NsD/ib/ZdiAK8AEnhGwd8AKsHCQJqAfSW6yCgBOitp5MBqCeg
K/5RAAZ1aOPq5lb0eZqm2hT10uvrthFfNvqycnUMdbTiC+B7A+Aoi7bVmS1Lq5OzhH83y+f6K71P
UYA62ey6HXcX73/+7FzAJ0sbODDOTdGSAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAA
ADqYAAAXb5JfxUYAAACRSURBVHjaBMFdS4NgGADQ89Kjk5z0QXWxDeq26D/2Q+siRjQMa0xNpm3V
OekpCZlcJjn6MTmEzMxc5VSY9FpDyFRuLF3J9WobTShcuHXvTunTM8ZQOLfy4NFcLdlqwomZyrWF
M8mlUh5+Hez1On86g9ExTDq1F0mp8arxHUZba8mHws67jS6MWgzehL3Wl/5/AGY7NAWQ1C5yAAAA
AElFTkSuQmCC" alt="" />Кроме того, мы можем использовать картинки в CSS стилях:
body {
background: url("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAQAAAAnOwc2AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
82lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjardA/SgNBHMXx70TULloE67mAgmu15eQPi2AR
YopsqkxmBw1hd4fZn3/2Bh7B43iDFIIXUVJbqARLwU/1eM2DB+rZDPujzjGUlcRsYvJZPteHGw7Y
AwDrmmDG4yuAqq48vynYvqEAXk/NsD/ib/ZdiAK8AEnhGwd8AKsHCQJqAfSW6yCgBOitp5MBqCeg
K/5RAAZ1aOPq5lb0eZqm2hT10uvrthFfNvqycnUMdbTiC+B7A+Aoi7bVmS1Lq5OzhH83y+f6K71P
UYA62ey6HXcX73/+7FzAJ0sbODDOTdGSAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAA
ADqYAAAXb5JfxUYAAACRSURBVHjaBMFdS4NgGADQ89Kjk5z0QXWxDeq26D/2Q+siRjQMa0xNpm3V
OekpCZlcJjn6MTmEzMxc5VSY9FpDyFRuLF3J9WobTShcuHXvTunTM8ZQOLfy4NFcLdlqwomZyrWF
M8mlUh5+Hez1On86g9ExTDq1F0mp8arxHUZba8mHws67jS6MWgzehL3Wl/5/AGY7NAWQ1C5yAAAA
AElFTkSuQmCC");
}
/* Создаёт фон из картинки */Некоторые base64 сервисы не поддерживают прозрачные картинки при кодировании, поэтому после кодирования в них можно наблюдать чисто черный фон, или другие артефакты. У меня такой проблемы нет, и для примера выводится картинка base64 в формате gif.
Так же необходимо учитывать, что некоторые браузеры не поддерживают переносы в коде base64, поэтому с этим нужно быть аккуратнее. И ещё раз, не забываем о размере изображений он равен коду, который вы будете добавлять себе на страничку.