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

С помощью этого сервиса Вы можете избавиться от длительной загрузки множества маленьких изображений, перенеся коды картинок в 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>&nbsp;</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-документ.

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

Пример скрипта анимации любых изображений.

Пример скрипта изменения размера изображения.

Пример скрипта наложения водяного знака на изображение.

Сервис создания анимированного изображения.