Não entendi porquê é mais eficiente eu importar com CSS um Sprite em vários lugares diferentes do que importar uma imagem diferente em lugares diferentes?
Não entendi porquê é mais eficiente eu importar com CSS um Sprite em vários lugares diferentes do que importar uma imagem diferente em lugares diferentes?
Quando você usa uma imagem sprite o navegador carrega essa imagem uma unica vez, que por sua vez é a penas uma requisição que o navegador tem que fazer ao backend independente de quantos lugares você exibe essa imagem (o que muda é a penas a parte que você está exibindo da imagem).
Agora quando você usa varias imagem, o navegador vai ter que fazer uma requisição ao backend para cada imagem.
por exemplo hipotético: uma imagem sprite de 2Mb ou 4 imagens de 512Kb e o navegador leva 1 segundos para baixar 1Mb e mais 0,5 segundos para realizar a requisição;
tempo total de carregamento da imagem sprite => 0,5 + 2 = 2,5 segundos;
tempo total de carregamento das imagens individuais => (0,5x4) + (1x2) => 2+2 = 4 segundos;
isso sem falar no custo de processamento e renderização.
Entendo, muito obrigado,