Что такое data URI?
Вы знаете, что можете не вставлять файл изображения, когда используете IMG элемент в HTML, или background-image в CSS? Вы можете вставлять данные изображение непосредственно в документ с помощью data URI
В HTML это будет выглядеть как:
Формат должен быть следующий:
data:[
С помощью инструмента "Конвертер изображений в data URI" можно вставить код изображения прямо внутрь веб-страницы, и при этом не придется обращаться к внешним файлам. В результате страница будет загружаться быстрее, так как сведется к минимуму количество обращений к серверу.
Для чего нужен этот инструмент?
В первую очередь, данный инструмент будет полезен оптимизаторам, которые понимают, что чем меньше картинок на странице, тем выше скорость ее загрузки. Ведь трафик на отправку HTTP-заголовка (около 1 КБ) никто не отменял. И, если перед вами стоит задача уменьшить количество запросов к веб-серверу, то просто воспользуйтесь данным инструментом.
Изображения со страницы убрать вы не сможете (этого и не нужно делать), а вот объединить их в один файл и разместить его в коде страницы – легко! После того, как браузер загрузит такую мега-картинку, он выберет из нее отдельные участки (изображения) с помощью background-position и отобразит их по отдельности. Но запрос будет всего один, и это – главное. Также вы можете воспользоваться нашим инструментом и разместить картинки непосредственно в HTML-коде страницы. При этом файлы станут больше по размеру, но зато загрузятся за один запрос. Стоит отметить, что внедрить графический файл таким способом можно только в URL страницы.
Поддержка браузерами
Сейчас данная технология поддерживается большинством современных браузеров (Firefox, Opera, Safari, Chrome и IE от 8-й версии). "Выпендривается" только IE 6 и 7 версий, но и на него есть управа – оптимизатор может вставлять картинки в виде MHTML-включений. Однако, здесь данную возможность мы рассматривать не будем.
Важен ли размер картинки?
Напомним, что код картинки, полученный после обработки данным инструментом, предназначен для вставки в URL, поэтому его размер должен быть совсем небольшим. Но на практике выяснилось, что большинство современных браузеров (кроме IE8) "тянут" блок кода изображения весом до 32 КБ. Однако, стоит учесть, что картинка в процессе "трансформации" в код немного "распухнет", поэтому изначальный ее размер не должен превышать 20 КБ.
Преимущества и недостатки технологии
Воспользовавшись инструментом "Конвертер изображений в data URI", можно существенно сократить вес страницы на одних лишь HTTP-заголовках, и тем самым уменьшить нагрузку на сервер. В результате загрузка страницы будет происходить намного быстрее. Кроме этого, у ряда браузеров есть ограничения на количество параллельных обращений к веб-серверу, поэтому благодаря встроенным изображениям освобождается канал для загрузки прочего контента. Также картинка может быть встроена в код шаблона сообщения для электронной почты: например, таким способом можно вставить подпись или фотографию, не применяя для этого специальное вложение.
Если конечная цель оправдывает средства, то можно закрыть глаза на ряд недостатков метода, среди которых:
- трудоемкость процесса;
- больший объем полученного кода, чем самой картинки;
- встроенные картинки будут перезагружаться вместе с HTML-страницей;
- для больших по размеру картинок способ не подходит (напомним, что максимальный размер загружаемого изображения не должен превышать 20 КБ);
| Оптимизатор css кода Оптимизирует код страниц, что экономит время загрузки. |
Favicon генератор Создание фавиконки онлайн |
| Проверка заголовков сервера Проверка ответа сервера, HTTP статусов. |
Подсчёт длины текста Подсчёт длины текста с пробелами и без, количества слов. |
| Генератор мета тегов Генератор META - тегов по заданным параметрам. |
Карта сайта Создание онлайн карты сайта. Генератор xml карты сайта (sitemap.xml) |
| Подсчёт длины текста Подсчёт длины текста с пробелами и без, количества слов. |
Транслит переводчик Быстрый и простой в использовании ONLINE-переводчик транслита. |
- Яндекс ИКС
23.11.2023 (175 дней назад) - Яндекс выдача
12.05.2024 (4 дня назад)
Доска объявлений
Купить / Продать
Работа / Услуги
