Техника низкокачественных плейсхолдеров изображений

140

Учитывая, что в 2022 году средний вес изображения на странице составил 881 Кб, очень важно обеспечить пользователям приятное времяпрепровождение в ожидании загрузки изображений.

Одним из решений является технология низкокачественных плейсхолдеров изображений (low-quality image placeholders, LQIP).

LQIP предоставляет юзерам низкокачественную версию изображения, пока загружается высококачественная версия, гарантируя, что пользователям будет на что посмотреть во время ожидания.

Эта техника направлена на то, чтобы сделать LQIP как можно более похожим на конечное изображение.

<head>

...

...

</head>

<body>

<header style="background-image: url(hi-res.jpg),

url(lo-res.jpg)">

...

</header>

</body>

1. Поскольку background-image скрыт от сканера предварительной загрузки, мы предварительно загружаем LQIP (lo-res.jpg), чтобы он уже был в работе до того, как парсер достигает <header>.

— Обратите внимание, что hi-res.jpg не загружается - мы не хотим, чтобы эти два изображения конкурировали друг с другом, мы хотим, чтобы они появлялись одно за другим.

2. Как только парсер достигает <header>, отправляется запрос на hi-res.jpg.

— В этот момент, если он полностью получен, мы можем отобразить lo-res.jpg в качестве бэкграунда <header>.

— Если lo-res.jpg еще не готов, то в ожидании мы вернемся к фоновому цвету или чему-то подобному.

3. Поскольку lo-res.jpg гарантированно придет первым (он был запрошен гораздо раньше и имеет гораздо меньший размер файла), он отобразится первым.

4. После получения hi-res.jpg, когда бы это ни произошло, он занимает место lo-res.jpg, переключаясь автоматически.

Однако, несмотря на то, что LQIP улучшают пользовательский опыт, они могут не всегда улучшать показатели CWV, особенно LCP.

Метод background-image работает только в том случае, если изображения являются декоративными.

Если же изображение является контентом, например, изображением "героя", то в статье приводится другой способ использования LQIP:

https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/

@MikeBlazerX

Ссылки из поста:
– https://t.me/MikeBlazerX

Источник новости https://t.me/mikeblazerx/2359...

<< Вернуться на канал

05.10.2023 09:05

​Техника низкокачественных плейсхолдеров изображений

Техника низкокачественных плейсхолдеров изображений