CSS Sprites 2.0

[@jeje]

Я бы сказал, что на любителя расставлять изображение в таком порядке. Я так и не понял в чем выгода :(

[@sunnybear]

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

[@jeje]

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

[@sunnybear]

усовершенствовать в каком направлении? разбивать картинки по дополнительным группам?

[@jeje]

Я просто не понял, зачем строить лесенку?

[@sunnybear]

проблемы описаны по указанной ы статье ссылке:
webo.in/articles/habrahabr/08-all-about-css-sprites/
Более конкретно: попробуйте (например, в Safari) увеличить шрифт на странице
css-tricks.com/examples/CSS-Sprites/Example2After/default.htm
— фон «выползет» из-под иконок у элементов списка

[@jeje]

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

[@fatal]

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

[@nicothin]

скажем прямо — про «много часов» — художественное преувеличение.

[@sunnybear]

:) Вы не сталкивались со сложными случаями, когда картинок большое полусотни

[@nicothin]

Вы правы, с 50+ картинок я не сталкивался. но что-то (5-летний опыт верстки) мне подсказывает, что это, скорее исключение, чем правило.

[@alergi]

Интересная и полезная штука.
Но есть несколько вопросов (замечаний):

[@alergi]

1. Не совсем понял зачем изображение распологать «лесенкой»? На выходе мы получаем слишком большой файл, наверняка есть более удачные способы компоновки.
2. Почему только PNG и JPG? Мне кажется оптимальней было бы «градиентыне фоны» сохранять в JPG, а всякие значки, иконки, полоски в GIF. Да файлов немного больше бы стало, но зато получается заметная экономия в размерах.
3. Я не уверен, что все изображения надо помещать в спрайты. Вот на примере логотип Joomla я бы лучше оставил в виде отдельного файла. Это и пользователю удобно будет сохранить наш логотип и поисковики по запросу названия будут показывать наш логотип.
4. Дополнение к предыдущему пункту: наверное следует сделать возможность выбора изображений, помещаемых в спрайт и дать возможность окончательной ручной группировки изображений.
5. Почему сразу же отказались иметь дело с анимированными изображениями? Думаю если сжать на всяких форумах все смайлики в один большой гиф, получим значительное снижение как трафика, так и нагрузки на сервер.

[@sunnybear]

спасибо за развернутый комментарий. По пунктам:
1. Освещен чуть выше (приведены ссылки).
2. PNG жмет градиенты не хуже, чем JPEG (тут, конечно, надо проводить отдельное исследование), но без потерь качества. Если же в итоговом файле много иконок, значков и прочее, то в 95% случаев PNG лучше. Можно опционально пробовать сохранить и так, и так — и потом смотреть на размер.
По поводу PNG-изображений
webo.in/articles/habrahabr/26-speed-up-images-png-versus-gif/
3. Это тема для отдельной дискуссии. Если Вы хотите, чтобы сайт быстро загружался — то используем спрайты. Если какие-то другие цели — то не используем.
4. Полностью согласен. Пожалуй, стоит ввести stop-list.
5. Анимации не так много используется (особенно той, что логично склеивать в спрайты)… Можно рассмотреть вариант со склейкой всей анимации в один спрайт — у Вас есть подходящий рабочий пример?

[@JustLike]

градиентные фоны нужно сохранять в png24