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

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

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

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

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

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

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

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

Для вставки изображения в 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-документ.

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

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

.
Прокомментировать/Отблагодарить