Каков наилучший способ быстрее загрузить изображение: в формате.png/.jpg или в схеме URI данных?
Есть ли загрузка изображения в формате URI данных, чтобы оно быстрее загружалось на странице? Например:background: url("data:image/jpg;base64,/someImageData")
Или он загружается быстрее в обычном формате.jpg или.png? Например: background: url("wallpaper.jpg")
2 ответа
Время, необходимое для визуализации изображения, будет одинаковым, но время, необходимое для загрузки, может быть другим. Кодировка Base64 изображения делает его примерно на 37% больше, чем если бы вы ссылались на него через url():
Приблизительно, конечный размер двоичных данных в кодировке Base64 равен 1,37 от исходного размера данных.
Однако, хотя изображение больше и требует больше байтов для загрузки, вы экономите время для разговора с вашим сервером, чтобы получить изображение с помощью метода url (). Невозможно точно сказать, какая из них загружается быстрее - это будет зависеть от подключения ваших пользователей. См. Эту статью, когда рекомендуется использовать изображения в кодировке base64.
Размер данных на 37% больше, но есть кое-что более важное:
На мобильных устройствах данные URI в 6 раз медленнее, чем ссылки на источники (новое исследование)
Так что будьте осторожны с этим. И, как указано на caniuse.com, IE <9 имеет значительный общий объем данных.