Устанавливает ли атрибуты `width` и`height` в <picture> или его <img> что-нибудь?

Question

Я хочу начать использовать WebP на моем сайте. Я конвертирую код, который выглядит так:

<img src="example.jpg" width="100" height="100" alt="Example">

Чтобы код был похож на это:

<picture>
  <source srcset="example.webp" type="image/webp">
  <img src="example.jpg" width="100" height="100" alt="Example">
</picture>

Где правильное место, чтобы положить width и height атрибуты? Делает просто используя height а также width атрибуты в <img> элементная работа, даже когда <source> изображение выбрано?

Answer 1

Да, используя height а также width атрибуты в <img> элемент (и нигде больше) работает как задумано. Вам не нужно пытаться установить какие-либо атрибуты на <picture> элемент.

Запустите этот фрагмент кода для доказательства:

<p><code>&lt;img&gt;</code> without <code>height</code> and <code>width</code> attributes:</p>
<picture>
  <source srcset="https://a.webpurr.com/Ql62.webp" type="image/webp">
  <img src="https://stackru.com/images/4cabdc59a6cfa6861af605e666b6139a6bdd1f7e.jpg" alt="Example">
</picture>
<p><code>&lt;img&gt;</code> with <code>height</code> and <code>width</code> attributes:</p>
<picture>
  <source srcset="https://a.webpurr.com/Ql62.webp" type="image/webp">
  <img src="https://stackru.com/images/4cabdc59a6cfa6861af605e666b6139a6bdd1f7e.jpg" width="100" height="100" alt="Example">
</picture>

(Если вы видите изображения, помеченные "JPEG", значит, вы используете браузер, который не поддерживает WebP. Если вы не видите изображения, возможно, хост изображений webpurr.com не работает.)