É a incorporação de dados de imagem de fundo em CSS como Base64 boa ou má prática?

StackOverflow https://stackoverflow.com/questions/1124149

Pergunta

Eu estava olhando para a fonte de uma userscript greasemonkey e notei o seguinte em seu css: 

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

Eu compreendo que um script greasemonkey gostaria de agregar qualquer coisa que puder dentro da fonte ao invés de hospedá-lo em um servidor, isso é o suficiente óbvio. Mas desde que eu não tinha visto esta técnica antes, eu considerava seu uso e parece atraente para um número de razões:

  1. Ele irá reduzir a quantidade de solicitações HTTP no carregamento da página, melhorando assim o desempenho
  2. Se nenhum CDN, então ele vai reduzir a quantidade de tráfego gerado através de cookies de serem enviados ao lado de imagens
  3. arquivos CSS pode ser armazenado em cache
  4. arquivos CSS pode ser gzipped

Considerando que o IE6 (por exemplo) tem problemas com cache para imagens de fundo, isso parece que não é a pior idéia ...

Assim, esta é uma boa ou má prática, por que você não usá-lo e quais ferramentas você usaria para base64 codificar as imagens?

Update - resultados dos testes

Nice, mas será um pouco menos útil para imagens menores, eu acho.

UPDATE: Bryan McQuade, um engenheiro de software do Google, trabalhando em PageSpeed, expresso em ChromeDevSummit 2013 que os dados: uris em CSS é considerado um render de bloqueio de anti-padrão para a entrega de CSS crítico / mínimo durante o seu #perfmatters: Instant mobile web apps conversa. Consulte http://developer.chrome.com/devsummit/sessions e manter isso em mente - < a href = "https://docs.google.com/presentation/d/1z49qp03iXAJIkbXaMtCmWW_Pnnq-MzXGW139Xw8-paM/edit#slide=id.g174590d5d_0194" rel = "noreferrer"> slides real

Foi útil?

Solução

Não é uma boa ideia quando você quer suas imagens e informações de estilo para ser armazenada em cache separadamente. Além disso, se você codificar uma imagem grande ou um número significativo de imagens no seu arquivo css que levará o navegador mais tempo para baixar o arquivo deixando seu site, sem qualquer informação estilo até que os concluída download. Para as pequenas imagens que você não tem a intenção de mudar frequentemente se nunca é uma solução bem.

, tanto quanto gerando a codificação de base 64:

Outras dicas

Esta resposta é desatualizado e não deve ser utilizado.

1) latência média é muito mais rápido no celular em 2017. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2) HTTP2 multiplexes https://http2.github.io/faq/#why-is- HTTP2 multiplexado

"URIs de dados" deve definitivamente ser considerado para sites móveis. HTTP acesso através de redes celulares vem com maior latência por pedido / resposta. Portanto, há alguns casos de uso onde tocando suas imagens como dados em CSS ou modelos HTML pode ser benéfico em aplicativos web móveis. Você deve medir o uso em uma base caso a caso -. Eu não estou defendendo que os URIs de dados deve ser utilizado em todos os lugares em um aplicativo de web móvel

Note que os navegadores móveis têm limitações de tamanho total dos arquivos que podem ser armazenados em cache. Limites para iOS 3.2 era muito baixa (25K por arquivo), mas estão ficando maiores (100K) para as versões mais recentes do Mobile Safari. Então não se esqueça de manter um olho em seu tamanho total do arquivo quando incluindo URIs de dados.

http: //www.yuiblog. com / blog / 2010/06/28 / móvel-browser-cache-limites /

Se você faz referência a imagem apenas uma vez, eu não vejo um problema para incorporá-lo em seu arquivo CSS. Mas uma vez que você usar mais de uma imagem ou necessidade de fazer referência a ela várias vezes no seu CSS, você pode considerar o uso de um único mapa de imagem em vez disso você pode então cortar suas imagens individuais a partir de (veja CSS Sprites ).

Uma das coisas que eu gostaria de sugerir é ter duas folhas de estilo separadas: Um com suas definições de estilo regulares e outra que contém suas imagens na codificação base64.

Você tem que incluir a folha de estilo base antes de a folha de estilo imagem é claro.

Desta forma, você vai garantir que você está de estilo regular é baixado e aplicado o mais rápido possível com o documento, mas, ao mesmo tempo que você lucrar com http-solicitações reduzidas e outros benefícios dados-uris lhe dar.

