Я создал целевую страницу с новым форматом изображений WebP, который значительно уменьшает размер изображения. Просто так:
#intro {
background-image: url("/assets/images/intro-lg.webp");
}
Проблема начинается с браузеров, которые не поддерживают этот формат (например, IE).
Конечно, я мог бы добавить то же изображение, что и .png после .webp, вот так:
#intro {
background-image: url("/assets/images/intro-lg.webp"), url("/assets/images/intro-lg.png");
}
Но тогда он теряет смысл, поскольку современные браузеры загружают оба этих изображения.