How to become an author
Search
Write a publication
Pull to refresh

Comments 59

UFO just landed and posted this here
отвечу по существу: Вы не правы :)

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

Вставка картинок через 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. Если кто-то хочет заминусовать, предлагаю сначала ознакомиться с блогом Клиентская оптимизация в полном объеме. Все заявленные вопросы там неоднократно обсуждались
Total votes 6: ↑5 and ↓1+4
Только я, вдохновленный вашими статьями, начал подумывать про спрайты и тут такое... заголовок, правда, оказался страшнее самой статьи, но все-таки.

Теперь жду в следующей статье разоблачения gzip, только прошу, не надо заголовков типа "gzip - убил мой Xeon, не используйте его!" :)
Total votes 1: ↑1 and ↓0+1
А ведь горькой обычно бывает только правда...
This comment wasn’t rated yet0
UFO just landed and posted this here
я пишу с запасом на будущее. Очень скоро профессия фронт-енд архитектора/клиентского оптимизатора станет по-настоящему востребована. Полгода назад в смысле литературы был полный вакуум, сейчас более-менее.

Я лишь занимаюсь образованием сообщества, не более. Умную голову на плечах никто не отменял, просто хочется сэкономить время будущим коллегам.
Total votes 1: ↑1 and ↓0+1
Это и понятно, ведь в техническом обществе важны люди не которые умеют таскать ящики, работая руками, а те, которые умеют думать, т.е. работать головой.

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

Вообще мне кажется, что человек должен развиваться гармонично
Total votes 5: ↑5 and ↓0+5
гармония и бодибилдинг - несовместимые вещи :)
Total votes 1: ↑0 and ↓1-1
и я одного знаю
This comment wasn’t rated yet0
еще прическу сменить и линзы купить - и будес супер программер красавиц! Правда от количества телок забьет он на программирование )
Total votes 1: ↑1 and ↓0+1
воть ещё одна гармоничная личность)
http://san.itlife-stuio.ru
This comment wasn’t rated yet0
И где конкретные минусы спрайтов то? Все пункты статьи можно свести к одному — нытье верстальщика. Мне, как посетителю веб-страницы, абсолютно насрать на верстальщика. Я хочу, чтобы было быстро — а значит, в подходящих для этого случаях, мне нужны спрайты.
Total votes 7: ↑2 and ↓5-3
этому посвящены раздел "проблемы при загрузке": "визуально" увеличивается время загрузки страницы — и раздел "проблемы при использовании": при увеличении шрифтов фон "выползает", и картинка сайта портится.
Total votes 2: ↑2 and ↓0+2
На практике использую спрайты. Верстальщик спокойно включает отдельные картинки в css, а на этапе релиза скрипт собирает все разрозненные css в один учитывая их последовательность и правила.При этом формируется из всех картинок спрайт. Проблема палитры компенсируется использованием png. Пока еще встречаются ошибки в собирающем скрипте, но все равно каждый релиз нового шаблона проверяется в релиз кандидате.
Total votes 2: ↑2 and ↓0+2
алгоритм сборки, например, таких картинок

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

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

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

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

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

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

Спрайты и прочее приемы - это лишнее, нужен настоящий вектор.
Махонький файлик и такое можно на странице отрисовать и отмасштабировать, ух!
Total votes 1: ↑0 and ↓1-1
Все-таки не для всего тот хак подходит. В частности, необходим position:absolute и полностью отсутствует управление repeat :(
This comment wasn’t rated yet0
Позиционировать картинку с альфа-прозрачностью в IE6 можно при помощи pos:absolute, если элемент с фоном-спрайтом вложен в другой с размерами иконки. Но это доп. разметка.
Total votes 2: ↑2 and ↓0+2
так, в бой пошла тяжелая артиллерия :)
Total votes 1: ↑0 and ↓1-1
ну почему сразу тяжёлая ) всё легко и работает на проектах Яндекса
Total votes 1: ↑1 and ↓0+1
да нет, я скорее про то, что осталось отметиться Виталию и Артемию — и дискуссию можно считать состоявшейся :)
Total votes 1: ↑0 and ↓1-1
Ну, я тут скорее за Виталика, чем за себя говорю — это его методика.
Total votes 1: ↑0 and ↓1-1
можно обойтись clip-ом, или есть ограничения?
Total votes 1: ↑0 and ↓1-1
Решение с clip'ом вижу первый раз, надо будет попробовать.
Total votes 1: ↑0 and ↓1-1
ага, последний случай почему-то напоминает по разметке верхнее меню для http://webo.in/ :)
Total votes 2: ↑0 and ↓2-2
наверное, потому, что это банальный список, не иначе.
Total votes 1: ↑0 and ↓1-1
это не банальный список. Там навернуто еще пара элементов для нормального отображения. В своем комментарии я имел именно это в виду
This comment wasn’t rated yet0
UFO just landed and posted this here
Ну что за нездоровые призывы? Автору что-то показалось и он тутже написал, что спрайты зло?
С тем же успехом можно писать "AJAX — зло" или "XSLT — зло" и тому я могу привести массу примеров. Вчера вылупившийся верстальщик увидит страшный заголовок и склепает новый, а хуже того, переделает рабочий вариант. Естественно, улучшений не получит. С любой самой совершенной технологией можно нагородить такого, что мало не покажется.
Статья пригодится многим, но дополните её. Возьмите конкретный пример и реализуйте его в разных вариантах и с разным подходом. Вот это будет действительно полезно.
Total votes 1: ↑0 and ↓1-1
Я слежу(стараюсь) за Вашими постами, тема мне интересна, и надеюсь, что помогли они не только мне. В своем вопросе вы лукавите; если Вы считаете, что незачем, для чего тогда пишете?
В любом случае Вам спасибо и успехов.
Total votes 2: ↑1 and ↓10
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr