Sprite Sheets для веб-разработки - PullRequest
6 голосов
/ 28 октября 2010

Я сейчас работаю над новым сайтом.У меня всего несколько страниц, и все они используют <img>s.Я думал об этом и решил изучить использование спрайт-листа для всех изображений кнопок и тому подобного, а затем просто использовать CSS для рендеринга соответствующих изображений.Я хотел посмотреть, что все думают об этом.Стоит ли усилий?Как это влияет на SEO, в частности, ALT для <img>s.Есть ли что-то еще, что я должен знать?

Заранее спасибо!

Ответы [ 2 ]

6 голосов
/ 28 октября 2010

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

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

Важная часть заключается в том, что если кто-то смотрит на ваш сайт с помощью программы чтения с экрана или просто просматривает HTML, контент будет успешно передан с тегом изображенияатрибут alt.Если вы используете div с CSS, вы потеряете этот эффект, и некоторые люди могут пропустить его содержимое.

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

Хотя при добавлении других изображений в теги реальных изображений преформация должна быть несколько хуже, но она может быть очень минимальной, если правильно установить заголовки кэширования на изображениях.быстрый поиск нашел это: http://www.google.com/support/forum/p/Webmasters/thread?tid=75fa18ce5e671f5b&hl=en

Что, кажется, смягчает атрибут Alt, помещая текст в div и затем используя спрайты, чтобы скрыть текст:

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

<a href="..." style="position:relative; display:block; overflow:hidden; width:100px; height:100px">
relevant text here
<span style="position:absolute; top:0px; left:0px; width:100px; height:100px; background-image:url('sprite.jpg'); background-position:0px; -100px;"></span>
</a>

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

1 голос
/ 28 октября 2010

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

Альтернативные варианты можно применять как обычно.не будет никаких негативных последствий.Вы не применяете никаких экзотических методов (читай: flash), которые блокируют сканеры, все поддерживает стандарты W3, поэтому все должно быть в порядке.Обязательно запустите его через валидатор W3, чтобы убедиться, что все остальное является кошерным.

Если это делает Google, это должно быть хорошо, верно?

...