Должен ли я использовать технику спрайтов для эскизов на моем веб-сайте?

На веб-сайте, который я создаю, у меня есть около 100 различных миниатюр (64x64), которые отображаются в разное время. На некоторых страницах может отображаться только 5-15 эскизов. На других загружаются все 100.

Я рассматриваю возможность использования такой техники, как спрайты CSS, для отображения изображений. То есть вместо того, чтобы иметь теги изображений для каждого большого пальца, сделайте что-то вроде:

<span class=thumb1"></span>

А затем используйте CSS, чтобы взять фрагмент одного изображения со всеми большими пальцами, сшитыми вместе. То есть одно изображение со всеми 100 превьюшками (в данном случае изображение 640x640).

Мои вопросы:

  • Это хорошая идея?
  • Если да, то должен ли я делать это на всех страницах, где есть изображения, или только на страницах со всеми изображениями?
  • Есть ли другой метод, кроме спрайтов, который может быть лучше, чем просто включение изображений с тегами img?

image html css css-sprites
person Jeremy Kauffman    schedule 17.01.2010    source источник
comment
Вы заранее знаете, понадобятся ли странице все изображения?   -  person Khanzor    schedule 18.01.2010
comment
Да, я заранее знаю, на каких страницах нужны все изображения, а какие — на некоторых.   -  person Jeremy Kauffman    schedule 18.01.2010

Ответы (3)


arrow_upward
8
arrow_downward

Если вы думаете, что обычный пользователь посетит по крайней мере две разные страницы с этими миниатюрами, то я считаю, что использование спрайтов было бы действительно хорошей идеей!

На самом деле я бы сделал одно большое изображение со всеми миниатюрами, а затем использовал его на всех страницах!

Почему?

Оптимизируйте полученный PNG:

После того, как вы создали свой спрайт, если это PNG, вы можете еще больше оптимизировать PNG с помощью этого инструмента: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/

Когда не использовать спрайты:

  • Когда часть изображений в спрайте часто меняется
  • В этом конкретном случае: когда большинству пользователей потребуется меньше (около) 10% изображений.
person Andrea Zilio    schedule 18.01.2010
comment
Спасибо, это очень полезный ответ! Это был Yahoo! производительность, которая вдохновила этот вопрос. Меня интересует цифра 10%. У вас есть больше информации об этом? - person Jeremy Kauffman; 18.01.2010
comment
Нет, Джереми, это не правило и не существует такого правила. Это действительно зависит от вашей ситуации, и было бы правильнее думать в терминах% размера спрайта, который понадобится вашим пользователям, чем количество изображений, которые понадобятся вашим пользователям. В любом случае, в вашем случае, когда у вас есть изображения размером 64x64 пикселя и страницы, которые используют от 5 до 15 или все изображения, я думаю, что такое правило нормально, и поэтому 10% — это мое мнение, основанное на вашем конкретном случае. (Я указал это в ответе, надеюсь, теперь это более понятно) - person Andrea Zilio; 18.01.2010

arrow_upward
2
arrow_downward

Я не совсем уверен, что вы имеете в виду под «спрайтами», но я думаю, что вы имеете в виду это: вместо 100 изображений по отдельности вы создаете 1 изображение с растром 10x10. Каждая координата (x,y) содержит одно из изображений, которое вы хотите показать. Теперь, если вы отображаете изображение, вы используете CSS для установки background-location: т. е. x * -64px и y * -64px, возможно, используя JavaScript для вычисления x и y для каждого промежутка изображения или скрипты на стороне сервера для распечатки динамического CSS.

  • Да, это хорошая идея: она сокращает время загрузки, так как нужно загрузить только одно большое изображение вместо сотен меньших.
  • По-разному. Если у вас есть возможности кеширования страницы, то вы можете "сшить" все миниатюры в один файл изображения. Если у вас очень динамичная веб-страница, то довольно сложно создавать сшитое изображение каждый раз, когда обновляются эскизы.
  • Не уверен, если это то, что вы называете «спрайтами», то нет, если вы называете «спрайтами» что-то еще, то да: этот ответ является примером одного из них.
person Pindatjuh    schedule 17.01.2010
comment
Это то, что я имел в виду под спрайтами, я отредактировал вопрос, чтобы быть более ясным. Изображения относительно статичны. Некоторые добавляются/обновляются время от времени, но не так часто, чтобы быть слишком дорогими или раздражающими. - person Jeremy Kauffman; 18.01.2010

arrow_upward
2
arrow_downward

Это хорошая идея, если

  • Скорость имеет значение

  • Вы не заботитесь о доступности (программы чтения с экрана, читающие текст ALT изображения и т. Д., Все это исчезает, когда вы используете спрайты)

  • Вам все равно, что ваши эскизы не будут распечатываться по умолчанию в любом браузере

  • Вы можете сделать это, не превратившись в кошмар обслуживания (какое изображение снова было на позиции 461?)

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

person Pekka    schedule 17.01.2010
comment
Доступность не должна быть жертвой использования спрайтов для повышения производительности загрузки страницы. В идеале вы должны включить текст в тег span из OP и сделать текстовый отступ этого текста далеко от экрана. Это позволит программам чтения с экрана его по-прежнему читать. Хотя другие минусы в силе. - person Ryan Joy; 18.01.2010
comment
Да, спрайты CSS — это нормально, когда вы заменяете фоновые изображения CSS, но если вы заменяете изображения HTML, вы теряете атрибут alt и много информации для SEO, браузеры не отображают изображения и люди полагаются на вспомогательные технологии, такие как программы чтения с экрана. Если вы хотите повысить производительность с изображениями HTML, переместите свои изображения на images.domain.com с помощью сервера Lighttpd без файлов cookie и т. д. Для этого вам не нужны Apache или IIS, и браузеры могут загружать больше файлов, чем при использовании только www.domain. .com - person FelipeAls; 18.01.2010