Как стать автором
Обновить

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

НЛО прилетело и опубликовало эту надпись здесь
отвечу по существу: Вы не правы :)

А теперь, действительно, по существу.

Вставка картинок через data:URL - это увеличение во-первых, объема страницы

3-5% увеличения объема (после gzip'а) с лихвой окупают время на дополнительные запросы к серверу. Для примера, время на дополнительный запрос 50-100мс (без учета времени загрузки контента), сколько за это время можно передать данных?

+ фикс для mhtml

gzip, gzip и еще раз gzip. Размер только уменьшается
http://webo.in/articles/habrahabr/46-cro…

мы все дальше и дальше откладываем загрузку background-images

Имеется в виду, что фоновые картинки либо вставлены все через data:URL (их загрузка идет вместе с загрузкой CSS), либо через предзагрузку (их загрузка начинается до загрузки CSS-файла).

Последний абзац — самый здравый :)

P.S. Если кто-то хочет заминусовать, предлагаю сначала ознакомиться с блогом Клиентская оптимизация в полном объеме. Все заявленные вопросы там неоднократно обсуждались
Только я, вдохновленный вашими статьями, начал подумывать про спрайты и тут такое... заголовок, правда, оказался страшнее самой статьи, но все-таки.

Теперь жду в следующей статье разоблачения gzip, только прошу, не надо заголовков типа "gzip - убил мой Xeon, не используйте его!" :)
оно уже было :) почти оправдалось: gzip убил мой P2-сервер, не используйте его :)
http://webo.in/articles/habrahabr/33-gzi…
пошел пить горькую...
А ведь горькой обычно бывает только правда...
НЛО прилетело и опубликовало эту надпись здесь
я пишу с запасом на будущее. Очень скоро профессия фронт-енд архитектора/клиентского оптимизатора станет по-настоящему востребована. Полгода назад в смысле литературы был полный вакуум, сейчас более-менее.

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

Вы часто видите программистов качков? =)
да, знаю, как минимум, одного :)
Интервью с Владом Мержевичем

Вообще мне кажется, что человек должен развиваться гармонично
гармония и бодибилдинг - несовместимые вещи :)
врете :)
и я одного знаю
того же?
еще прическу сменить и линзы купить - и будес супер программер красавиц! Правда от количества телок забьет он на программирование )
воть ещё одна гармоничная личность)
http://san.itlife-stuio.ru
И где конкретные минусы спрайтов то? Все пункты статьи можно свести к одному — нытье верстальщика. Мне, как посетителю веб-страницы, абсолютно насрать на верстальщика. Я хочу, чтобы было быстро — а значит, в подходящих для этого случаях, мне нужны спрайты.
этому посвящены раздел "проблемы при загрузке": "визуально" увеличивается время загрузки страницы — и раздел "проблемы при использовании": при увеличении шрифтов фон "выползает", и картинка сайта портится.
На практике использую спрайты. Верстальщик спокойно включает отдельные картинки в css, а на этапе релиза скрипт собирает все разрозненные css в один учитывая их последовательность и правила.При этом формируется из всех картинок спрайт. Проблема палитры компенсируется использованием png. Пока еще встречаются ошибки в собирающем скрипте, но все равно каждый релиз нового шаблона проверяется в релиз кандидате.
алгоритм сборки, например, таких картинок

достаточно сложен. Мне кажется, что его корректная реализация не стоит потраченных сил. Хотя везде есть компромиссы...
да, переодически встречаются интересные задачи, и решать их проще на практике уже столкнувшись с проблемой. Пока небыло чего либо, что бы не удалось решить. На счет браузеров в которых совсем все плохо, то это решается на уровне представлений. Все равно приходится ориентироваться на разношерстную аудиторию и в том числе на мобильные клиенты. Кстати таким же образом собирается javascript код с минимизацией. Как мне кажется очень элегантное решение, когда имеем 1 css 1 png и 1 js
можно вообще все включить в HTML — это будет еще элегантнее :)
=) Да эт уже проходили с флэшем index.swf и вперед
когда вопрос загруженности сервера очень важен - спрайты оправдывают себя. конкретный пример - используя технику спрайтов (повсеместно, и для gif и для png 24) уменьшил нагрузку на наш images сервер (порядка 30 серверов в сумме) в 5 раз.
я не писал в статье о плюсах спрайтов, лишь указал на минусы и возможные решения :)
позиционирование в IE не совсем проблема, я использовал уже два разных способа решить этот вопрос.
Лично я знаю только один серьёзный аргумент не использовать спрайты - это png + IE6. Вот нельзя в этом популярном браузере использовать спрайты для картинок с полупрозрачностью. Если бы не это, то спрайты - это очень даже хорошо.
Есть такое дело, однако, я не использовал спрайты только потому, что все остальное вставлено через data:URL, а mhtml не работает с прозрачностью

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

