Как задать ширину и высоту изображения в HTML?

Question

[weranda]

Приветствую.
На сайт надо добавить изображение.

При добавлении одного изображения сложностей не возникает:
<img src="" width="" height="">

При использовании тегов picture > source + img возникают сложности:

<picture>
    <source srcset="1.png" type="image/png" media="(max-width: 500px)">
    <source srcset="2.png" type="image/png" media="(max-width: 700px)">
    <source srcset="3.png" type="image/png" media="(max-width: 900px)">
    <img src="default.png">
</picture>

Куда в этом случае добавлять ширину и высоту изображения — для меня вопрос. Добавлять ли? Если добавить размерности в тег img, то этот вариант будет соответствовать действительности только в том случае, когда загрузится изображение default.png. Что делать, как быть? Ведь даже гугл и разные авторы в сети рекомендуют указывать размеры изображения для того, чтобы не «прыгала» страница.

Comments

[JuniSen]

https://habr.com/ru/company/vdsina/blog/555736/

Answer 1

[historydev]

<picture>
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg">
    <img style="width: 30%; height: auto;">
</picture>

Comments

[weranda]

А фактическая высота height:auto, разве не будет рассчитана лишь после загрузки изображения? Если — да, то возможны «дерганья» страницы.

[historydev]

weranda, вы понимаете что код можно менять? Есть такое свойство у него, можно заменить auto на 50px и посмотреть что будет, вау!

[weranda]

Владимир, Я понимаю, что код можно менять. Вот только поняли ли вы вопрос? Если не поняли, поясню. Представьте, у вас есть 10 изображений, медленный интернет, вы открываете страницу, текст подгрузился, а изображения еще не подгрузились, вы читаете написанное, изображение подгружается, оно занимает ранее не рассчитанный размер на странице и своим появлением сдвигает текст. Если бы изначально были указаны точные размеры изображения, то такого не произошло бы — вы прокрутили к тексту страницу, а подгрущающиеся изображения занимали бы отведенное им место, указанное в атрибутах width и height.

[historydev]

weranda, что вам мешает сделать так?

<picture>
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg">
    <img style="width: 30%; height: 100px;">
</picture>
<picture>
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg">
    <img style="width: 50%; height: auto;">
</picture>
<picture>
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg">
    <img style="width: 80%; height: auto;">
</picture>

[weranda]

Владимир, а как это решает проблему того, что я использую picture + source + media? Не понимаю. Могли бы привести на основе того, что в вопросе находится? Должна же одна картинка загрузится, а не три.

[Mizutsune]

weranda,

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

Наверное что-то такое может помочь.

[historydev]

weranda,

<picture>
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg" media="(min-width: 500px)">
      <img style="width: 500px; height: 100px;">
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg" media="(min-width: 200px)">
       <img style="width: 200px; height: 100px;">
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg" media="(min-width: 300px)">
    
    <img style="width: 300px; height: 100px;">
</picture>

[weranda]

Mizutsune, Если изображений много и все они с одинаковым соотношением сторон, то этот вариант подойдет, если же изображения разные их много на сайте, то прописывать aspect-ration для каждого — та еще затея, а если еще изменить изображение, тогда вообще карнавал начнется...как это сложным выглядит.

[weranda]

Владимир, в вашем последнем примере три картинки отображаются, а должна одна. Боюсь полюбопытствовать, вы понимаете что делает атрибут media? Думаю, понимаете) Но картинка-то должна одна появиться, а не три.

[historydev]

weranda,

<picture>
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg" media="(min-width: 500px)" width="500px">
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg" media="(min-width: 200px)" width="200px">
      <source srcset="https://i.pinimg.com/originals/95/30/41/953041070f000d45c05c912005f63724.jpg" media="(min-width: 300px)" width="300px">
    <img>
</picture>

[historydev]

weranda, Здесь можно посмотреть рабочий пример.

[weranda]

Владимир, не, все это не рабочие варианты. Все они смещают положение элементов на странице.