Резервируем место под изображения для оптимизации загрузки страницы

Если вы когда-либо проверяли оптимизированность страницы сайта, то не могли не заметить, что сервисы проверок всегда обращают ваше внимание на необходимость резервирования места для загружаемых изображений. Объяснение такой необходимости находится в ее сути: ваш браузер должен понимать и выделять блок правильных размеров, в который будет подгружено изображение – сразу или при его появлении в области просмотра.

В “доадаптивные” времена решение было простым. Достаточно было указать физические размеры изображения в пикселях прямо в html-коде в виде атрибутов height и width:

<img src=”some_src” alt=”some_alt” height=”400” width=”300” />

Это прекрасно работало до тех пор, пока для сайтов не начала применяться адаптивная верстка. Пиксельная размерность уступила место процентам и относительным единицам измерения. Изображения стали растягиваться до размеров родительского контейнера, из-за чего установить их размеры в конкретный момент (т. е. для конкретной области просмотра) стало невозможно. Исключением можно считать разве что мелкие элементы в виде иконок, которые редко или вообще не меняют размеры на различных дисплеях.

В мае 2009 года некий Тьери Кобленц придумал гениальное решение, которое в дальнейшем получило название Padding Top Hack. Суть его заключается в том, что процентные значения CSS-свойства padding-top и padding-bottom зависят от… ширины родительского элемента. Другими словами, если для блока шириной 357 пикселей указать значение padding-top как 100%, то его пересчитанное значение будет равно все тем же 357 пикселям. В результате визуально padding-top превратится в идеальный квадрат размером 357 на 357 пикселей. Не использовать такую возможность было просто глупо!

Решение в стиле Padding Top Hack можно продемонстрировать применительно к следующей разметке:

<div class="parent">
  <div class="child">
    Some Content
  </div>
</div>

Стили:

.parent { padding-top: 56.25%; height: 0; position: relative; overflow: hidden; }
.child  { height: 100%; width: 100%; position: absolute; top: 0; left: 0; }

Вся эта история прекрасно работала для, например, размещения в тексте Youtube-видео. Соответственно, и место под изображения с соответствующим соотношением сторон резервировалось прекрасно. И все же осадочек присутствовал: все это было слегка мудреным и требовало наличия родительского элемента.

Впрочем, Padding Top Hack слегка упрощался за счет CSS-функции calc():

.parent { padding-top: calc(9 / 16 * 100%); height: 0; position: relative; overflow: hidden; }
.child  { height: 100%; width: 100%; position: absolute; top: 0; left: 0; }

И все же, “умные люди наверху” суть проблемы ухватили, и, после непродолжительной паузы, придумали CSS-свойство aspect-ratio. Оно позволило явно указывать соотношение сторон для элемента. Таким образом, атрибуты height и width, а с ними и Padding Top Hack канули в Лету.

Теперь для изображения (или любого другого HTML-элемента) можно просто указать:

img { aspect-ratio: 4/3; }

или

img { aspect-ratio: 1.5; }

, и ваш браузер при любом размере экрана по соотношению сторон вычислит высоту для изображения с шириной, равной 100% от родителя. Соответственно, необходимое место будет выделено, и при прокрутке до области просмотра ваши lazyload-изображения не заставят картинку "елозить" при их прогрузке.

Конечно, область применения свойства aspect-ratio не ограничивается одной только оптимизацией загрузки изображений. Но это, как говорится, уже другая история...

И последнее: в 2021 году все актуальные браузеры получили полную и безоговорочную поддержку CSS-свойства aspect-ratio без каких-либо префиксов.