Следует ли ссылаться на изображения из CSS или из папок содержимого с

Question

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

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

Его точка зренияв идеале, но это отчасти отбросило нас назад, потому что мы всегда ссылались на изображения с <img/>.Мы все делали неправильно?Никто из нас не является экспертом в этой области, поэтому я подумал, что это стоит рассказать сообществу.Как лучше всего ссылаться на изображения?

Answer 1

Существует множество преимуществ использования тегов CSS background-image и встроенных <img />.Фоновые изображения CSS отлично подходят для декоративных элементов (границ содержимого, фоновых рисунков и т. Д.), Поскольку их можно повторять с помощью background-repeat.Тем не менее, они плохо подходят для контентно-ориентированных изображений, таких как фотографии продуктов, био-аватары и т. Д. Здесь встроенные изображения работают лучше всего, поскольку вы можете использовать атрибут ALT, а изображения отображаются независимо от браузера (некоторые старые мобильные браузеры этого не делают).поддержка фонов в CSS).

Answer 2

Беспорядочно помещать все изображения в свойства CSS background-image, на мой взгляд, ужасная идея. Несколько вещей, от которых вы себя лишаете:

• Вы не можете растягивать и изменять размеры изображений (иногда это может быть необходимо)
• Вы не можете использовать атрибут ALT (как уже сказал Дэвид)
• Фоновые изображения обычно не печатаются
• они не будут проиндексированы поисковыми системами
• их трудно хранить пользователю
• пропущенные изображения не будут отображаться со значком «неработающее изображение» в IE
• плохие механизмы компоновки браузера могут иметь проблемы с масштабированием, потому что окружающий контейнер может масштабироваться отдельно от содержимого изображения (хотя это не должно быть проблемой в FF)
• вам всегда нужен дополнительный контейнер, чтобы положить background-image, чтобы вы не могли, например, выполнять операции DOM с элементами изображения

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

Answer 3

Метка - лучший способ.

Это соответствует стандартам, доступно и оптимизировано для SEO.