Кодировщик изображений в Base64

base64 encode online

Ммм... Вот, для собственного удобства сделал небольшой кодировщик изображений в Base64. Полученный код можно внедрять в HTML-страницы (как значение атрибута src у тега img) или в CSS-стили для создания фоновых изображений (background). Пользователь будет видеть картинку, но самой картинки не будет. В коде вместо картинки будет красоваться длинная строка :-)

А вот и сам кодировщик:

Если вы всё ещё не поняли, что делает данная утилитка, то взгляните сюда - «Тестовая страница». Все изображения на этой странице на самом деле являются строками в кодировке Base64. Чтобы убедиться в этом, достаточно открыть исходный код html-страницы:

Кодировка изображений в Base64

Логичен вопрос: "А зачем это надо?". Ну, такое внедрение изображений, в принципе, должно сократить нагрузку на сервер (отпадает необходимость в многократном обращении к серверу для загрузки картинок, так как картинки уже внедрены в HTML или CSS-файл) и ускорить загрузку сайта. Неплохо, правда? :-)

Есть ли минусы у такого способа подключения изображений? Конечно, есть! С Base64 умеют работать все современные браузеры, но работают по-разному. У разных браузеров существуют разные ограничения на длину строки в кодировке Base64. Поэтому на практике кодируют только маленькие декоративные элементы веб-страниц (фоны, иконки). Есть проблемы со старыми Internet Explorer: IE6 и IE7 не поддерживают такое использование Base64 (вроде, это можно обойти, но получается громоздко и неудобно). Поэтому стоит отлавливать использование пользователями именно этих браузеров и показывать для них обычные картинки. В Internet Explorer 8-й версии всё работает как надо (по крайней мере, я проблем не заметил).

Ещё один неприятный момент - значительное увеличение размеров веб-страниц. Кстати, строка в кодировке Base64, как правило, получается "тяжелее", чем картинка, из которой эта строка была создана. Незначительно (примерно на 30%), но неприятно.

Использовать или не использовать - решайте сами. В любом случае, приём интересный и заслуживает внимания.

Автор: admin

Дата добавления: 2012-03-02

Просмотров: 4554

Рейтинг поста: +10-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): alexxloo
Дата добавления: 2012-05-19
Спасибо за кодировщик.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика