Как правильно использовать спрайты?

Добрый день всем. Допустим я в качестве иконок решил использовать спрайт. Да, понятно, что на страничке где много иконок выгоднее сделать так - использовать один спрайт. И так же понятно, что если на странице нужна только одна иконка то лучше не использовать спрайт. А допустим если есть портал, где на некоторых страницах много иконок и на некоторых только одна иконка нужна. Как быть здесь? Хорошо ли сделать один большой спрайт и использовать его везде?

Зависит от проекта. Безусловно, если пользователь будет заходить на одну минутку и ему для использования одной иконки потребуется скачать целую пачку — это не очень хорошо. С другой стороны, если пользоваться проектом подразумевается часто, но хорошо один раз одним запросом закешировать все мелкие картинки и всё.

В ближайшем будущем с приходом протокола http2 в целях оптимизации загрузки ресурсов больше не потребуется объединять картинки в спрайт.

К слову, для мелкой графики рекомендуется переходить на вектор. svg можно подключать как внешние картинки, так и инлайнить в HTML и CSS.

спасибо) теперь многое прояснилось

1 лайк

Даже при переходе на HTTP2 использование спрайтов требуется где это возможно(например у вас 20 иконок на странице или 1 спрайт получается 20 запросов против 1), так как для каждой картинки все равно требуется отдельный запрос, это создает нагрузку на вэбсервер. Для примера использования спрайтов можно воспользоваться например онлайн генератором спрайтов https://ru.inettools.net/image/generator-css-spraytov. Вам сформируется сам спрайт и CSS код для подключения к странице, далее нужно будет просто указать в элементе класс, в котором описаны настройки конкретной картинки из спрайта

HTTP2 всех проблем не решит