Какой "правильный" семантический способ указать высоту и ширину изображения? В CSS...
width:15px;
или inline...
<img width="15"
?
CSS кажется правильным местом для размещения визуальной информации. С другой стороны, немногие утверждают, что образ "src" не должен указываться как атрибут, а высота/ширина как бы привязаны к данным двоичного изображения, так как это "src".
(Да, я понимаю с технической точки зрения, это не имеет значения.)
Он должен быть определен inline. Если вы используете тег img, это изображение должно иметь семантическое значение для содержимого, поэтому атрибут alt необходим для проверки.
Если изображение должно быть частью макета или шаблона, вы должны использовать тег, отличный от тега img, и назначить изображение как элемент CSS для элемента. В этом случае изображение не имеет семантического значения и поэтому не требует атрибута alt. Я вполне уверен, что большинство читателей экрана даже не знают, что изображение CSS существует.
Я думаю, это зависит от того, как вы используете этот атрибут. Если вы создаете несколько изображений в списке или таблице, чтобы они правильно раскладывались, тогда установите ширину/высоту в свой CSS, чтобы избежать необходимости добавлять еще один набор тегов к каждому изображению в списке. Используйте что-то вроде
ul.gallery img: { width:117px; }
С другой стороны,, если вы вставляете изображение в некоторый контент, и он должен быть определенного размера, чтобы обеспечить корректный поток документа, а затем поместите его в HTML. Таким образом, вам не нужно настраивать таблицу стилей для каждого изображения в html. И таким образом, если вы измените контент на другое изображение, удалите изображение вместе, у вас нет остатков кода, разбросанного в вашем CSS, чтобы не забыть удалить.
Высота и ширина должны быть включены в HTML. Причина в том, что он создает интервал на странице. Если по какой-либо причине img не загружается (и вы были хорошим мальчиком и включили alt... браузер отобразит этот фрейм (используя предоставленные w и h) с помощью внутри внутри.
Основная полезная причина - предотвращение эффекта "поп". Когда браузер загружает страницу, иногда более крупные аспекты, такие как img, занимают больше времени для загрузки, и если вы не указали w и h в HTML, браузер временно разрушит эту область, думая, что ее нет. Затем, когда он, наконец, загружает все, попадает в нужное место.
Это особенно раздражает, но все еще довольно раздражает на компьютере, потому что вы собираетесь щелкнуть ссылку, и вдруг страница сместилась вниз, и вы случайно нажали неверную ссылку.
Я бы сказал, CSS.
HTML о содержании,
CSS - это презентация.
Если вы посмотрите на спецификацию HTML5, определяющую высоту и ширину, это необязательный вариант. Поэтому код действителен с этими атрибутами или без них.
С практической точки зрения очень желательно указать их для предотвращения переполнения страниц, как упомянуто выше. Однако те, кто предлагает это, должны быть в html, потому что из-за этого не хватает фактов, что браузеры используют css при первоначальной сборке страницы. Если бы они не изменились, страница должна была бы быть перерисована для плавающих элементов, указанных дополнений, полей и т.д.
Следует ли указывать в html или css наилучшие оценки по индивидуальным обстоятельствам. Большое количество изображений такого же размера, вероятно, лучше всего будет использоваться с css, одним изображением с html. Тем не менее, если вы указываете другие стили для изображения (цвет рамки, стиль или радиус, float и т.д.), Было бы целесообразно добавить ширину и высоту к css.
Если вы укажете в html, вы можете использовать только пиксели. Если вы хотите указать в процентах от опроса, вам нужно будет использовать css.
На стороне примечания нам рекомендуется использовать ems и%, а не px, чтобы избежать проблем, когда пользователи меняют настройки браузера и т.д., но изображения всегда упоминаются в пикселях. Очевидно, есть практические причины использования px для изображений. Однако сохранение изображений в px казалось бы отрицательным аргументом для того, чтобы не использовать их.
Я бы сказал HTML.
Атрибуты width и height используются, чтобы остановить загрузку страницы и разрастаться разрозненным образом.
Если вы когда-либо читали блок текста на странице только для того, чтобы его оттолкнули вниз, благодаря позднему загрузочному изображению выше, вы знаете, как это расстраивает! Добавление идентификатора к каждому изображению только для указания его ширины и высоты было бы смехотворным и почти таким же грязным, как и добавление двух атрибутов width/height.
Ловушка - Firefox не использует атрибуты ширины и высоты для резервирования пространства изображений, однако, я удивлен, что они не обновили его на самом деле.
Если это часть вашего шаблона сайта, я бы разместил его в файле CSS.
Если он находится только на одной странице, он должен быть встроенным (или определенным в блоке CSS с CSS) вверху.
В <img> статьи в MDN, атрибуты HTML указывают внутренние размеры изображения, т.е. его реальные размеры. Поэтому, в то время как HTML 4 также допускает процентные значения, HTML5 допускает только значения px. (общая ловушка: "px" не следует записывать)
Если вы хотите отобразить изображение с этими размерами, выполните задание. В противном случае вы также должны добавить CSS, чтобы указать размер отображения.
Конечно, лучше отображать изображение в отображаемом размере, чтобы избежать изменения размера браузера, сохранения пропускной способности и т.д., но это не всегда возможно.
См. также ответы на этот вопрос: Какая разница между атрибутом ширины HTML и CSS?
Я считаю, что это часть контента, как вы упомянули, так же, как и атрибут src.
С другой стороны, нет реальной необходимости указывать ширину или высоту в html или css, хотя это может помочь вашей странице визуализировать быстрее.
Я мог ошибаться, и если я, пожалуйста, кто-то меня поправьте... но я думаю, что Google и некоторые другие поисковые системы индексируют содержимое тегов alt.
Иногда, для эстетики дизайна, я создал образ текста, созданный с помощью шрифтов, которые недоступны через HTML, но доступны для Photoshop, Illustrator и т.д. Если у вас есть точное типографское впечатление, которое вы хотите создать, которое включает в себя текстовые информации, единственный способ добиться этого - создать образ типографского текста и поместить фактический текст в тег alt для поисковых систем.
Если у кого-то есть лучшее решение, я бы хотел его услышать.
Между тем, учитывая необходимость того, что я описал, мне было бы разумно проголосовать за встроенные параметры высоты и ширины HTML, а также описания текста в обычном режиме. Это, по сути, контент, а не просто дизайн в таких случаях - и такие случаи действительно не должны быть исключениями из правила, пока CSS и поисковые системы не найдут лучшего решения.
Как клиенты электронной почты справляются с ограничениями img как атрибуты и встроенные стили?
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >
Таким образом, ограничения размера img не должны устанавливаться со встроенными стилями, в первую очередь потому, что Outlook 2007/2010/2013 не соблюдает их.
Что происходит, когда используются оба атрибута и встроенные стили? Некоторые клиенты используют один или другой, а некоторые используют встроенную ширину в сочетании с высотой атрибута:
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >
TL;DR: Используйте атрибуты img для электронной почты html.
Я бы пошел wi (d) th Рекомендация W3C.
То есть, определяя ширину и высоту как атрибут, подобный этому: <img src="example.png" width="150" height="150" alt="example image">
http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element