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

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

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

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

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

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

программированиеcsshtml

Комментарии 14

victorgr.livejournal.com № 3
Ну ладно, Bolk, скажи лучше, а какие преимущества-то от DataURL?
Евгений Степанищев (bolknote.ru) автор № 4
То, что приходит в голову сразу:

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

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

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

4) генерация контента (HTML и даже картинок) из JavaScript
victorgr.livejournal.com № 5
Комментарий для Евгения Степанищева:

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

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

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

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

Интересно ещё, что насчёт мобильных браузерах? И работает ли Data URL в Safari?
Евгений Степанищев (bolknote.ru) автор № 6
Комментарий для victorgr.livejournal.com:

В Safari iPhone — работает отлично. В браузере PSP — тоже.
Ramon (rembish.myopenid.com) № 7
Начал размышлять по поводу генерации изображений через base64. Для того, чтобы хоть что-нибудь отобразить через Data URL, нужно это самое что-то нагенерировать. Я не думаю, что найдется какой-нибудь маньяк, который напишет библиотеку генерации JPG или GIF на JS. Что у нас браузеры умеют еще отображать? BMP, TIFF? Ну, блин, это ж каких размеров будет base64 код для изображения. Поэтому как не сладка была идея генерировать изображения через base64 — это навряд ли.
Евгений Степанищев (bolknote.ru) автор № 8
Браузеры умеют отображать (есть брать вскладчину): 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. Это не так уж и сложно ( https://bolknote.ru/files/monobmp/ ).
dkio.livejournal.com № 10
Комментарий для Евгения Степанищева:

Пример https://bolknote.ru/files/ie-data-url.phps IE6SP2 показал, но сначала чуть-чуть подумал.
VELIK505 № 12
А правда что в мобильных браузерах при использовании data:URL начинает css ник скачиваться?
Евгений Степанищев (bolknote.ru) автор № 13
Какой CSS? Я что-то не понимаю вопрос. В каких ситуациях это может быть?