Чи слід вказати розмір зображення в html?

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

1

8 Відповіді

Неважливо, якщо ви встановите розмір за допомогою атрибутів HTML або в таблиці стилів, але ви все-таки маєте вказати розмір для зображень.

Якщо в даний час зображення завантажуються набагато швидше, все ще помітна затримка між відображуваною сторінкою та спливаючими зображеннями. Це все ще дратує, коли макет сторінки змінюється під час завантаження зображень.

2
додано

Я просто відповів на аналогічне запитання в WordPress Stack Exchange, а також в Webmaster Stack. Я розміщую його тут, маючи намір роз'яснити і допомогти багатьом людям. (адміністратори/модератори: якщо це не дозволено, дайте мені знати правильний спосіб допомогти).

насправді не означає, що вам слід вказати ширину та висоту в html. Що це означає, що ти повинен залишити потрібний простір і, коли зображення завантажується, браузеру не доведеться переплавляти і перефарбовувати сторінку.

     

Крім того, якщо ви твердо кодуєте розміри, це види перемог реагує на поведінку. Якщо ваш макет не чуйний, це добре, але якщо ви хочете зберегти деяку реакцію, ви можете використовувати тільки CSS для досягнення результатів.

     

Більшість часу, використовуючи як ширину, так і max-width: 100 , виконають роботу, але це повідомлення від Smashing Magazine має цікаву техніку: замість використання max-width: 100%, ви можете скористатись командою Padding "Внизу хак" :

     

"За допомогою методики ми визначаємо висоту як міру щодо ширини. Поліпшення та маржа мають такі властиві властивості, і ми можемо використовувати їх для створення співвідношення сторін для елементів, які не мають будь-якого вмісту в них.   Оскільки підкладка має таку можливість, ми можемо встановити нижню підкладку відносно ширини елемента. Якщо ми також встановимо висоту 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 пікселів, яке ви хочете показати лише як 100x200, зменште його! розмір файлу буде набагато меншим, щоб він завантажувався швидше :)

0
додано
загалом, так, хоча багато нових чуттєвих методів цього не вимагають (хоча ви все одно хочете, щоб воно не було більшим, ніж абсолютно необхідним)
додано Автор Damon, джерело

Вона не повинна бути вбудованою - ви можете зробити це за допомогою зовнішнього CSS. Деякі старі браузери, якщо ви не вкажете розмір, просто розглядають його як 0px;

0
додано

Я б сказав так, якщо хочете переконатися, що білий простір входить у випадку, якщо зображення не завантажується або під час завантаження документа. Але ні, якщо ви масштабуєте/змінюєте розмір зображення за допомогою цих атрибутів, як його непотрібне навантаження в браузері та виникає спотворення зображення.

0
додано

Якщо ви розробляєте для сумісності крос-браузера, то ви повинні принаймні вказати висоту та ширину у CSS для самого зображення. Я виявив непослідовність між FireFox, IE, Opera тощо, якщо розміри не вказані спеціально для зображення. Через те, що кожен веб-переглядач, не кажучи вже про різні версії, відрізняється від дотримання стандартів HTML. Я виявив, що деякі браузери будуть робити все можливе, щоб екстраполювати наміри дизайнерів HTML, тоді як інші просто кричать про першу помилку. Я також рекомендую розміри EM, а не піксель або%, якщо ви збираєтеся переглядати веб-сайт із мобільного пристрою, наприклад на планшеті. Я скажу, однак я тільки почав грати з HTML5, тому я не розумію різницю в HTML5 щодо зображень.

0
додано