Обязательно ли указывать картинке размеры в html?

Question

[Evgenij_nechujveter]

Обязательно ли указывать картинке размеры в html, мол это ускоряет отрисовку? А что если это адаптивная верстка? При адаптивной верстке мне кажется лучше не указывать img размеры

Answer 1

[Андрей Федоров]

Мысль вот в чем - если указать размеры, браузер выделит под изображение место на странице и когда оно загрузится не будет скачкообразного смещения элементов. При использовании качественных, объемных изображения, пользователь может уже начать изучать текстовую информацию на странице и тут вдруг бац, браузер дошел до картинки, текст который читал пользователь сместился, пользователь вынужден искать где он читал. Однако непосредственно в html указывать размеры не нужно. Это можно сделать в css и уже там реализовывать адаптивность. Закономерный вопрос - скачкообразное смещение в этом случае все же может возникнуть. Для того чтобы этого гарантировано избежать есть различные методики. Например critical path css. Возвращаясь к html, с введением тега picture html то же получил инструменты для адаптивности. Рекомендую изучить.

Answer 2

[Codebaker]

Для ускорения отрисовки рекомендовали указывать размеры или в img, или в css, без разницы. Не рекомендовали пропускать указание размеров картинок, а также врать об этих размерах (если вы укажете 120x120 px для картинки 250x250 px, то это также плохо, как не указывать размеры вообще - запустит те же процессы "пере-рендеринга").

Но всё это было в старых версиях Google Page Speed, а теперь рекомендуют:
- минифицировать всё, что возможно;
- управлять процессом загрузки: дробить css, код хидеров, футеров, сайд-меню - всё будет загружаться в том порядке, как вы указываете и тут же рендериться (если это возможно - рекомендуют "текст статьи" загружать первым, а затем всю навигацию и картинки)
- если это возможно, использовать css вместо картинок в принципе.

Comments

[Evgenij_nechujveter]

Codebaker

- если это возможно, использовать css вместо картинок в принципе.

Можно пример?

[Ankhena]

Evgenij_nechujveter, Например, линейные градиенты под углом вместо фоновых изображений.

[Codebaker]

Evgenij_nechujveter, ну или скругленные углы любых блочных элементов с включенным border (всего несколько лет назад это делали исключительно картинками).
Также я отнес бы сюда использование web-fonts для иконок, но это уже не совсем о css.