Впровадження картинки в таблицю стилів або код сторінки

За допомогою цього сервісу Ви можете позбутися від тривалої завантаження безлічі маленьких зображень, перенісши коди картинок в CSS - файл стилів. Оскільки браузер Internet Explorer не підтримує впровадження зображення в текст, то використовується для нього окремий код.

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

Натисніть на зображенні для отримання коду прикладу.

Для вставки зображення в HTML-код сторінки використовуйте наступний код:

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

Технічна інформація

Для впровадження картинки на веб-сторінки за допомогою data: URI використовується base64 - кодування. Ця схема дозволяє вставити код картинок прямо в (x) HTML-сторінку без звернень до зовнішніх файлів, що зменшує загальну кількість HTTP-звернень до сервера. Вбудовані або InLine зображення використовують схему data: URI для впровадження двійкового коду картинки прямо в тіло веб-сторінки. Як було визначено в RFC 2397, такі URI призначені для вставки невеликих об'єктів як безпосередні дані. Використання вбудованих зображень дозволяє заощадити HTTP-запити до зовнішніх ресурсів.

Синтаксис у data: URL наступний:

Допустимий тип даних: 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-документ.

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

Схожі статті