Обязательно ли указывать картинке размеры в html?
Мысль вот в чем - если указать размеры, браузер выделит под изображение место на странице и когда оно загрузится не будет скачкообразного смещения элементов. При использовании качественных, объемных изображения, пользователь может уже начать изучать текстовую информацию на странице и тут вдруг бац, браузер дошел до картинки, текст который читал пользователь сместился, пользователь вынужден искать где он читал. Однако непосредственно в html указывать размеры не нужно. Это можно сделать в css и уже там реализовывать адаптивность. Закономерный вопрос - скачкообразное смещение в этом случае все же может возникнуть. Для того чтобы этого гарантировано избежать есть различные методики. Например critical path css. Возвращаясь к html, с введением тега picture html то же получил инструменты для адаптивности. Рекомендую изучить.
Для ускорения отрисовки рекомендовали указывать размеры или в img, или в css, без разницы. Не рекомендовали пропускать указание размеров картинок, а также врать об этих размерах (если вы укажете 120x120 px для картинки 250x250 px, то это также плохо, как не указывать размеры вообще - запустит те же процессы "пере-рендеринга").
Но всё это было в старых версиях Google Page Speed, а теперь рекомендуют:
- минифицировать всё, что возможно;
- управлять процессом загрузки: дробить css, код хидеров, футеров, сайд-меню - всё будет загружаться в том порядке, как вы указываете и тут же рендериться (если это возможно - рекомендуют "текст статьи" загружать первым, а затем всю навигацию и картинки)
- если это возможно, использовать css вместо картинок в принципе.