Должен ли размер изображения указываться в html?

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

1

8 ответы

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

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

2
добавлено

Я просто ответил на аналогичный вопрос на Wordpress Stack Exchange, а также на Webmaster Stack. Я размещаю его здесь, чтобы уточнить и помочь большему количеству людей. (администраторы/модераторы: если это не разрешено, дайте мне знать правильный способ помочь).

на самом деле не означает, что вам нужно указать ширину и высоту в html. Это означает, что вы должны зарезервировать правильное пространство и, когда изображение загружено, браузеру не нужно перепланировать и перерисовать страницу. </Р>      

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

     

В большинстве случаев использование ширины и max-width: 100 будет выполнять эту работу, но этот пост от Smashing Magazine имеет интересную технику: вместо использования max-width: 100% вы можете использовать The Padding -Bottom Hack :

     

"С помощью метода мы определяем высоту как меру относительно ширины. Заполнение и маржа имеют такие внутренние свойства, и мы можем использовать их для создания пропорций для элементов, которые не содержат в них контента.   Поскольку у подкладки есть эта возможность, мы можем установить, чтобы нижнее покрытие было по отношению к ширине элемента. Если мы также установим высоту 0, мы получим то, что хотим. [...]

     

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

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
2
добавлено

Да, это все еще предпочтительнее.

Множество людей не находятся на высокоскоростных соединениях, а мобильные становятся все более распространенными.

1
добавлено

Его всегда лучше использовать CSS

Вы можете жестко задавать высоту и ширину изображения

.myimg img {
width: 10px;
height: 10px;
}
0
добавлено
многие говорят, что используют CSS. Как насчет ситуаций, когда изображения являются частью контента и имеют разный размер? я бы создал пользовательский класс для разных изображений? У вас есть стабильные классы размера изображения .. (вертикальный/горизонтальный, разные пропорции, малый/средний/большой) или просто размер тех, что в html?
добавлено автор Damon, источник

ваш файл изображения сам по себе должен быть размером, который вы хотите отобразить, поскольку, по большей части, если вы обеспокоены медленной загрузкой особенно! если у вас есть изображение 500X800 px, которое вы хотите показать только как 100X200, уменьшите его! размер файла будет намного меньше, поэтому он будет загружаться быстрее :)

0
добавлено
в общем, да, хотя многие новые чувствительные методы не требуют этого (хотя вы все равно хотите, чтобы это было не больше, чем абсолютно необходимо)
добавлено автор Damon, источник

Он не должен быть встроенным - вы можете сделать это во внешнем CSS. Некоторые старые браузеры, если вы не укажете размер, будут рассматривать только как 0px;

0
добавлено

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

0
добавлено

Если вы разрабатываете совместимость с кросс-браузером, вы должны, по крайней мере, указать высоту и ширину в своем CSS для самого изображения. Я обнаружил несогласованность между FireFox, IE, Opera и т. Д., Если размеры не указаны специально для изображения. Из-за того, что каждый браузер, не говоря уже о разных версиях, по-разному относится к соблюдению стандартов HTML. Я обнаружил, что некоторые браузеры сделают все возможное, чтобы экстраполировать намерения дизайнеров HTML, в то время как другие просто каркают первую ошибку. Я также рекомендовал бы размеры em, а не пиксель или%, если вы собираетесь просматривать веб-сайт с мобильного устройства, такого как планшет. Я скажу, однако, я только начал играть с HTML5, поэтому не вижу разницы в HTML5 по отношению к изображениям.

0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)