Почему бы не спрайтовать большие изображения, которые являются содержимым страницы?

Question

Типичное эмпирическое правило, когда речь идет об использовании CSS-спрайтов для изображений, заключается в том, что вы должны делать это только для небольших изображений (например, значков), и что фактическое содержимое изображения всегда должно быть представлено с помощью <img> элементов. Мой вопрос: почему? Разве преимущества спрайтов не имеют смысла и для изображений с контентом?

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

Answer 1

Можно, но:

1. Изображения содержимого, как правило, используются не так часто, как изображения в пользовательском интерфейсе, например значки. Представьте себе газетный сайт: если бы каждое изображение контента, которое они использовали в каждой истории, было частью спрайта, этот спрайт очень быстро стал бы огромным и мог быть загружен даже пользователями, которые смотрели только одну историю.

2. Как правило, ожидается, что контент сайта будет поддерживаться людьми, которые не знают CSS. Немного неразумно ожидать, что редакторы контента отредактируют файл с изображением главного спрайта, повторно сохранят его в JPG и вставят какой-нибудь CSS-код, просто чтобы поместить изображение на страницу.

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

Очевидно, что это обобщения - в конкретной ситуации может иметь смысл спрайтовать больше / больше контент-у изображений.

Используя тег <img> с крошечным прозрачным файлом изображения для спрайтов, вы можете сделать это для любых спрайтовых изображений - это часто полезно для отсечения и позиционирования спрайтового изображения сверх того, что позволяет background-position.

Answer 2

Еще одна причина, по которой я могу придумать, - это поисковые системы; если у вас есть изображение с описательным alt-тегом или элемент figure с figcaption, поисковые системы смогут найти, классифицировать и показать его.

Answer 3

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

Согласно http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/ это тоже проблема:

Другим (но гораздо менее важным) недостатком является то, что при использовании спрайтов страница масштабируется с помощью функции полного масштабирования, которая присутствует во многих браузеры, браузер может потребоваться дополнительная работа, чтобы получить правильный поведение по краям этих изображений - в основном, чтобы избежать смежных изображения в спрайте «просачиваются». Это не проблема для маленькие изображения, но могут быть хитом производительности для больших.

Answer 4

Спрайты обычно полезны для статического содержимого (изображения, которые часто встречаются на многих страницах). Содержимое изображений часто отображается только на одной странице, поэтому вы не можете добавить его в файл спрайта.

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

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

Answer 5

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

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

Answer 6

Спрайты используются для уменьшения количества запросов к серверу. Влияние большого количества маленьких запросов замедляет работу сервера более чем на один больший запрос. Но если изображение спрайтов, я бы хотел назвать его sprite-map, слишком велико, это также снизит производительность. Другая важная вещь - это то, что вам не хватает возможности для каждой картинки дать какое-то имя, управлять им и индексировать поисковой системой.