Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Как добавить изображение прямо в код Категория: Веб-мастерство
Название: Как добавить изображение прямо в код
Дата добавления: 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:

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

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

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Гость  •  2012-08-16 22:13:46
для чайника не очень понятно, для спеца не интересно. Для кого написано-наверно для себя.
Гость  •  2012-08-25 23:49:07
А мне понравилось, наверное я по середине!
Гость  •  2012-09-27 08:57:46
Как раз таки для чайников самое то...
Гость  •  2012-11-22 15:06:28
Кому не интересно, пусть и не смотрит.
Спасибо автору за труд. Любой труд ценить нужно.
Гость  •  2013-01-05 17:37:40
Спасибо, интересно!
Гость  •  2013-01-27 18:28:57
Здравствуйте! Я чайник. Можно это как-нибудь упростить? Куда и что вставлять не очень понятно
Влад  •  2013-02-07 02:43:25
для автоматического кодирования изображений для joomla есть плагин который автоматом меняет все картинки сайта в код base64, объединяет все css сжимает и кеширует - сказка!
Но мне показалось что Google это не понравилось и я по срочному выключил опцию кодировать изображения.
Хотя скорость загрузки сайта была шикарной. жаль!
Кто точно может сказать как к этому относятся поисковики?
Петр  •  2013-05-05 12:56:32
По моему все элементарно, хоть сам чайник.