CSS спрайты вместо картинок?

Question

Глядя на код для некоторых крупных веб-сайтов (как я иногда это делаю), я заметил, что некоторые из крупных веб-сайтов (YouTube и Yahoo были двумя, на которые я смотрел), похоже, используют спрайты CSS практически для всего, и почти не используют любые теги вообще.

Это обычно считается хорошей практикой? Я бы подумал, что использование тега будет лучше использовать из-за атрибута alt, хотя, если sprited изображение используется для ссылки на что-то, вы можете использовать пустое изображение для создания ссылки, а затем присвоить этому атрибуту alt (логотип youtube). в левом верхнем углу использует эту технику) и имеет как скорость использования спрайтов, так и доступность использования тега.

Хотя как насчет использования спрайтов для изображений, которые не используются для ссылок? Можете ли вы просто использовать ту же технику, которую использует YouTube, кроме как без тега, и получить лучшее из обоих?

А кто-нибудь широко использует спрайты при разработке сайтов? Я знаю, что с их помощью вы получаете бонусы за производительность (за исключением HTTP-запросов и т. Д.), Но становится ли ужасным администрирование сайта, на котором множество ваших изображений находятся в одном крупном изображении?

Answer 1

Вы должны отделить изображения, которые являются содержанием, и изображения, которые являются украшением.

Декоративные изображения , такие как значки, градиенты или тени, могут быть помещены внутри спрайтов. Это лучший метод для повышения производительности, так как он экономит количество HTTP-запросов, которые браузер должен выполнить, прежде чем он будет готов к рендерингу. Поддерживать это надоедливо, должен признать. Но до тех пор, пока вы группируете похожие изображения вместе, все значки в одном файле, это не так уж плохо. Альтернативой спрайтам является использование данных uri: s и встраивание изображений в CSS-файл, но это не очень хорошо работает с IE7, самым медленным браузером. Так что я бы сказал, что CSS-спрайты - лучший способ, если вам нужна поддержка IE7.

Изображения контента , должны быть в HTML, с соответствующим набором альтернативного текста, чтобы вспомогательные технологии (и Google) могли читать контент как следует.