Как зарезервировать место для отзывчивого изображения?

Question

[ICUI4CU]

Для изображений рекомендуется задавать атрибуты width и height, чтобы пока оно не загрузилось браузер зарезервировал для него место и контент не прыгал. Как это реализовать в адаптивной верстке, когда для изображений задается правило max-width:100%;height:auto ?

Answer 1

[Ivan Bogachev]

Делать временные заглушки/плейсхолдеры (называйте как хотите) для картинок с теми же пропорциями. Удобно для этих целей использовать SVG - если сервер знает размер картинки, то можно сгенерировать прямоугольник и вставить SVG с ним в то место, где должна быть картинка, а потом саму картинку абсолютным позиционированием положить на нее сверху. Имеет смысл эти заглушки генерировать заранее (один раз) для загружаемых на сервер картинок. В некоторых случаях можно еще сильнее заморочиться и сделать все не только функционально, но и красиво.

Answer 2

[WapSter]

lazy load + низковесный плейсхолдер