bolk Apr 3 2008 at 20:08

data URI

2 min

7.6K

Website development*

+40

Comments 85

UFO just landed and posted this here

bolk Apr 3 2008 at 20:23

Выложил у себя на сайте

sertificed_man Apr 3 2008 at 20:28

НА SONY PSP работает!!!

bolk Apr 3 2008 at 20:29

Отлично :)

sertificed_man Apr 3 2008 at 20:33

Извините, но я как Девушка не всегда сведущая, но это фантастика. Дайте кармы человеку- такого никогда еще не видела!!!

Вопрос автору - а Вы где либо видели что либо подобное, просто тут для капчей мега помощь!!! Завтра же разрабам своим в туду! Спасибо большое.

bolk Apr 3 2008 at 20:33

Нигде ничего подобного не видел. Над вопросом работал полностью самостоятельно.

UFO just landed and posted this here

bolk Apr 3 2008 at 20:36

Боюсь, я не смогу перевести адекватно, может попрошу кого-то :)

sertificed_man Apr 3 2008 at 20:37

Спасибо что дали:) Хочу картинку размером 30 кб - если такое для flash сделать ... то это революция.

bolk Apr 3 2008 at 20:38

Думаю, внедрит flash так тоже удасться. Только чуть доделать код (теги для Flash другие будут).

bolk Apr 3 2008 at 20:38

Столько грамматических ошибок наделал. Прошу у всех прощения — спешу на поезд.

paladin Apr 3 2008 at 21:19

Вставьте хабракат перед началом кода, пожалуйста.

bolk Apr 7 2008 at 11:48

Извините, не мог, был в другом городе, сейчас не актуально, наверное уже.

Almot Apr 3 2008 at 23:40

В Firefox 2.0.0.13 - не работает на файле размером 35594 байта. Указанный в статье пример с маленькой картинкой - работает.

bolk Apr 7 2008 at 11:58

Очень странно, у меня открываются куда более значительные файлы. Какая OS?

Almot Apr 7 2008 at 15:16

Winodws XP Prof. Вроде бы все правильно сделал.

korvin0 Apr 4 2008 at 00:15

Сия фигня увеличит суммарный html-код страницы, соответственно процент значащих слов в коде страницы уменьшится. Значит, поисковики будут "худшего мнения" о таких страницах, значит это анти-сео какое-то :)
Не покатит.

-1

ATimofeev Apr 4 2008 at 01:05

Что мешает вынести во внешний CSS?

korvin0 Apr 4 2008 at 01:20

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

ATimofeev Apr 4 2008 at 01:25

А какая разница-то, что в коде фунции будут выполнятся, что в CSS? Во втором случае как раз таки запросов будет меньше, потому как CSS имет свойство кэшироваться.

korvin0 Apr 4 2008 at 01:31

графика, CSS, JavaScript и так далее - всё это тоже умеет кэшироваться, так как выносится во внешние файлы обычно.

UFO just landed and posted this here

korvin0 Apr 4 2008 at 02:00

Ну, так конечно можно, но есть еще проблемы:
1. base64-код в среднем на 33% больше, чем исходный код, т.е. подключаемый файл будет еще больше, чем большой.
2. Все места, где выводятся картинки, надо будет делать слоями с бэкграундом.

Кроме того, я вообще не очень понимаю, кому особенно мешают http-запросы. И зачем пользователю грузить бОльший объем данных, чем надо - тоже не ясно.

UFO just landed and posted this here

vsh Apr 4 2008 at 14:26

по http-запросам - очень хорошо избегать их для служебных изображений и прочих маленьких и нужных "штучек" путём выставления Expires/max-age на год - не будет даже conditional GET-запросов.
Плюс, как я уже говорил, в IE8b1 уже 6 одновременных соединений на домен, думаю, остальные производители браузеров тоже быстро увеличат это количество.
Мне почему-то кажется, что единственное применение dataURI - как раз для таких "нестандартных" случаев, как капча.

kraut Apr 10 2008 at 10:51

http://www.kuzpress.ru/data_url.html

bolk Apr 10 2008 at 12:19

Результат очень хороший, жаль два отдельных файла нужно :)

kraut Apr 10 2008 at 10:44

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

Slaver Apr 4 2008 at 01:08

Тот, кто будет затачивать сайт под seo, вряд ли станет использовать такую реализацию. Ее не нужно и не следует использовать где попало и как попало вообще.

P.S. Главное увеличить процент фраз «заработать на блоге» и «развратные учительницы сосут прямо на перемене»…

bolk Apr 7 2008 at 11:58

Поисковики внутрь тегов (исключение — разве что атрибуты alt и title) не заглядывают. Не болтайте ерундой.

korvin0 Apr 7 2008 at 14:53

Одна табличная вёрстка хуже вёрстки на div'ах прежде всего тем, что у нее худший процент полезного контента в теле страницы. Хотя поисковики в тэги и не думают заглядывать.

