Интеграция изображений PNG непосредственно в HTML

Встраивание изображений PNG в HTML позволяет напрямую отображать их в браузере без внешних ссылок на файлы. Для этого используйте технику кодирования Base64:

Закодируйте изображение PNG в Base64:

Используйте онлайн-кодировщики для преобразования изображения PNG в строку Base64. Эта строка представляет данные двоичного изображения в текстовом формате.

Включить строку Base64 в HTML:

Параметры CSS:

Определите класс CSS для изображения и установите свойство фонового изображения, используя функцию url() и строку Base64. Например:

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

Опция тега изображения:

Альтернативно вставьте строку Base64 непосредственно в тег :

Это преобразует изображение PNG в схему URI данных, которая позволяет браузеру напрямую интерпретировать и отображать изображение.