Комментарии 15
Я бы сказал, что на любителя расставлять изображение в таком порядке. Я так и не понял в чем выгода :(
выгода в автоматизации, вестимо — попробуйте хотя бы для одного сложного проекта «вручную» сделать спрайты — много часов убьете
Думаю нужно еще усовершенствовать алгоритм, и не делать полотно из всех картинок, хотя могу ошибаться спрайты использовал всего пару раз.
усовершенствовать в каком направлении? разбивать картинки по дополнительным группам?
Я просто не понял, зачем строить лесенку?
проблемы описаны по указанной ы статье ссылке:
webo.in/articles/habrahabr/08-all-about-css-sprites/
Более конкретно: попробуйте (например, в Safari) увеличить шрифт на странице
css-tricks.com/examples/CSS-Sprites/Example2After/default.htm
— фон «выползет» из-под иконок у элементов списка
webo.in/articles/habrahabr/08-all-about-css-sprites/
Более конкретно: попробуйте (например, в Safari) увеличить шрифт на странице
css-tricks.com/examples/CSS-Sprites/Example2After/default.htm
— фон «выползет» из-под иконок у элементов списка
Да, было бы гораздо лучше если бы можно было по группам разбивать, а так же исключать некоторые изображения из оптимизации.
Для больших проектов получится очень большая и увесистая картинка…
Для больших проектов получится очень большая и увесистая картинка…
скажем прямо — про «много часов» — художественное преувеличение.
Интересная и полезная штука.
Но есть несколько вопросов (замечаний):
Но есть несколько вопросов (замечаний):
- Не совсем понял зачем изображение распологать «лесенкой»? На выходе мы получаем слишком большой файл, наверняка есть более удачные способы компоновки.
- Почему только PNG и JPG? Мне кажется оптимальней было бы «градиентыне фоны» сохранять в JPG, а всякие значки, иконки, полоски в GIF. Да файлов немного больше бы стало, но зато получается заметная экономия в размерах.
- Я не уверен, что все изображения надо помещать в спрайты. Вот на примере логотип Joomla я бы лучше оставил в виде отдельного файла. Это и пользователю удобно будет сохранить наш логотип и поисковики по запросу названия будут показывать наш логотип.
- Дополнение к предыдущему пункту: наверное следует сделать возможность выбора изображений, помещаемых в спрайт и дать возможность окончательной ручной группировки изображений.
- Почему сразу же отказались иметь дело с анимированными изображениями? Думаю если сжать на всяких форумах все смайлики в один большой гиф, получим значительное снижение как трафика, так и нагрузки на сервер.
спасибо за развернутый комментарий. По пунктам:
1. Освещен чуть выше (приведены ссылки).
2. PNG жмет градиенты не хуже, чем JPEG (тут, конечно, надо проводить отдельное исследование), но без потерь качества. Если же в итоговом файле много иконок, значков и прочее, то в 95% случаев PNG лучше. Можно опционально пробовать сохранить и так, и так — и потом смотреть на размер.
По поводу PNG-изображений
webo.in/articles/habrahabr/26-speed-up-images-png-versus-gif/
3. Это тема для отдельной дискуссии. Если Вы хотите, чтобы сайт быстро загружался — то используем спрайты. Если какие-то другие цели — то не используем.
4. Полностью согласен. Пожалуй, стоит ввести stop-list.
5. Анимации не так много используется (особенно той, что логично склеивать в спрайты)… Можно рассмотреть вариант со склейкой всей анимации в один спрайт — у Вас есть подходящий рабочий пример?
1. Освещен чуть выше (приведены ссылки).
2. PNG жмет градиенты не хуже, чем JPEG (тут, конечно, надо проводить отдельное исследование), но без потерь качества. Если же в итоговом файле много иконок, значков и прочее, то в 95% случаев PNG лучше. Можно опционально пробовать сохранить и так, и так — и потом смотреть на размер.
По поводу PNG-изображений
webo.in/articles/habrahabr/26-speed-up-images-png-versus-gif/
3. Это тема для отдельной дискуссии. Если Вы хотите, чтобы сайт быстро загружался — то используем спрайты. Если какие-то другие цели — то не используем.
4. Полностью согласен. Пожалуй, стоит ввести stop-list.
5. Анимации не так много используется (особенно той, что логично склеивать в спрайты)… Можно рассмотреть вариант со склейкой всей анимации в один спрайт — у Вас есть подходящий рабочий пример?
градиентные фоны нужно сохранять в png24
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS Sprites 2.0