Data URL: так ли страшны издержки

Я уже несколько раз писал о data URL, так что наверное все уже запомнили что это такое. У этого способа внедрения ресурсов есть интересные плюсы, но, в своей массе, веб-мастера не торопятся использовать его из-за мнимых минусов, которые я хочу сейчас рассмотреть.

  • из-за base64 размер изображения увеличивается на треть
  • невозможно использовать одно изображение несколько раз
  • не работает в IE
    Все эти минусы — мнимые.

По первому пункту. Многие сайты используют gzip-сжатие веб-страниц, что позволяет сильно уменьшить размер страницы. Я прогнал через base64 всю базу изображений моего сайта (примерно 350 картинок), после чего сжал их gzip. Размер, по сравнению с первоначальным вырос, в среднем, на 2%. Если вы используете сжатие страниц, вам не нужно бояться увеличения размера страницы.

По второму. Даже начинающий верстальщик знает как использовать изображение из data URL несколько раз. Для этого надо поместить его в CSS и сделать фоном контейнера.

По третьем пункту я уже высказывался. В IE до восьмой версии не было data URL (в IE8b1 поддержка есть, но очень урезанная — всего 32Кб данных), но я придумал способ как внедрять изображения в IE.

Поделиться
Отправить
 20   2008   css   html   программирование
14 комментариев
bakabaka.livejournal.com 2008

Opera 9.21, 8.54, 7.54 — «бумажка» показывается.

Евгений Степанищев (bolknote.ru) 2008

Комментарий для bakabaka.livejournal.com:

Спасибо!

Нет возможности испытать IE6SP1?

victorgr.livejournal.com 2008

Ну ладно, Bolk, скажи лучше, а какие преимущества-то от DataURL?

Евгений Степанищев (bolknote.ru) 2008

Комментарий для victorgr.livejournal.com:

То, что приходит в голову сразу:

1) веб-приложения (например, это сильно актуально для HTA, я пробовал их писать, widgets в Opera и extension в FF так же их содержат)

2) экономия HTTP-запросов (CSS sprites мне нравятся меньше, так как картинку надо готовить — склеивать и расчитывать координаты)

3) отображение CAPTCHA (в ситуациях, когда картинки отключены) и некешируемых картинок (например, Opera, большей частью, кеширует «намертво», приходится добавлять параметры и мусорить в кеше).

4) генерация контента (HTML и даже картинок) из JavaScript

victorgr.livejournal.com 2008

Комментарий для Евгения Степанищева:

Действительно, аргументы убеждают :)

DataURL отлично подходит именно для экономии HTTP-запросов, для всяких мелких картиночек оформления.

И про капчу интересно :)

Что ж, будем думать, как применить.

Интересно ещё, что насчёт мобильных браузерах? И работает ли Data URL в Safari?

Евгений Степанищев (bolknote.ru) 2008

Комментарий для victorgr.livejournal.com:

В Safari iPhone — работает отлично. В браузере PSP — тоже.

Ramon (rembish.myopenid.com) 2008

Начал размышлять по поводу генерации изображений через base64. Для того, чтобы хоть что-нибудь отобразить через Data URL, нужно это самое что-то нагенерировать. Я не думаю, что найдется какой-нибудь маньяк, который напишет библиотеку генерации JPG или GIF на JS. Что у нас браузеры умеют еще отображать? BMP, TIFF? Ну, блин, это ж каких размеров будет base64 код для изображения. Поэтому как не сладка была идея генерировать изображения через base64 — это навряд ли.

Евгений Степанищев (bolknote.ru) 2008

Комментарий для rembish.myopenid.com:

Браузеры умеют отображать (есть брать вскладчину): JPEG, GIF, PNG, XBM, JPEG2000, ART, WMF, EMF, APNG, MNG, BMP, ICO, SVG, CUR, ANI, WBMP. WebKit ещё относит к «картинкам» PDF (умеет отображать через IMG), а IE — MOV, AVI, MPG, MPEG.

Wolfenstein 5K ( http://www.wolf5k.com/faq.html ), например, генерирует графику в XBM (к сожалению, IE с версии 6SP1 его больше не поддерживает), но можно, к пример, генерировать графику в BMP. Это не так уж и сложно ( http://bolknote.ru/files/monobmp/ ).

Евгений Степанищев (bolknote.ru) 2008

Комментарий для rembish.myopenid.com:

Причём, с случае XBM ( http://en.wikipedia.org/wiki/XBM ) даже base64 не нужен — там нечего экранировать.

dkio.livejournal.com 2008

Комментарий для Евгения Степанищева:

Пример http://bolknote.ru/files/ie-data-url.php IE6SP2 показал, но сначала чуть-чуть подумал.

Евгений Степанищев (bolknote.ru) 2008

Комментарий для dkio.livejournal.com:

IE6SP2 показывает его прекрасно, это я знаю и вижу :)

VELIK505 2011

А правда что в мобильных браузерах при использовании data:URL начинает css ник скачиваться?

Евгений Степанищев (bolknote.ru) 2011

Комментарий для VELIK505:

Какой CSS? Я что-то не понимаю вопрос. В каких ситуациях это может быть?

Сергей 2013

вот простой скрипт генерирования data:url — http://php-js-css.ru/data-url-generation/

скрипт надо запускать на веб-сервере, может кому пригодится

Популярное