Incorporando a Base64 Imagens

564

Por pura curiosidade, em quais navegadores a incorporação de imagem Base64 funciona? Estou me referindo a isso .

Sei que geralmente não é uma boa solução para a maioria das coisas, pois aumenta bastante o tamanho da página - só estou curioso.

Alguns exemplos:

HTML:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
html base64 browser S Pangborn
fonte
3
por que não configurar uma página com exemplos, todos nós vamos passar e fazer o teste real-vivo e informe-nos aqui
Nir Levy
4
64 bits ocupa apenas 6 caracteres 2 ^ 6. Uma sequência de texto terá no mínimo 8 bits por caractere, dependendo do tipo de codificação. Você perde pelo menos 25% de eficiência .... meu teste rápido mostrou cerca de 30% de perda.
4
Mais importante, você provavelmente perde a capacidade de armazenar suas coisas em cache de maneira eficaz.
Hut8
6
@BrianHaak "tremendamente" não diz nada. Eu pessoalmente usei imagens base64 várias vezes com o ReactJs nos últimos dois anos e não tive nenhum problema de renderização. Por favor, forneça algumas medidas.
Lukas Liesis
1
@LukasLiesé fiz medições no Google Chrome para fins comerciais, portanto, não há relatórios públicos aqui. Pode ser bom para renderizar imagens únicas, mas você deve considerar que o cache não funciona. No React.js, é muito crítico quando leva à conclusão da nova renderização de peças (em alterações na navegação, por exemplo).
Brian Haak 12/06

Respostas:

361

Atualização: 10-01-2017

Os URIs de dados agora são suportados por todos os principais navegadores. O IE também suporta imagens de incorporação desde a versão 8.

http://caniuse.com/#feat=datauri

Os URIs de dados agora são suportados pelos seguintes navegadores da web:

  • Baseado em lagartixas, como Firefox, SeaMonkey, XeroBank, Camino, Fennec e K-Meleon
  • Konqueror, via sistema de entrada / saída de escravos KIO do KDE
  • Opera (incluindo dispositivos como Nintendo DSi ou Wii)
  • Baseado no WebKit, como Safari (inclusive no iOS), navegador do Android, Epiphany e Midori (o WebKit é um derivado do mecanismo KHTML do Konqueror, mas o Mac OS X não compartilha a arquitetura KIO, portanto as implementações são diferentes) e o Webkit / Baseado em cromo, como o Chrome
  • Tridente
    • Internet Explorer 8: A Microsoft limitou seu suporte a determinados conteúdos "não navegáveis" por motivos de segurança, incluindo preocupações de que o JavaScript incorporado em um URI de dados possa não ser interpretável por filtros de script, como os usados ​​por clientes de email baseados na Web. Os URIs de dados devem ser menores que 32 KiB na versão 8 [3].
    • Os URIs de dados são suportados apenas pelos seguintes elementos e / ou atributos [4]:
      • objeto (apenas imagens)
      • img
      • tipo de entrada = imagem
      • ligação
    • Declarações CSS que aceitam uma URL, como imagem de plano de fundo, plano de fundo, tipo de estilo de lista, estilo de lista e similares.
    • Internet Explorer 9: O Internet Explorer 9 não tem limitação de 32KiB e é permitido em elementos mais amplos.
    • TheWorld Browser: um navegador de shell do IE que possui um suporte interno para o esquema de URI de dados

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

Philippe Gerber
fonte
Olá Philippe, existe alguma solução alternativa para o limite de tamanho de 32 KiB no IE8? Base64 é suportado no IE7 e IE6? Se não, alguma solução alternativa (sem limite de tamanho)? Se sim, algum limite de tamanho? Se sim, alguma solução alternativa?
SexyBeast
Olhe para isto, talvez ele iria ajudar: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Os padrões dizem alguma coisa? Certos upvote para uma boa resposta de atualização =).
Ciro Santilli respondeu
5
Limitação do IE8 - O que descobri foi que o IE8 tem um limite máximo de caracteres de imagem incorporada de 32.768 ( por Microsoft ) e minha imagem incorporada tinha pouco mais de 35.000. Portanto, quando a background-imagepropriedade CSS ( url(...embedded image) tentou carregar no IE8, porque o limite de caracteres foi excedido, todo classo conteúdo da propriedade não foi carregado. Não segui uma correção para isso, voltei imgpara as imagens incorporadas que excederam o máximo e minhas imagens foram carregadas adequadamente.
Id # da
53

Os navegadores de desktop mais modernos, como Chrome, Mozilla e Internet Explorer, suportam imagens codificadas como URL de dados. Mas há problemas para exibir URLs de dados em alguns navegadores móveis: o Android Stock Browser e o Dolphin Browser não exibem JPEGs incorporados .

Recomendo que você use as seguintes ferramentas para codificação / decodificação on-line base64:

Marque a opção "Formatar como URL de dados" para formatar como um URL de dados.

Brig Ader
fonte
3
Você não precisa de uma ferramenta online para codificar para base64. Em vez disso você pode usar a ferramenta de linha de comando base64 no Linux ou Mac OS X: echo "dados: image / jpeg; base64," $ (file.jpg gato | base64)
cstroe