Лучше ли определять изображения в прямом HTML или CSS?

Question

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

<a href="#"><img src="#" alt="" width="" height="" /></a>

Или я мог бы сделать...

<a id="img" href="#"></a>

#img {background: url('#') no-repeat; height: #; width: #;}

Что лучше и почему?Оба работают так, как хотелось бы, но есть ли разница во времени загрузки и т. Д., Или есть какая-то лучшая практика?

Answer 1

Использование изображений в HTML лучше, когда изображение имеет какое-либо контекстное значение ... если это декоративная картинка без какого-либо контекстного значения, тогда используйте CSS.CSS для презентации, HTML для контента.

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

Изображение в HTML предназначено для обеспечения визуального смысла в контексте с осмысленным отступлением текста.Следует избегать использования элемента A без какого-либо содержимого, поскольку его содержимое будет иметь отношение со ссылкой для браузеров и веб-сканеров (таких как бот Google).

Использовать изображения CSS только для декоративных целей.В противном случае это может повредить рейтинг вашей поисковой системы.Всегда предоставляйте атрибут alt для изображений, определяйте, что будет представлять, что конечный посетитель не сможет увидеть изображения.

Answer 2

Если изображение имеет контекст, например, логотип или фотографию, я бы предложил загрузить его как <img>. Убедитесь, что вы предоставляете альтернативный текст для доступности и в целях SEO.

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

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

Answer 3

Обычно я стараюсь разместить как можно больше изображений в CSS, но у Doozer и Mario есть хорошие моменты. Если изображение важно для контекста, оно может перейти в HTML. Я также буду использовать теги <img>, когда текст должен плавать вокруг и изображение.

Одна вещь, которую CSS может сделать, что <img> не может это Спрайты CSS-изображений . Это единственное реальное преимущество в производительности, которое вы получите от одного или другого. Веб-сайты, требующие высокой производительности, такие как youtube.com, объединят много изображений в одно большое составное изображение, чтобы сократить трафик HTTP (и, следовательно, время загрузки страницы). Например, это спрайт взят с youtube.com.

Answer 4

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

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

<span class="printIcon" onclick="window.print()">Print</a>

.printIcon { background: url(...) no-repeat; padding-left: 20px }

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

<img src="printButton.png" alt="Print" onclick="window.print()" />