Если речь идет о несовпадении цветов для IE, то удаление gAMA-чанка решает (вышеприведенная картинка как раз так и сделана).
Я знаю только один корректный способ использовать полупрозрачный png как фоновое изображение - это через DXImageTransform.Microsoft.AlphaImageLoader. Есть другие ходы? :)
Я имел ввиду браузер IE6, конечно.
посмотрите http://fotki.com в IE6
навигация - спрайты, png 24bit
При заходе на сайт был переправлен на http://www.fotki.com/Russia/ru/. И там спрайтов не нашёл :( Укажите пальцем, если не трудно.
Спасибо, познавательно.
обращайтесь :) в данный момент готовится новая версия, без дополнительных вложенных элементов (пользую CLIP)
Посмотрел код, и как-то все равно не понял, как сделано в IE6 использование PNG24-спрайта в IE6... Можете для тупого пояснить?
вложенный элемент с фоновым png24 позиционируется абсолютно. можно сделать и без доп.разметки.
Вот CSS
Ага, ага, знакомый прием ведения дискуссии, когда безбожно раздувается, утрируется одна сторона и делаются далекоидущие выводы.

На самом деле в реальности все достаточно просто. Как и в любой другой области нужен разумный компромисс и любую технику надо применять обдуманно, понимая что ты делаешь и для чего. И если не впадать в крайности, лепя где надо и где не надо, а с умом подходить к разработке, то окажется, что сама по себе техника css-спрайтов достаточно удобна для дизайнера и верстальщика, не говоря уже о программисте, а во многих случаях остается чуть ли не единственной альтернативой (вспомнить хотя бы как без спрайтов ie работает со сложными макетами, где количество изображений исчисляется десятками - даже в локальном файле при обновлении приходится наблюдать как бежит счетчик загруженных изображений).

Большинство из озвученных минусов - логичный результат необдуманного и неумелого использования техники, а выводы из таких предпосылок мало чего стоят
Столько проблем, столько телодвижений, столько несемантичности, трудностей в манипулировании и изменении данных во всех этих хаках… А всё из-за невозможности проинструктировать браузер какие файлы следует «запулять» в один pipe line :-D

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

Спрайты и прочее приемы - это лишнее, нужен настоящий вектор.
Махонький файлик и такое можно на странице отрисовать и отмасштабировать, ух!
Все-таки не для всего тот хак подходит. В частности, необходим position:absolute и полностью отсутствует управление repeat :(
Позиционировать картинку с альфа-прозрачностью в IE6 можно при помощи pos:absolute, если элемент с фоном-спрайтом вложен в другой с размерами иконки. Но это доп. разметка.
так, в бой пошла тяжелая артиллерия :)
ну почему сразу тяжёлая ) всё легко и работает на проектах Яндекса
да нет, я скорее про то, что осталось отметиться Виталию и Артемию — и дискуссию можно считать состоявшейся :)
Ну, я тут скорее за Виталика, чем за себя говорю — это его методика.
можно обойтись clip-ом, или есть ограничения?
Решение с clip'ом вижу первый раз, надо будет попробовать.
ага, последний случай почему-то напоминает по разметке верхнее меню для http://webo.in/ :)
наверное, потому, что это банальный список, не иначе.
это не банальный список. Там навернуто еще пара элементов для нормального отображения. В своем комментарии я имел именно это в виду
совпадение
"использование CSS Srpites"
НЛО прилетело и опубликовало эту надпись здесь
Ну что за нездоровые призывы? Автору что-то показалось и он тутже написал, что спрайты зло?
С тем же успехом можно писать "AJAX — зло" или "XSLT — зло" и тому я могу привести массу примеров. Вчера вылупившийся верстальщик увидит страшный заголовок и склепает новый, а хуже того, переделает рабочий вариант. Естественно, улучшений не получит. С любой самой совершенной технологией можно нагородить такого, что мало не покажется.
Статья пригодится многим, но дополните её. Возьмите конкретный пример и реализуйте его в разных вариантах и с разным подходом. Вот это будет действительно полезно.
зачем? я уже продемонстрировал разные подходы в множестве статей, это хоть кому-то помогло?
http://webo.in/articles/habrahabr/48-flo…
http://webo.in/articles/habrahabr/46-cro…
http://webo.in/articles/habrahabr/44-uno…
http://webo.in/
Я слежу(стараюсь) за Вашими постами, тема мне интересна, и надеюсь, что помогли они не только мне. В своем вопросе вы лукавите; если Вы считаете, что незачем, для чего тогда пишете?
В любом случае Вам спасибо и успехов.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.