Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
Внедрение картинки в таблицу стилей или код страницы
С помощью этого сервиса Вы можете избавиться от длительной загрузки множества маленьких изображений, перенеся коды картинок в CSS - файл стилей. Т.к. браузер Internet Explorer не поддерживает внедрение изображения в текст, то используется для него отдельный код.
Для получения готового для использования кода, укажите изображение, нажмите кнопку "Сгенерировать Код" и вставьте полученное изображение себе на сайт.
Для вставки изображения в HTML-код страницы используйте следующий код:
[html]Для вставки изображения как иконки ссылки в 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-документ.
Для внедрения музыки на страницу воспользуйтесь этим сервисом.
Возможно Вам будет интересно:
- Сервис создания favicon.ico.
- Пример скрипта анимации любых изображений.
- Пример скрипта изменения размера изображения.
- Сервис внедрения изображения в код страницы.
- Сервис создания анимированного изображения.
- Наложение логотипа(водяного знака) на изображение.
- Объединение нескольких изображений в одно.
- Специальные символы и эмоджи
.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости