translit-online.ru

Перевод изображений в текст по стандарту кодирования Base64

чистый код КОД
HTML <img src="data:image/ТИП;base64,КОД">
CSS background-image:url("data:image/ТИП;base64,КОД");
FAVICON <link rel="icon" type="image/ТИП" href="data:image/ТИП;base64,КОД">

Результат кодирования

Данный сервис преобразует двоичные файлы в текст по методу Base64. В зависимости от выбранной опции можно получить чистый текстовый код файла, либо код с добавленными тегами для вставки в html-текст страницы, в стили css и тегами фавикона в заголовке страницы. Тип изображения (gif, png, jpg ...) для тегов берётся из расширения кодируемого файла.

Кодирование картинок в текст часто применяется в сайтостроении. Для ускорения работы сайта полезно уменьшать количество файлов, отдаваемых веб-сервером. Для этого изображения можно передавать, закодированными в текст, прямо в html- и css- файлах.

Браузеры распознают закодированные в текст изображения по специальным тегам.

Примеры включения изображений в текст страниц (КОД - полученный текстовый код):

- Изображение в HTML-документе:

<html>
  <body>
    ...
    <img src="data:image/jpeg;base64,КОД">
    ...
  </body>
</html>

- Изображение в стилях:

<style>
  ...
  div.my-image {
    width:150px;
    height:150px;
    background-image:url("data:image/jpeg;base64,КОД");
  }
  ...
</style>

- Favicon:

<html>
  <head>
    ...
    <link rel="icon" type="image/gif" href="data:image/gif;base64,КОД">
    ...
  </head>
</html>