Теперь блок преимуществ соответствует макету. Но его можно оптимизировать.

У каждого преимущества есть иконка, которую мы добавили отдельной фоновой картинкой. Получается, что для отображения преимуществ нужно три HTTP-запроса.

Чтобы страница загружалась быстрее, нужно уменьшать не только её общий вес, но и количество HTTP-запросов (это особенно важно, если сайт работает по протоколу HTTP/1.1).

Для уменьшения количества запросов часто используют растровые спрайты. Спрайт — это одна большая картинка, в которой объединены мелкие декоративные изображения. То есть те изображения, которые можно вставить фоном. Спрайт для Великого Кексби вы видите справа.

Перед тем, как использовать спрайт, нужно произвести подготовку: с помощью псевдоэлементов добавим на страницу виртуальные теги-контейнеры, куда и будем помещать спрайт.

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

.item::before {
  content: "";
}