Incorporare i dati delle immagini di sfondo nei CSS come Base64 è una buona o cattiva pratica?

Stavo guardando la fonte di un utente di greasemonkey e ho notato quanto segue nei loro css:

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

Posso apprezzare che uno script greasemonkey vorrebbe raggruppare tutto ciò che può all'interno del sorgente anziché ospitarlo su un server, è abbastanza ovvio. Ma dal momento che non avevo mai visto questa tecnica in precedenza, ho considerato il suo utilizzo e sembra attraente per una serie di motivi:

1. Ridurrà la quantità di richieste HTTP al caricamento della pagina, migliorando così le prestazioni
2. Se nessun CDN, ridurrà la quantità di traffico generato attraverso i cookie inviati insieme alle immagini
3. I file CSS possono essere memorizzati nella cache
4. I file CSS possono essere GZIPPED

Considerando che IE6 (ad esempio) ha problemi con la cache per le immagini di sfondo, sembra che non sia la peggiore idea ...

Quindi, è una pratica buona o cattiva, perché non lo usi e quali strumenti useresti per codificare base64 le immagini?

aggiornamento - risultati dei test

• test con immagine: http://fragged.org/dev/map-shot.jpg - 133.6Kb

• URL di prova: http://fragged.org/dev/base64.html

• file CSS dedicato: http://fragged.org/dev/base64.css - 178.1Kb

• Codifica GZIP lato server

• dimensione risultante inviata al client (test dei componenti YSLOW): 59.3Kb

• Salvataggio dei dati inviati al browser client di: 74.3Kb

Bello, ma sarà leggermente meno utile per immagini più piccole, immagino.

AGGIORNAMENTO: Bryan McQuade, un ingegnere informatico di Google, che lavora su PageSpeed, ha espresso a ChromeDevSummit 2013 che i dati: l'uris nei CSS è considerato un anti-pattern di blocco del rendering per fornire CSS critici / minimi durante il suo discorso #perfmatters: Instant mobile web apps. Vedi http://developer.chrome.com/devsummit/sessions e tienilo a mente - slide reale

Non è una buona idea quando si desidera che le immagini e le informazioni di stile vengano memorizzate nella cache separatamente. Inoltre, se codifichi un'immagine di grandi dimensioni o un numero significativo di immagini nel tuo file css, il download del file in uscita dal tuo sito senza le informazioni sullo stile richiederà più tempo dal browser, fino al completamento del download. Per piccole immagini che non intendi cambiare spesso, se mai è una buona soluzione.

per quanto riguarda la generazione della codifica base64:

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (upload)
• http://www.greywyvern.com/code/php/binary2base64 (dal link con piccoli tutorial sotto)

Questa risposta non è aggiornata e non deve essere utilizzata.

1) La latenza media è molto più veloce sui dispositivi mobili nel 2017. https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

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

Gli "URI dei dati" dovrebbero essere sicuramente considerati per i siti mobili. L'accesso HTTP su reti cellulari ha una latenza maggiore per richiesta / risposta. Quindi ci sono alcuni casi d'uso in cui l'inceppamento delle immagini come dati in modelli CSS o HTML potrebbe essere utile su app Web mobili. Dovresti misurare l'utilizzo caso per caso - non sto sostenendo che gli URI dei dati debbano essere usati ovunque in un'app Web mobile.

Si noti che i browser per dispositivi mobili hanno limitazioni sulla dimensione totale dei file che possono essere memorizzati nella cache. I limiti per iOS 3.2 erano piuttosto bassi (25 KB per file), ma stanno aumentando (100 KB) per le versioni più recenti di Mobile Safari. Quindi assicurati di tenere d'occhio la dimensione totale del file quando includi gli URI dei dati.

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

Se fai riferimento a quell'immagine solo una volta, non vedo alcun problema a incorporarla nel tuo file CSS. Ma una volta che usi più di un'immagine o devi fare riferimento più volte nel tuo CSS, potresti prendere in considerazione l'uso di una singola mappa di immagini, invece puoi ritagliare le tue singole immagini da (vedi CSS Sprites ).