Base64 acrescenta cerca de 10% do tamanho da imagem após gzipped mas que supera os benefícios quando se trata de móvel. Desde que há uma tendência geral com web design responsivo, é altamente recomendável.

W3C também recomenda esta abordagem para celular e se você usar o oleoduto ativo em trilhos, esta é uma característica padrão quando comprimindo seu css

http://www.w3.org/TR/mwabp / # BP-conserva-css-imagens

Não concordo com a recomendação para criar arquivos CSS separados para imagens não-editoriais.

Assumindo que as imagens são para fins de interface do usuário, é apresentação camada de styling, e como mencionado acima, se você está fazendo UI móvel é a sua definitivamente uma boa idéia para manter todos os estilos em um único arquivo para que ele possa ser armazenado em cache uma vez.

No meu caso, me permite aplicar uma folha de estilo CSS sem se preocupar com a cópia das imagens associadas, uma vez que já está incorporado dentro.

Eu tentei criar um conceito de linha de CSS / HTML analisador ferramenta:

http://www.motobit.com/util/ base64 / css-images-to-base64.asp

É possível:

  • Faça o download e analisar arquivos HTML / CSS, extrato href / src / url elementos
  • Detecção de compressão (gzip) e os dados de tamanho da URL
  • Compare tamanho original dos dados, o tamanho dos dados base64 e tamanho dos dados base64 gzipped
  • Converta a URL (imagem, fonte, css, ...) a um esquema de URI dados base64.
  • Contagem número de solicitações que podem ser poupadas por Data URIs

Comentários / sugestões são bem vindas.

Antonin

Você pode codificá-lo em PHP:) 

<img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>">

Or display in our dynamic CSS.php file:

background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>");

1 That’s sort of a “quick-n-dirty” technique but it works. Here is another encoding method using fopen() instead of file_get_contents():

<?php // convert image to dataURL
$img_source = "feed-icon.gif"; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);
?>

Fonte

Trazendo um pouco para os usuários de Sublime Text 2, existe um plugin que dá o código base64 que carregar as imagens no ST.

Chamado Image2base64: https://github.com/tm-minty/sublime -text-2-image2base64

PS:. Nunca salvar este arquivo gerado pelo plug-in porque iria substituir o arquivo e destruiria

Obrigado pela informação aqui. Eu estou achando essa incorporação útil e particularmente para celular, especialmente com o arquivo css das imagens incorporadas a ser armazenado em cache.

Para ajudar a tornar a vida mais fácil, como meu editor (s) arquivo não nativamente lidar com isso, eu fiz um par de scripts simples para laptop / desktop edição trabalho, compartilhar aqui no caso de serem alguma utilidade para qualquer outra pessoa. Eu ter ficado com php como está a lidar com estas coisas directamente e muito bem.

No Windows 8.1 digamos --- 

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo

... não como um administrador pode estabelecer um atalho para um arquivo de lote em seu caminho. Esse arquivo batch irá chamar um script php (CLI).

Você pode, em seguida, clique direito uma imagem no explorador de arquivos, e SendTo o batchfile.

pedido Ok Admiinstartor, e espera para as janelas de shell de comando preto para fechar.

Em seguida, basta simplesmente colar o resultado da área de transferência em seu em seu editor de texto ... 

<img src="|">

ou 

 `background-image : url("|")`

A seguir deve ser adaptável para outros sistemas operacionais.

arquivo de lote ... 

rem @echo 0ff
rem Puts 64 encoded version of a file on clipboard
php c:\utils\php\make64Encode.php %1

E com php.exe em seu caminho, que chama um php (CLI) script ... 

<?php 

function putClipboard($text){
 // Windows 8.1 workaround ...

  file_put_contents("output.txt", $text);

  exec("  clip < output.txt");

}


// somewhat based on http://perishablepress.com/php-encode-decode-data-urls/
// convert image to dataURL

$img_source = $argv[1]; // image path/name
$img_binary = fread(fopen($img_source, "r"), filesize($img_source));
$img_string = base64_encode($img_binary);

$finfo = finfo_open(FILEINFO_MIME_TYPE); 
$dataType = finfo_file($finfo, $img_source); 


$build = "data:" . $dataType . ";base64," . $img_string; 

putClipboard(trim($build));

?>

Tanto quanto eu pesquisei,

Use: 1. Quando você estiver usando um sprite de SVG. 2. Quando suas imagens são de um tamanho menor (máximo de 200mb).

Não use: 1. Quando estiver imagens maiores. 2. Ícones como SVG de. Como eles já estão bem e compactado após a compressão.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top