Какая техника показать изображение в CSS быстрее?

Question

техника 1

.realimage {background: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')}

техника 2

.realimage {background: url('http://..test.jpg);

Вопросы

1. Если мне нужно показать несколько одинаковых изображений на той же странице , я думаю, что техника 2 должна быть быстрее, верно? потому что последующее извлечение изображения будет из кеша браузера?

2. Если мне нужно показать несколько одинаковых изображений на другой странице , я думаю, что техника 2 должна быть быстрее, верно? потому что последующее извлечение изображения будет из кеша браузера?

Answer 1

Мои основные замечания против техники 1:

• URI данных не так широко поддерживаются (я, в частности, рассматриваю IE)
• то же самоеизображение, используемое в разных файлах CSS, вызывает ненужные издержки
• Файлы CSS становятся излишне большими

Техника 2 должна быть предпочтительной.Первоначально это вызывает дополнительный HTTP-запрос, но каждое последующее использование того же URL-адреса будет кэшироваться независимо от того, где он используется (HTML, CSS, Javascript).