Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту



PHP Поиск




Наша группа в телеграмм для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Внедрение картинки в таблицу стилей или код страницы

С помощью этого сервиса Вы можете избавиться от длительной загрузки множества маленьких изображений, перенеся коды картинок в CSS - файл стилей. Т.к. браузер Internet Explorer не поддерживает внедрение изображения в текст, то используется для него отдельный код.

Для получения готового для использования кода, укажите изображение, нажмите кнопку "Сгенерировать Код" и вставьте полученное изображение себе на сайт.

Изображение (до 2Kb):

Примеры изображений , , , , , ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, , , ,

Кликните на изображении для получения кода примера.

Для вставки изображения в HTML-код страницы используйте следующий код:

<!--[if !IE]>-->
<img src="data:image/gif;base64,двоичный_код_изображения_закодированный_в_base64" />
<!--<![endif]-->

<!--[if (IE)]>
<img src="ссылка на исходное изображение на вашем сервере для IE" />
<![endif]-->

Для вставки изображения как иконки ссылки в CSS файл используйте следующий код:

<style>
a.ya {
width: XXpx;
height:YYpx;
background:url(data:image/gif;base64,двоичный_код_изображения_закодированный_в_base64)
	top left no-repeat;
}

*html a.ya {
width: XXpx;
height:YYpx;
background:url(ссылка на исходное изображение на вашем сервере для IE) top left no-repeat;
}
</style>
А это сама ссылка:
<a href="#" class=ya> </a>

Техническая информация

Для внедрения картинки на веб-страницы при помощи data:URI используется base64 - кодирование. Эта схема позволяет вставить код картинок прямо в (x)HTML-страницу без обращений к внешним файлам, что уменьшает общее количество HTTP-обращений к серверу. Встроенные или InLine изображения используют схему data:URI для внедрения двоичного кода картинки прямо в тело веб-страницы. Как было определено в RFC 2397, такие URI предназначены для вставки небольших объектов как непосредственные данные. Использование встроенных изображений позволяет сэкономить HTTP-запросы к внешним ресурсам.

Синтаксис у data:URL следующий:

 data:["тип данных"][;base64],"данные"

Допустимый тип данных: image/gif, image/jpeg, image/pjpeg, image/png. Тип данных можно определить с помощью функции mime_content_type

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

  • С помощью data:URL вы экономите количество HTTP-запросов.
  • За счет уменьшения числа параллельных потоков загрузки браузера можно получить очень существенный выигрыш в скорости загрузки страницы при большом количестве небольших иконок / пиктограмок.
  • Упрощают HTTP-запросы и повышают общую производительность.
  • Встроенные картинки кешируются вместе с таблицей стилей

Недостатки data:URL

  • Встроенные изображения не поддерживаются в Internet Explorer 5–7, хотя сообщается, что версия 8 их поддерживает.
  • Текстовое base64-представление данных также занимает больше, чем бинарное изображение.
  • Ограничение на размер встроенных изображений. По стандарту RFC браузеры должны поддерживать только URL длиной до 1024 байтов. Хотя большинство совеременных браузеров имеют больший допустимый размер, например, Opera ограничивает data:URL до примерно 4100 символов. Firefox вплоть до 100Кб, IE8b1 поддерживает data URL длиной не более 32Кб.
  • Требуются дополнительные действия для обновления внедренного изображения: перекодировать, вставить.
  • Встроенные картинки НЕ кешируются, если внедрены непосредственно в динамический HTML-документ.

Для внедрения музыки на страницу воспользуйтесь этим сервисом.

Возможно Вам будет интересно:


.

Популярное:


Содержание: