Альтернатива URI данных или спрайтов?

Question

У меня здесь небольшая ситуация. Мое намерение заключается в сохранении HTTP-запросов, что, естественно, замедляет загрузку страницы по мере увеличения количества запросов. Моим первым решением было заняться спрайтами. Однако я не могу масштабировать спрайт с относительными единицами должным образом, так как это приводит к тому, что части одного изображения появляются на другом. Затем я просмотрел URI данных. Это казалось очень многообещающим, пока я не прочитал, что разные браузеры имеют (очень) разные ограничения по размеру, которые могут варьироваться от нескольких килобайт, до нескольких МБ.

На данный момент я застрял в этой ситуации, когда я ничего не могу выбрать, кроме как пойти на старый метод <img src="image.png">.

Итак, вопрос 1: Есть ли альтернатива спрайтам и URI, которые могут достичь аналогичной цели сокращения запросов и ускорения времени загрузки?

Вопрос 2: Поскольку максимальный размер URI варьируется, есть ли какое-то место, где я могу узнать, какие браузеры поддерживают какие размеры? Лично мне не нужны какие-либо браузеры, которые достаточно устарели, чтобы не работать с CSS3 и HTML5, так что это было бы еще большей помощью, если бы кто-то знал об этом.

Answer 1

Вы можете использовать CSS3 @font-face правили определить свой набор иконок вы просто должны создать свой собственный шрифт, который Вы можете использовать http://icomoon.io/ для готового набора иконок, и если вы хотите, чтобы ваш собственный затем создать вектор ваших изображений (SVG), используя иллюстратор или инструмент, с которым вы хорошо справляетесь и импортируете в icomoon, создайте свой собственный шрифт и сохраните запросы сервера.

Примечание: Необходимо добавить все типы шрифтов, как отсутствие поддержки браузера кирки браузера поддерживается шрифт

CSS, чтобы встроить созданный шрифт (например, TTF Woff, SVG..):

@font-face 
{ 
font-family: myFirstFont; 
src: url(sansation_light.woff);/*need to add multiple*/ 
}