Devo incorporar imagens como data / base64 em CSS ou HTML

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?

Esta é uma boa prática? Existem algumas razões para evitar isso?

É 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.

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 é:

1. Página com várias imagens que não são facilmente "acessíveis".
2. A viagem de ida e volta aos servidores é um gargalo real (pense em dispositivos móveis).
3. a velocidade (no nível de milissegundos) é realmente importante para o seu caso de uso.
4. Você não se importa (como deveria, se quiser que a Web avance) com o IE5 e o IE6.

minha visão.

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:

• Esquema de URI de dados

Desvantagens

• Os URIs de dados não são armazenados em cache separadamente dos documentos que os contêm (por exemplo, arquivos CSS ou HTML); portanto, os dados são baixados toda vez que os documentos contidos são baixados novamente.
• O conteúdo deve ser recodificado e incorporado sempre que uma alteração for feita.
• O Internet Explorer até a versão 7 (aproximadamente 15% do mercado em janeiro de 2011) não possui suporte.
• O Internet Explorer 8 limita os URIs de dados a um comprimento máximo de 32 KB.
• Os dados são incluídos como um fluxo simples e muitos ambientes de processamento (como navegadores da web) podem não suportar o uso de contêineres (como multipart/alternativeou message/rfc822) para fornecer maior complexidade, como metadados, compactação de dados ou negociação de conteúdo.
• Os URIs de dados codificados em Base64 têm um tamanho 1/3 maior do que seu equivalente binário. (No entanto, essa sobrecarga será reduzida para 2-3% se o servidor HTTP compactar a resposta usando gzip)
• Os URIs de dados tornam mais difícil para o software de segurança filtrar o conteúdo.

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

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.

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?

Eu o sugeriria para pequenas imagens usadas com muita frequência, por exemplo, ícones comuns de um aplicativo da web.

• Minúsculo, porque a codificação Base64 aumenta o tamanho
• Frequentemente usado, porque isso justifica o tempo de carregamento inicial mais longo

É 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/