Una delle cose che suggerirei è di avere due fogli di stile separati: uno con le tue definizioni di stile regolari e un altro che contiene le tue immagini nella codifica base64.

Ovviamente devi includere il foglio di stile di base prima del foglio di stile dell'immagine.

In questo modo ti assicurerai che il tuo normale foglio di stile viene scaricato e applicato il più presto possibile al documento, ma allo stesso tempo approfitti delle ridotte richieste HTTP e di altri vantaggi offerti dall'uris dei dati.

Base64 aggiunge circa il 10% alla dimensione dell'immagine dopo GZipping, ma questo supera i vantaggi quando si tratta di dispositivi mobili. Dal momento che c'è una tendenza generale con il web design reattivo, è altamente raccomandato.

W3C raccomanda anche questo approccio per dispositivi mobili e se si utilizza la pipeline di risorse in rotaie, questa è una funzionalità predefinita durante la compressione del CSS

http://www.w3.org/TR/mwabp/#bp-conserve-css-images

Non sono d'accordo con la raccomandazione di creare file CSS separati per immagini non editoriali.

Supponendo che le immagini siano per scopi di interfaccia utente, è lo stile del livello di presentazione e, come detto sopra, se stai eseguendo l'interfaccia utente per dispositivi mobili è sicuramente una buona idea mantenere tutto lo stile in un singolo file in modo che possa essere memorizzato nella cache una volta.

Nel mio caso mi consente di applicare un foglio di stile CSS senza preoccuparmi di copiare le immagini associate, poiché sono già incorporate all'interno.

Ho provato a creare un concetto online di strumento di analisi CSS / HTML:

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

Può:

• Scarica e analizza i file HTML / CSS, estrae gli elementi href / src / url
• Rileva i dati di compressione (gzip) e dimensioni sull'URL
• Confronta le dimensioni dei dati originali, le dimensioni dei dati base64 e le dimensioni dei dati base64 compressi con gzip
• Convertire l'URL (immagine, font, css, ...) in uno schema URI di dati base64.
• Contare il numero di richieste che possono essere risparmiate dagli URI dei dati

Commenti / suggerimenti sono benvenuti.

Antonin

Puoi codificarlo in 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

Portando un po 'per gli utenti di Sublime Text 2, c'è un plugin che fornisce il codice base64 che cariciamo le immagini nella ST.

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

PS: non salvare mai questo file generato dal plug-in perché sovrascriverebbe il file e lo distruggerebbe.

Grazie per le informazioni qui. Sto trovando questo incorporamento utile e in particolare per i dispositivi mobili, specialmente con il file css delle immagini incorporate che viene memorizzato nella cache.

Per rendere la vita più semplice, poiché i miei editor di file non gestiscono nativamente questo, ho creato un paio di semplici script per il lavoro di modifica di laptop / desktop, condividili qui nel caso in cui siano utili a qualcun altro. Mi sono bloccato con php in quanto gestisce queste cose direttamente e molto bene.

Sotto Windows 8.1 dire ---

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

... lì come amministratore puoi stabilire un collegamento a un file batch nel tuo percorso. Quel file batch chiamerà uno script php (cli).

È quindi possibile fare clic con il pulsante destro del mouse su un'immagine in Esplora file e inviare al file batch.

Ok Richiedi una richiesta di avvio e attendi la chiusura delle finestre della shell dei comandi nere.

Quindi semplicemente incolla il risultato dagli appunti nel tuo editor di testo ...

<img src="|">

o

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

Di seguito dovrebbe essere adattabile per altri sistemi operativi.

File batch ...

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

E con php.exe nel tuo percorso, che chiama uno script php (cli) ...

<?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));

?>

Per quanto ho studiato,

Usa: 1. Quando stai usando uno svrite sprite. 2. Quando le immagini sono di dimensioni inferiori (max 200 mb).

Non usare: 1. Quando si hanno immagini più grandi. 2. Icone come svg. Dato che sono già buoni e compressi dopo la compressione.