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

Question

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

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

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

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

Answer 1

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

Примечание: необходимо добавить все типы шрифтов (например, ttf. Woff, svg), так как отсутствие поддержки браузера браузер выбирает поддерживаемый шрифт

CSS для встраивания созданного шрифта:

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