bolk 3 апр 2008 в 16:08

data URI

2 мин

Веб-разработка *

+40

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 3 апр 2008 в 16:23

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

sertificed_man 3 апр 2008 в 16:28

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

bolk 3 апр 2008 в 16:29

Отлично :)

sertificed_man 3 апр 2008 в 16:33

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

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

bolk 3 апр 2008 в 16:33

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

НЛО прилетело и опубликовало эту надпись здесь

bolk 3 апр 2008 в 16:36

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

sertificed_man 3 апр 2008 в 16:37

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

bolk 3 апр 2008 в 16:38

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

bolk 3 апр 2008 в 16:38

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

paladin 3 апр 2008 в 17:19

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

bolk 7 апр 2008 в 07:48

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

Almot 3 апр 2008 в 19:40

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

bolk 7 апр 2008 в 07:58

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

Almot 7 апр 2008 в 11:16

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

korvin0 3 апр 2008 в 20:15

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

ATimofeev 3 апр 2008 в 21:05

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

korvin0 3 апр 2008 в 21:20

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

ATimofeev 3 апр 2008 в 21:25

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

korvin0 3 апр 2008 в 21:31

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

НЛО прилетело и опубликовало эту надпись здесь

korvin0 3 апр 2008 в 22:00

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

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

НЛО прилетело и опубликовало эту надпись здесь

vsh 4 апр 2008 в 10:26

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

kraut 10 апр 2008 в 06:51

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

bolk 10 апр 2008 в 08:19

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

kraut 10 апр 2008 в 06:44

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

Slaver 3 апр 2008 в 21:08

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

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

bolk 7 апр 2008 в 07:58

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

korvin0 7 апр 2008 в 10:53

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

bolk 7 апр 2008 в 13:53

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

korvin0 7 апр 2008 в 16:37

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

bolk 8 апр 2008 в 09:15

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

oowl 3 апр 2008 в 20:42

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

bolk 7 апр 2008 в 07:59

Спасибо!

beone 4 апр 2008 в 03:24

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

Caesar 4 апр 2008 в 03:45

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

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

beone 4 апр 2008 в 03:51

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

Caesar 4 апр 2008 в 03:58

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

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

beone 4 апр 2008 в 04:05

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

Caesar 4 апр 2008 в 04:18

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

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

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

beone 4 апр 2008 в 04:22

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

Caesar 4 апр 2008 в 04:35

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

beone 4 апр 2008 в 04:42

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

devilmaydie 4 апр 2008 в 05:03

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

Stepanow 4 апр 2008 в 06:06

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

vsh 4 апр 2008 в 10:03

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

bolk 7 апр 2008 в 07:59

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

beone 7 апр 2008 в 08:07

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

bolk 7 апр 2008 в 08:13

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

beone 7 апр 2008 в 09:21

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

bolk 7 апр 2008 в 09:53

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

beone 7 апр 2008 в 09:54

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

bolk 7 апр 2008 в 09:58

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

beone 7 апр 2008 в 10:03

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

bolk 7 апр 2008 в 10:06

Я не понимаю.

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

beone 7 апр 2008 в 10:11

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

bolk 7 апр 2008 в 10:14

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

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

beone 7 апр 2008 в 10:20

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

Caesar 4 апр 2008 в 03:34

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

ISpy 4 апр 2008 в 03:53

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

Stepanow 4 апр 2008 в 06:08

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

johndow 4 апр 2008 в 03:42

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

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

Stepanow 4 апр 2008 в 06:11

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

johndow 4 апр 2008 в 07:01

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

bolk 7 апр 2008 в 08:18

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

bolk 7 апр 2008 в 08:18

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

johndow 7 апр 2008 в 08:23

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

bolk 7 апр 2008 в 08:29

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

johndow 7 апр 2008 в 08:37

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

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

bolk 7 апр 2008 в 08:47

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

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

bolk 7 апр 2008 в 08:49

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

bolk 7 апр 2008 в 08:01

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

Prometheus 4 апр 2008 в 05:58

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

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

Stepanow 4 апр 2008 в 06:16

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

Prometheus 4 апр 2008 в 06:54

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

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

Stepanow 4 апр 2008 в 07:18

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

Bonch 4 апр 2008 в 08:42

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

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