• Главная
• Статьи
• Учебники
• Шпаргалки
• Программы
• Контакты

	Категория: Веб-мастерство
	Название: Как добавить изображение прямо в код
	Дата добавления: 20-03-2012
	Раз просмотрено: 2023
	Комментарии: 8
	Рейтинг: (4 голоса)

Как добавить изображение прямо в код

Если вы профессионально занимаетесь веб-разработками, наверняка, у вас мог возникнуть вопрос: «Как поместить изображение прямо в код, не прибегая к тегу img или CSS свойствам?» На это есть ответ, и это — Base64. Другие могут спросить: «А чем же Base64 лучше?». Ответов много, и главное – это многократное увеличение скорости загрузки вашего сайта, за счет уменьшения HTTP-запросов.

Base64 — это способ кодировки двоичного изображения в системе счисления с основанием 64. После кодирования, мы получаем строку, состоящую из цифр, латинских букв в верхнем и нижнем регистре и нескольких символов (вид этих символов зависит от вида алгоритма кодирования). После этого, полученную строку можно использовать в самом коде для получения изображения, без подключения внешних картинок.

Получение Base64 изображения

Многие веб-мастера используют онлайн сервисы для получения Base64 изображения. Однако, этот способ медленный и не очень неудобный. Но если вам необходим этот способ, то на моем сайте есть онлайн сервис генерации Base64 изображения. Самым оптимальным вариантом будет использование самописного PHP скрипта в несколько строчек:

<?php
// Путь до изображения:
$image = "folder.gif";

echo base64_encode(file_get_contents($image));
?>

Откройте эту страницу в браузере. В результате выполнения этого скрипта мы получили Base64 изображения папки: . Закодированное изображение представляет собой довольно длинную строку из чисел и символов. Большие изображения крайне нежелательно кодировать и использовать таким образом.

Применение

Теперь, когда мы получили Base64 нашего изображения, пора научиться как его использовать. Изображения в HTML мы будем все так же вставлять с помощью тега img, однако его атрибут src несколько изменится:

<img src="data:image/gif;base64,КОД_ИЗОБРАЖЕНИЯ" alt="" />

Вместо КОД_ИЗОБРАЖЕНИЯ вставляйте результат выполнения Base64 PHP скриптом с вашим изображением. Разберем эту конструкцию. В src у нас получаются 4 важные части:

1. data: — этим мы указываем что передаем изображение в коде.
2. image/gif; — тип нашего изображения. Может быть также image/jpeg, image/png и так далее.
3. base64, — указываем, что изображение закодировано в Base64.
4. Base64 нашего изображения.

В CSS все делается аналогично. Например в свойстве background-image мы вместо адреса картинки используем разобранную выше конструкцию:

body {
  background-image: url("data:image/gif;base64,КОД_ИЗОБРАЖЕНИЯ");
  background-repeat: repeat-x;
}

Преимущества Base64:

• Существенно ускоряет загрузку сайта за счет снижения количества HTTP-запросов.
• Упрощает работу с изображениями в связке с HTML и CSS.

Недостатки Base64:

• Internet Explorer 7 и более ранние версии его не воспринимают.
• Такие изображения в HTML не кэшируются.

Это интересно: «Типографика в веб-дизайне».