Para reduzir o número de solicitações no servidor, incorporei algumas imagens (PNG e SVG) como BASE64 diretamente no css. (É automatizado no processo de compilação)
como isso:
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);Esta é uma boa prática? Existem algumas razões para evitar isso? Existe algum navegador importante que não possui suporte a URL de dados?
Pergunta bônus: faz sentido fazer isso também para CSS e JS?
Respostas:
É uma boa prática geralmente apenas para imagens CSS muito pequenas que serão usadas juntas (como sprites CSS) quando a compatibilidade com o IE não importa, e salvar a solicitação é mais importante do que o armazenamento em cache.
Tem várias desvantagens notáveis:
Não funciona no IE6 e 7.
Funciona apenas para recursos de até 32k no IE8 . Este é o limite que se aplica após a codificação base64. Em outras palavras, não mais que 32768 caracteres.
Ele salva uma solicitação, mas incha a página HTML! E torna as imagens inalcançáveis. Eles são carregados toda vez que a página ou folha de estilos que contém é carregada.
A codificação Base64 aumenta o tamanho da imagem em 33%.
Se veiculadas em um recurso compactado com gzip, as
data:imagens quase certamente serão uma pressão terrível sobre os recursos do servidor! As imagens tradicionalmente exigem muito CPU para compactar, com muito pouca redução no tamanho.fonte
As respostas comuns aqui parecem sugerir que isso não é necessário, por um conjunto de razões legítimas. No entanto, tudo isso parece negligenciar o comportamento dos aplicativos modernos e o processo de criação.
Não é impossível (e realmente muito fácil) projetar um processo simples que percorra as imagens de uma pasta e gere um único CSS com todas as imagens desta pasta.
Esse css será totalmente armazenado em cache e reduzirá drasticamente as viagens de ida e volta ao servidor, o que é sugerido corretamente pelo @MemeDeveloper, um dos maiores hits de desempenho.
Claro, é hack. sem dúvida. O mesmo que sprites é um hack. No mundo perfeito, isso não será necessário; até então, é uma prática possível se o que você precisa corrigir é:
minha visão.
fonte
Não é uma boa prática. Alguns navegadores não suportam URIs de dados (por exemplo, IE 6 e 7) ou o suporte é limitado (por exemplo, 32 KB para o IE8).
Consulte também este artigo da Wikipedia para obter detalhes completos sobre as desvantagens do URI de dados:
fonte
Eu estava usando dados-uri por cerca de um mês, e acabei de parar de usá-los porque eles fizeram minhas folhas de estilo absolutamente enormes.
Os uri de dados funcionam no IE6 / 7 (você só precisa fornecer um arquivo mhtml para esses navegadores).
O único benefício que obtive com o uso de data-uri's foi que minhas imagens de plano de fundo renderizadas assim que a folha de estilo foi baixada, em oposição ao carregamento gradual que vemos de outra forma
É bom termos essa técnica disponível, mas não a utilizarei muito no futuro. Eu recomendo experimentá-lo, só para você saber por si mesmo
fonte
Eu preferia usar CSS Sprites para combinar as imagens e economizar em solicitações. Eu nunca tentei a técnica base64, mas aparentemente não funciona no IE6 e IE7. Também significa que, se alguma imagem for alterada, é necessário reenviar a totalidade perdida, a menos que você tenha vários arquivos CSS, é claro.
fonte
Eu não tenho idéia sobre as melhores práticas gerais, mas eu não gostaria de ver esse tipo de coisa se eu pudesse ajudá-lo. :)
Os navegadores e servidores da Web têm uma grande quantidade de coisas de cache incorporadas, então eu pensaria que sua melhor aposta era apenas pedir ao seu servidor que dissesse ao cliente para armazenar em cache os arquivos de imagem. A menos que você esteja tendo imagens muito pequenas em uma página, eu não pensaria que a sobrecarga de várias solicitações fosse tão importante. Os navegadores geralmente usam a mesma conexão para solicitar muitos arquivos, portanto não há novas conexões de rede sendo estabelecidas, a menos que o volume de tráfego através de cabeçalhos HTTP seja significativo em comparação com o tamanho dos arquivos de imagem, não me preocuparia muito com várias solicitações .
Existem razões pelas quais você acha que existem muitas solicitações no servidor no momento?
fonte
Eu o sugeriria para pequenas imagens usadas com muita frequência, por exemplo, ícones comuns de um aplicativo da web.
É claro que problemas de suporte com navegadores mais antigos devem ser lembrados. Além disso, pode ser uma boa ideia usar a capacidade de uma estrutura para incorporar automaticamente as imagens que os dados contêm como o ClientBundle da GWT ou, pelo menos, usar classes CSS em vez de adicioná-las diretamente ao estilo do elemento.
Mais informações estão aqui: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/
fonte