bolk Apr 7 2008 at 17:53

Это как-то противоречит тому, что я сказал?

korvin0 Apr 7 2008 at 20:37

Да.
Код
[span class="asdfsadfadsf" id="sadfkjhdsaghjklklghjklafh"]Текст[/span]
хуже для поисковиков, чем
[span]Текст[/span]
в связи с тем, что поисковики считают суммарный размер страницы, и уже относительно его высчитывают процент вхождения нужного слова.

bolk Apr 8 2008 at 13:15

Дайте ссылку, подкрепляющую ваши слова.

oowl Apr 4 2008 at 00:42

Симпатичный у вас сайт.

bolk Apr 7 2008 at 11:59

Спасибо!

beone Apr 4 2008 at 07:24

Зачем такой изврат? Вот честно, не понимаю. Мало того, что base64 сам по себе больше чем изображение, дак вы еще к нему какую-то фигню добавляете. Что нам это дает? Уменьшение числа http-запросов? Ну дак вынесите картинки на отдельный домен, делов-то.

Caesar Apr 4 2008 at 07:45

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

ну и + принудительный показ CAPTCHA (см. мой комментарий строчкой ниже)

beone Apr 4 2008 at 07:51

Где я сказал, что это для уменьшения нагрузки на сервер? Какой нафиг яакс? Вы вообще про что? Кто стоит, куда стоит... бр, может стоит сперва хоть немного почитать теорию? Разнос картинок на другие домены/поддомены как раз и делается для того, чтобы как можно больше запросов совершались одновременно. Браузер ограничевает количество запросов к одному домену.
А в опере эта ваша копча не показывается.
Велосипед на квадратных колёсах изобретаете.

Caesar Apr 4 2008 at 07:58

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

Остаются ситуация, когда заголовки http и картинка весят существенно больше чем base64 и случай с узким каналом, когда всё выглядит некрасиво из-за недогрузившихся мелких графических элементов (аякс тут тоже тормозит - канал-то занят).

beone Apr 4 2008 at 08:05

Иэх... мелкие картинки в одну побольше и играть позиционирование бакграунда.
Ну а если это лень, то элементарно спасет обычный dataURL (до 32 кб везде) и не надо никакие там mhtml'ины приплетать.
Keep it simple =)

Caesar Apr 4 2008 at 08:18

Позиционирование бэкграунда - примерно того-же уровня изврат, что и data:, как мне кажется. (-:

Ну я, разумеется, надеюсь что все сознательные люди будут использовать простейший из доступных вариантов. Влазит в 32К - хорошо, не влазит - способ bolk'а.

Это лучше чем вообще не иметь выбора, осгласитесь.

beone Apr 4 2008 at 08:22

Теорию читайте, в общем.

Caesar Apr 4 2008 at 08:35

есть ещё что-то из этой области кроме особенностей расхода соединений браузером, что мне следует прочитать?

beone Apr 4 2008 at 08:42

Дак полно материала по ускорению загрузки страниц =)
Прочитайте гайды от yahoo. Почитайте хабр =)

devilmaydie Apr 4 2008 at 09:03

там как раз нету никакого изврата, мелкие элементы можно грузить с 1 картинки, только позиционировать их как надо. А эта обработка в php + код больше - ускорится ли загрузка? и надо ли оно такое вообще...

Stepanow Apr 4 2008 at 10:06

Позиционирование бэкграунда 4 постами выше это и есть с 1 картинки. А вообще это называется CSS-спрайты.

vsh Apr 4 2008 at 14:03

я вот тоже не могу придумать, зачем может понадобиться отдавать через dataURI картинки, бОльшие, чем те же 32 кбайта. Это и какая-никакая, но нагрузка на CPU, это уменьшение распараллеливания скачивания (в том же IE8b1 можно качать в 6 одновременных соединений с одного домена), да и плюс к тому сама хтмлка становится больше. Не понимаю.

bolk Apr 7 2008 at 11:59

Почитайте статью о data URL, ссылку на которую я дал в статье.

beone Apr 7 2008 at 12:07

Эх, еще один... да ладно, ладно, стройте велосипеды с квадратными колёсами, мне не жалко. Технологию надо не только знать и понимать, но еще четко осозновать её применение.

bolk Apr 7 2008 at 12:13

Вот и прочитайте внимательно обо всех плюсах. Вы обсуждаете только один. Кроме того, «вынесите картинки в отдельных домен» для многих не вариант.

beone Apr 7 2008 at 13:21

Хорошо, распишите плюсы вашего слияния dataUrl и mhtml. Только сперва про минусы прочитайте.

bolk Apr 7 2008 at 13:53

Я эту тему достаточно изучил ещё 2 года назад. Плюсы описаны в статье, на которую я дал ссылку.

beone Apr 7 2008 at 13:54

