Каковы недостатки использования URI данных вместо спрайтов?

Рассмотрим эти условия для моего веб-сайта:

  • Я не поддерживаю IE8 и ниже, поэтому поддержка браузера не является проблемой.

  • Я также использую gzip, чтобы избежать перегрузки данных в CSS в случаях, когда я копировать и вставлять данные URI в мой CSS файл.

  • У меня есть только один файл CSS, созданный LESS.

  • Чтобы упростить задачу, я использую LESS-переменную для каждого URI-данных изображения.

  • Я помещал переменные изображений в отдельный файл LESS, чтобы очистить мою кодовую базу

Со всем этим я до сих пор не уверен, подходит ли он для загрузки изображений. Загрузка небольших изображений с помощью этого подхода уменьшает количество HTTP-запросов, а также нам не нужно сохранять спрайт-образ.

Есть ли недостаток в этом подходе, о котором вы можете думать?

Ответы

Ответ 1

Если какое-либо изображение изменяется, весь файл css должен измениться. Это разрушает HTTP-кеш. С изображением спрайта сам файл css будет обслуживаться из кеша, и только измененное изображение нужно будет снова загрузить.

Возможно, лучше создать файл css только для данных: URI-изображения, а другой для обычного материала CSS. Таким образом, регулярные обновления css не требуют повторной загрузки данных: изображения uri.

Вторая проблема связана с изображениями переднего плана, те, которые подаются с тегом <img> в html. Если это часто используемый образ, он будет излишне увеличивать размер html.