Якщо я знаю висоту та ширину зображення, яке я збираюся відображати з тегом зображення, чи повинен я включати атрибути висоти та ширини або просто розміщувати інформацію у CSS? Або обидва?
Напр.
<img src="profilepic.jpg" height="64" width="64" />
або
<img src="profilepic.jpg" height="64" width="64" style="height: 64px; width: 64px;" />
або
<img src="profilepic.jpg" style="height: 64px; width: 64px;" />
Відповіді:
Відповідно до Google Page Speed , ви завжди повинні визначати ширину та висоту в тегу зображення. Але для перевірки ви не можете використовувати тег стилю.
Крім того, завжди слід вказувати ту саму висоту та ширину, що й фактичне зображення, щоб браузер не мусив вносити в нього будь-які модифікації, такі як зміна розміру.
Я б запропонував це зробити
<img src="..." height="20" width="50">
Редагувати: Хтось запропонував у коментарях, що швидше просто не додавати жодних атрибутів. На думку Google (не те, що вони закінчують усі знання браузера):
Якщо у документі, що містить цей документ, не вказані розміри, або якщо вказані розміри не збігаються з розмірами реальних зображень, браузер вимагає переформатування та перефарбовування після завантаження зображень. Щоб запобігти повторному переформатуванню, вкажіть ширину та висоту всіх зображень або в тегу HTML, або в CSS. - Докладніше
Враховуючи це, ви можете робити розміри img у CSS, але для перевірки вам доведеться це робити у файлі CSS, а не вбудованому.
До речі, Google Page Speed - це низка порад, спрямованих на швидше надання сторінки.
widthАтрибут] не є важливим, але він допоможе браузеру швидше і чіткіше відобразити вашу сторінку, особливо в поєднанні з елементом висоти .... Це призведе до зупинки того дратівливого стрибка, який відбувається, коли свіжозавантажений images раптово займає місце в документі і штовхає весь вміст вниз, що призводить до того, що користувач втрачає своє місце на сторінці. Так що так, використовуйте атрибут width (і height) ...., щоб визначити внутрішню висоту зображення файл, а не вказати бажаний розмір макета. ", html.com/attributes/img-width
Завжди слід вказувати зображення heightта widtha, якщо лише для того, щоб допомогти браузеру розкласти сторінку ще до того, як зображення було завантажено.
Див. 13.7 Візуальна презентація зображень, об’єктів та аплетів у специфікації HTML 4.01:
Атрибути висоти та ширини дають користувачам уявлення про розмір зображення або об’єкта, щоб вони могли зарезервувати для нього місце та продовжувати рендерінг документа, чекаючи даних зображення.
Їх рекомендують і не вимагають, але ви дійсно, дійсно повинні вказати їх ;-)
Також переконайтесь, що вказані вами розміри насправді відповідають розмірам зображення.
Немає нічого гіршого, ніж чекати завантаження сторінки, лише тому, що ці 400x300(!) Зображення насправді більш схожі 4000x3000на 95% якості.
Так, вам слід вказати розміри, щоб користувацькі агенти заздалегідь знали розмір до повного завантаження зображення, тому макет не міг би виглядати зламаним, якщо він покладається на розміри завантаженого зображення. Крім того, якщо ви покладаєтеся на майно фільтра IE6 для вставки PNG ти будеш потрібен ці розміри.
Ця відповідь тепер датована, і я б не дав тієї ж рекомендації, як у 2009 році із сучасними браузерами.
Насправді не має значення, який із них ви використовуєте, але я б рекомендував використовувати лише один.
Я б рекомендував атрибут над рішенням css, оскільки він більш сумісний із старими браузерами та людьми з вимкненими стилями.
widthі heightатрибути, це не буде настільки ж дисонанс.
Насправді їх не потрібно вказувати. Відповідно до специфікації w3c, ви використовуєте їх лише для того, щоб замінити значення за замовчуванням, які вбудовані у файл зображення та читаються браузером. При використанні буде масштабувати оригінальне зображення до заданих розмірів, тому їх розміщення робить додатковий підрахунок для браузера.
Атрибути висоти та ширини дають користувачам уявлення про розмір зображення або об’єкта, щоб вони могли зарезервувати для нього місце та продовжувати рендерінг документа, чекаючи даних зображення.
<img src="profilepic.jpg" alt="image" />