A- A A+
Метод data:URL
JOOMLA! 1.5
JOOMLA! 2.5+
JOOMLA! 3.X

Технология "data: URL" позволяет вставить вместо изображения его код, что позволит избежать обращения сервера к внешнему файлу картинки, и тем самым снизить нагрузку на сервер.

Данный метод имеет как плюсы так и минусы, давайте разберем подробнее этот метод.

О методе data: URL

Данный метод "data: URL" имеет как преимущества так и недостатки. Основное преимущество выражается в экономии и упрощении HTTP-запросов.

Недостатком является размер встроенных изображений, так как их текстовое представление при помощи Base64 занимает больше места, чем бинарное изображение (правда, здесь может помощь gzip-сжатие). Кроме того, кодирование картинок занимает немало времени.

Таким образом, встроенные data: URL-изображения имеет смысл использовать только в CSS. При этом картинки должны быть небольшого размера. Результатом будет выигрыш в быстродействии ресурса.

Шаг 1. Кодирование изображения

Перемещаемся на сервис Websemantics.co.uk.

Websemantics

С помощью кнопки "BROWSE" выбираем картинку формата jpg, png или gif. При этом ее размер не должен превышать 32 Кб.

data: URL

После выбора картинки жмем "CONVERT IMAGE". Появляется информация о результатах конвертации, из которой мы видим, что размер изображения увеличился с 2 Кб до 3 Кб.

data: URL

Шаг 2. Вставка кода в материал

Ниже в разделе As an image  имеется окошко с кодом, который копируем.

data: URL

Редактор материала переводим в режим исходного кода и вставляем скопированное.

data: URL

Переходим на сайт и видим, что вставленный набор символов прочитался браузером в виде точной копии оригинальной картинки.

Метод data:URL

Шаг 3. Вставка кода в файл CSS

Возвращаемся на сайт и опускаемся к разделу As a CSS background image. Здесь представлен код, который можно вставить в CSS для отображения изображения как бэкграунд.

data: URL

Остается вставить код в файл CSS и картинка будет отображена в виде фона.

И наконец, в последнем разделе As raw data код изображения представлен просто в виде данных, без HTML и CSS атрибутов, то есть в чистом виде.

Применение data: URL

Рекомендуем использовать данный метод для внедрения на сайте иконок и значков путем размещения кода только в файлах стилей (CSS, LESS).

Постепенно можно будет создать приличную коллекцию и простой вставкой кода быстро встраивать иконки (значки) в дизайн сайтов.

 

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!