Встраивание PNG-изображений в HTML-страницы

Задача встраивания PNG-изображения в HTML-страницу без привязки к файлу изображения вызывает вопрос : как включить данные изображения непосредственно в HTML?

Встраивание с помощью кодировки Base64

Кодирование Base64 обеспечивает решение для встраивания изображений в HTML. Доступны различные онлайн-кодировщики Base64, но рекомендуется использовать надежный, например, тот, который можно найти по адресу http://www.greywyvern.com/code/php/binary2base64.

Этот инструмент представляет два основных варианта встраивания. : с помощью CSS или тега .

Встраивание CSS

В CSS встраивание можно осуществить следующим образом:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORwA);
}

Встраивание тега

В качестве альтернативы можно использовать тег :

Используя кодировку Base64, вы можете встраивать изображения PNG непосредственно в HTML-страницы, позволяя отображать изображения без необходимости внешние файлы изображений.