Background-repeat или обычное изображение

#css #браузер

Есть фоновая картинка заданная как backround-image в css - весит 27кб.
Есть "паттерн" который можно задать так же через css и "размножить" по блоку background-repeat.
Весит 113 байт.

Какой из вариантов будет быстрее грузиться чисто теоретически? В одном случае нужно
просто загрузить изображение большего объема, во втором изображение меньше, но браузеру
его нужно "Размножить" на блок.
    

Ответы

Ответ 1

Произвести профайлинг рендеринга довольно трудно. Но это и не нужно. Вполне может
оказаться, что разницы нет или она незначительна.

А если под словом "грузиться" вы подразумеваете загрузку изображения с сервера, то
тут точно разница будет минимальная. Вы можете легко убедится в этом сами посмотрев
timlene в инструментах разработчика брузера Google Chrome.

Метод заполнения повторениями используют все реже потому, что его часто можно заменить
чистым CSS3 без использования изображений вообще, например используя repeating-linear-gradient
как упомянул в коментариях @Artem Gorlachev