Объединить несколько изображений вместе для HTTP?
У меня есть страница с несколькими сотнями небольших изображений, которые необходимо загружать при посещении страницы. Общий объем данных составляет 11 МБ, но загрузка всей страницы по-прежнему занимает более 11 секунд.
Глядя на профилировщик сети Chrome, становится совершенно очевидным, что большая часть времени тратится впустую на ожидание соединений. Типичное изображение имеет:
- 0,13 мс - Запрос отправлен
- 240,01 мс - Ожидание (TTFB)
- 1,13 мс - Загрузка контента
Это, с политикой Chrome только 6 параллельных TCP-соединений, означает, что многие изображения ждут 10 секунд для загрузки.
Очевидно, что проблема в сервере, которому требуется много времени для ответа на каждый запрос, но, к сожалению, это единственная часть, которую я не могу контролировать. Этот сервер не собирается меняться, и я не могу кэшировать технологические изменения.
Есть ли способ упаковать все изображения в одну загрузку, а затем распаковать в JS в браузере? Я знаю о методе dataurl, но я надеялся найти способ избежать раздувания base64.
Обновлено:
Обратите внимание, что изображения являются частью большого SVG на странице, поэтому будет ли решение со спрайтами работать в SVG?
Возможный дубликат Могу ли я объединить изображения в один файл для веб-страницы?
Используйте HTTP/2, чтобы конвейеризировать все это вместе…
@deceze, как указать использование HTTP/2 на веб-странице? Я не контролирую сервер, который его обслуживает
Тогда вам немного не повезло. Конечно, сервер должен поддерживать это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать Таблицы спрайтов CSS.
Живой пример: bkmks.com использует этот трюк, чтобы ускорить загрузку фавиконов лотов с помощью лист спрайтов вот такой.
Обновить: Рабочий процесс и синтаксис немного отличаются, но также возможны SVG-спрайты:
Поскольку у вас есть растровые изображения внутри SVG, вам, возможно, придется проделать трюк со спрайтами внутри в SVG. Синтаксис SVG image, кажется, поддерживает это.
Если настоящие изображения — это просто чистые растровые изображения (SVG — это просто «контейнер»), я бы попытался удалить слой SVG. Это потребует замены всех ссылок в HTML на SVG ссылками на таблицу спрайтов CSS.
Неожиданная проблема: изображения на самом деле находятся в большом SVG, который является частью HTML страницы. Из быстрого теста кажется, что элемент svg не отвечает на свойство фона CSS. Есть идеи?
@shoosh: обновлен ответ на учетную запись для изображений SVG.
Извините, я до сих пор не могу понять. У меня есть растровые изображения внутри SVG, которые также имеют другие векторные изображения. Я хочу, чтобы все растровые изображения были в одном изображении спрайтов. Я могу использовать x = "" и y = "" для указания смещения в большом изображении, но большое изображение по-прежнему масштабируется в соответствии с шириной маленького изображения = "" и высотой = ""
Ах, мне не хватило saveAspectRatio = "xMinYMin slice"
Спрайты: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/…