«За бугром» все больше интересуются техникой Data:URI CSS Sprites

[sirus]

тут вопрос именно в автоматизации, обычный спрайт надо руками генерить, а data:uri на автоматике. Не писал про это, думал и так понятно. Хотя есть и сервисы генерации обычных спрайтов (но и у них есть свои заморочки). Возможно в дальнейшем будет проведено исследование Standard Sprite vs Data:URI Sprite.

время загрузки у себя отпишите

[sirus]

> Так есть же сервисы по генерации спрайтов
да есть, но у них есть трудность в background-repeat

> А data:uri слишком заморочено и в общем случае без JS
вы заблуждаетесь, без JS работает во всех, включительно IE6

[sirus]

давно бы с удовольствием, проблема с IE7@Vista существует, кстати относительно data:uri css sprites на эту проблему как раз таки мы вышли из вот таких вот исследований. прочитайте серию предыдущий моих статей на эту, там детально все расписано что и как :)

да и вообще в чему базар? не нравится data:uri, не трогайте его, а то можно навредить и себе и другим. Пользуйтесь руками, это ж хорошо когда есть возможность сидеть и все делать руками.

[sirus]

думаете мне они нравятся? :) сам в шоке, взяли и испортили такую сказочную технику, это я про ИЕ. Ну они не только это испортили… хотя они многое и придумали. Такова ситуация, ничего не поделать.

В добавок, лично я разрабатываю проекты только JS enabled (сложные одностраничные веб-приложения), так что лично для меня это не помеха, уверен есть много других разработчиков кому пригодится data:uri css sprites.

[sirus]

> Хотя на мой взгляд осмысленное деланье руками — самое эффективное
с точки зрения оптимизации да, с точки зрения работы — нет. кумарит парится вечно с этими спрайтами при каких-то изменениях в дизайне или в изображениях. поэтому народ и смотрит в сторону автоматизации процесса, нажал кнопочку и все готово.

[sirus]

согласен, и быстрее всего работают программы написанные на ассемблере.

[sunnybear]

эх, вот сейчас как выложу результаты с автогенерацией спрайтов через Web Optimizer :)

А вообще, у меня чешутся руки показать, что data:URI — это зло :) Как только будет часа 2-3 свободного времени, накропаю статью :)

[sirus]

давай давай, мы с нетерпением ждем :)

[artemy_m]

1.84, 1.20, 0.95
Safari 4, Mac OS X 10.6

[sirus]

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

[k0t_igrun]

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

[freemandigger]

Потестил у себя:
o: 2.91, d1: 2.22, d2: 2.46

хм, а у меня второй тест быстрее…
Mozilla/5.0 (X11; U; Linux x86_64; ru; rv:1.9.1.7pre) Gecko/20091210 Ubuntu/9.10 (karmic) Shiretoko/3.5.7pre

В целом всё было бы хорошо, если бы не IE…

[sirus]

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

[freemandigger]

Конечно, делал по три запроса и вычислял среднее.
Перепроверил d1 — результат не изменился
d2 сделал 5 запросов: (2.36+2.36+2.35+2.19+2.45)/5 = 2.342

Может есть какая-то зависимость от 64bit…

[ferrari]

Имхо, за бугром все меньше и меньше внимания оптимизации там, где это касается трафика, там давным давно в порядке вещей фон страницы размером в 2mb, или прикрутить jquery ui размером > 200 kb для реализации простого попап окна, эта тема скорее актуальна для наших «фронтовых дорог» и все еще почему-то живых модемных линий.

[sirus]

да, но почему тогда они поднимают эти вопросы? к примеру тот же Steve Sounders, + www.aptimize.com/ использует data:uri, правда у них реализация кривая

[ferrari]

к чему этот пример, это происходит массово?
Страница гугла не валидуется, то мы можем сказать, что весь «забугор» клал на вэтрицэ? Может не будем на точечных попаданиях ставить общее мнение и тенденции.

[sirus]

заголовок статьи гласит не про массовый переход, а про увеличение интереса, вот вам пожалуйста пример сегодня на главной ajaxian.com ( ajaxian.com/archives/performance-of-data-uris )

[NoWeekOff]

Извиняюсь за дурацкий вопрос, но как это отражается на кешировании?

[sirus]

отлично, можно кешировать css с картинками внутри, никаких проблем.

[kolpeex]

Opera 10.10 Windows 7:

original: 2663ms
datauri1: 1821ms
datauri2: 2035ms

[TecHMeaT]

Vista, Chrome 4.0.266.0 — o: 5.03, d1 2.74, d2 2.38

[SKYnv]

Opera 10.10 build1893
Windows 7:

orig: 1879ms
du1: 652ms
du2: 1425ms

[egorinsk]

Да раз у него сайт весит 400 Кб, что тут оптимизировть, его сразу на помойку можно выбрасывать, я считаю. И вообще, все джипегами сделано, явно какой то индус-филансер верстал.

[sirus]

это бесплатный шаблон из набора www.smashingmagazine.com/2009/06/04/6-free-psdxhtml-templates/

[egorinsk]

:)

[polyakov_andrey]

А для простой генерации css sprites что можно использовать?

[sirus]

sprites.in/

[polyakov_andrey]

благодарю

[Aux]

Это всё классно, но:

1. Base64 весит больше, чем просто картинки.
2. Если у вас разные элементы имеют одинаковые фоны, то у вас начинаются дубликаты картинок в CSS и нефиговое увеличение размера.
3. Проблемы с браузерами (выше обсудили).

На мой взгляд лучше использовать обычные спрайты, разбив их на два-четыре файла (один с горизонтальными тянучками, один с вертикальными и ещё что-нить). В итоге будет минимум запросов, отсутствие дубликатов, нормальное кеширование, нет проблем с браузерами, все счастливы. А datauri-ками лучше иконки вставлять.

[sirus]

1) + gzip ~= как обычный размер изображений
2) вот как раз таки и нет, это зависит от реализации, duris.ru автоматически вычисляет дубли и оптимизирует стили к одному изображению, т.е. повторений нет
3) решаются, кроме IE7@Vista

пользуйтесь на здоровье стандартными спрайтами, я не против

[Aux]

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

[sirus]

результирующие css собираются автоматически, никакой головной боли.

[Aux]

тады ок.