Размер изображения общения, лучшие практики

11

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

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

Добавить атрибут id для каждого изображения и поместить высоту / ширину в CSS? Это сводит на нет бонус рендеринга встроенных высоты и ширины изображения?

css html images

— Томас
источник

12

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

— Джон Конде
источник

1

... и не забывайте ALTтег тоже, даже если он пустой, или проверки соответствия будут жаловаться.

— Талви Ватиа

@ Чальвак Извините, но вы не правы. Вы можете изменять ширину и высоту динамически с помощью программирования на стороне сервера и / или JavaScript. И по вашей логике вы не можете переопределить встроенные стили.

— Джон Конде

Ой, похоже, я был неправ по поводу отсутствия перезаписи css в любом случае, !importantв css позволяет переопределять атрибуты width и height, поэтому изначально использование width / height работает хорошо. Теперь я застрял в позиции голосования вниз. Если бы вы хотели редактировать ответ, я бы это изменил. Пожимает плечами Не то, чтобы это слишком много значило.

— Kzqai

8

Ответ Джона Конде точен. Изображения имеют ширину и высоту - это часть их содержания , а не их стиль . Таким образом, нет необходимости делать «разделение» здесь.

Тем не менее, одно исключение: CSS для размеров изображения является полезным , если у вас есть много изображений одинакового размера (например , эскизы). Здесь гораздо лучше использовать класс CSS для сокращения HTML и ускорения разработки.

Для дизайна веб-сайта, включая кнопки и значки, лучшее решение - CSS-спрайты.

— DisgruntledGoat
источник

+1, спрайты css делают смешную разницу в скорости сайта.

— Kzqai