Пофиг, просто знайте, что на дворе 2008 год и знания приобретенные 2 года назад утратили свою ценность.

bolk Apr 7 2008 at 13:58

Вы ошибаетесь. Читайте статью.

beone Apr 7 2008 at 14:03

Ну дак будут примеры то, нет? В статье 3 плюса (все они легко реализуются и обычными изображениями) и 5 минусов. А ваш способ добавляет минусов только.

bolk Apr 7 2008 at 14:06

Я не понимаю.

Я уже 3 или 4 раза попросил вас прочитать статью. Не желаете вникать в материал — досвидания.

beone Apr 7 2008 at 14:11

Эх, вам не статьи писать надо, а общаться учится, хотя бы. Забейте и дальше радуйте нас велосипедами!

bolk Apr 7 2008 at 14:14

Вы, похоже, не подозреваете кто я. Удивительно.

В любом случае — досвидания. У нас свободная страна, вы имеете свою точку зрения, а я оставляю себе право не тратить время на ваше обущение.

beone Apr 7 2008 at 14:20

Подозреваю. Почитываю иногда ваш блог. Иногда с интересном, иногда с иронией.
В любом случае — автор который не может сказать пару плюсов, используемой им технологии (а также ответить на замечания) не достоин внимания.

Caesar Apr 4 2008 at 07:34

тут есть ещё один мега-приятный побочный эффект. в FF с плагином ImagesLikeOpera интегрированные картинки показываются всегда, независимо от настроек плагина.

ISpy Apr 4 2008 at 07:53

Ага :) Пользователи будут удивлены))

Stepanow Apr 4 2008 at 10:08

Кстати этим достигается показ капчи и для экономящих на картинках.

johndow Apr 4 2008 at 07:42

Есть ещё вот такая ссылочка

http://www.hedgerwow.com/360/dhtml/base64-image/demp.php

Stepanow Apr 4 2008 at 10:11

Да, похоже этот велосипед уже изобретён.

johndow Apr 4 2008 at 11:01

Я не к тому что, кто-то кого-то опередил. Сие мне неизвестно.
Просто там для рендера картинки в IE используется VML. Что может-быть кому-то небезинтересно.

bolk Apr 7 2008 at 12:18

Да, спасибо, но там совсем о другом.

bolk Apr 7 2008 at 12:18

Вы посмотрите, там совершенно другой принцип (откройте под IE) и картинка не внедряется, по сути.

johndow Apr 7 2008 at 12:23

Внедряется. Вы исходник посмотрите

bolk Apr 7 2008 at 12:29

Вы под IE исходник смотрите?

johndow Apr 7 2008 at 12:37

Исходник имеется ввиду - http://www.hedgerwow.com/360/dhtml/base64-image/code.txt

вы в исходнике HTML страницы ничего не увидите т.к. IE покажет только HTML-часть от всего MIME документа

bolk Apr 7 2008 at 12:47

Выкачал wget'ом и увидел. Но принцип сильно другой — тут, по сути, два отдельных HTML: «для IE» и «для всех остальных», у меня совершенно другая идея.

А за ссылку спасибо — очень интересное решение.

bolk Apr 7 2008 at 12:49

Т.е. я был неправ — действительно, изображение внедряется.

bolk Apr 7 2008 at 12:01

Отличная штука, спасибо!

Prometheus Apr 4 2008 at 09:58

протестил на своем телефоне Viewty.
работает, картиночка показалась.

единственно, пока не вижу особого практического применения данной технологии,
зачем оно и чем лучше сжатия того же JPEG

Stepanow Apr 4 2008 at 10:16

Читайте выше, там всё написано. Основной плюс - вместо большого количества мелких файлов, грузится один большой. Если Вы переписывали по сети какие-то данные типа небольших картинок, то могли заметить что при переписывании их как есть скорость в разы меньше чем если засунуть их в один большой zip (который может занимать и больше, т.к. jpeg зипом не сожмёшь).

Prometheus Apr 4 2008 at 10:54

Если не сложно, можно в цифрах?

Допустим, на странице используется 10 картинок, общий объем которых составит 10KB.
Если использовать данную технологию, какой будет вес вашего одного файла?

Stepanow Apr 4 2008 at 11:18

Зависит от того используется ли сжатие GZip или нет. Если используется - то около эти самых 10 килобайт. А чтобы дать точный ответ о разнице в весе и скорости загрузки нужно провести серьёзное тестирование с разным количеством встроенных картинок и разным их весом. Без этого любые утверждения - лишь предположения.

Bonch Apr 4 2008 at 12:42

Хм. Я подобный подход уже применял, немного переписав png.htc, так как в нем нужен прозрачный гифиг, а делать запрос не было никакого желания.

Насчет уменьшения кол-ва http запросов, скажу просто - используйте css sprites. Самое то для бэкграундов и иконок. Я вообще объединяю все какие только возможно оформительские изображения в один файл.