Dovrei incorporare le immagini come data / base64 in CSS o HTML

Per ridurre il numero di richieste sul server ho incorporato alcune immagini (PNG e SVG) come BASE64 direttamente nel CSS. (È automatizzato nel processo di compilazione)

come questo:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

È una buona pratica? Ci sono alcuni motivi per evitarlo? Esistono alcuni browser principali che non supportano l'URL dei dati?

Domanda bonus: ha senso farlo anche per CSS e JS?

È una buona pratica? Ci sono alcuni motivi per evitarlo?

Di solito è una buona pratica solo per immagini CSS molto piccole che verranno utilizzate insieme (come gli sprite CSS) quando la compatibilità con IE non ha importanza e il salvataggio della richiesta è più importante della cache.

Ha un certo numero di aspetti negativi notevoli:

• Non funziona affatto in IE6 e 7.

• Funziona con risorse di dimensioni fino a 32k in IE8 . Questo è il limite che si applica dopo la codifica base64. In altre parole, non più di 32768 caratteri.

• Salva una richiesta, ma gonfia invece la pagina HTML! E rende le immagini impraticabili. Vengono caricati ogni volta che viene caricata la pagina contenente o il foglio di stile.

• La codifica Base64 blocca le dimensioni dell'immagine del 33%.

• Se servite in una risorsa gzip, le data:immagini saranno quasi sicuramente una terribile tensione per le risorse del server! Le immagini sono tradizionalmente molto impegnative per la compressione della CPU, con una riduzione molto ridotta delle dimensioni.

Le risposte comuni qui sembrano suggerire che ciò non è necessario, per una serie di motivi legittimi. Tuttavia, tutti questi sembrano trascurare il comportamento delle app moderne e il processo di creazione.

Non è impossibile (e in realtà abbastanza facile) progettare un semplice processo che attraversi le immagini di una cartella e generi un singolo CSS con tutte le immagini di questa cartella.

Questo CSS verrà completamente memorizzato nella cache e ridurrà drasticamente i round trip sul server, il che è suggerito correttamente da @MemeDeveloper uno dei maggiori successi nelle prestazioni.

Certo, è hack. nessun dubbio. come gli sprite sono un hack. Nel mondo perfetto questo non sarà necessario, fino ad allora, è una pratica possibile se ciò che devi correggere è:

1. Pagina con più immagini che non sono facilmente "sfruttabili".
2. Il viaggio di andata e ritorno ai server è un vero collo di bottiglia (pensa mobile).
3. la velocità (al livello di millisecondi) è davvero così importante per il tuo caso d'uso.
4. Non ti interessa (come dovresti, se vuoi che il web vada avanti) su IE5 e IE6.

la mia opinione.

Non è una buona pratica. Alcuni browser non supportano URI di dati (ad esempio IE 6 e 7) o il supporto è limitato (ad esempio 32 KB per IE8).

Vedi anche questo articolo di Wikipedia per i dettagli completi sugli svantaggi dell'URI dei dati:

• Schema URI dati

svantaggi

• Gli URI dei dati non vengono memorizzati nella cache separatamente dai loro documenti contenenti (ad esempio file CSS o HTML), quindi i dati vengono scaricati ogni volta che i documenti contenenti vengono scaricati di nuovo.
• Il contenuto deve essere ricodificato e reinserito ogni volta che viene apportata una modifica.
• Internet Explorer fino alla versione 7 (circa il 15% del mercato a gennaio 2011) non ha supporto.
• Internet Explorer 8 limita gli URI dei dati a una lunghezza massima di 32 KB.
• I dati sono inclusi come un semplice flusso e molti ambienti di elaborazione (come i browser Web) potrebbero non supportare l'utilizzo di contenitori (come multipart/alternativeo message/rfc822) per fornire una maggiore complessità come metadati, compressione dei dati o negoziazione dei contenuti.
• Gli URI di dati con codifica Base64 hanno dimensioni maggiori di 1/3 rispetto al loro equivalente binario. (Tuttavia, questo sovraccarico viene ridotto al 2-3% se il server HTTP comprime la risposta utilizzando gzip)
• Gli URI dei dati rendono più difficile il filtraggio del contenuto da parte del software di sicurezza.

Stavo usando i dati-uri per circa un mese e ho appena smesso di usarli perché hanno reso i miei fogli di stile assolutamente enormi.

I dati-uri funzionano in IE6 / 7 (devi solo fornire un file mhtml a quei browser).

L'unico vantaggio che ho ottenuto dall'utilizzo di data-uri è stato il rendering delle mie immagini di sfondo non appena il foglio di stile veniva scaricato, al contrario del caricamento graduale che vediamo diversamente

È bello avere questa tecnica disponibile, ma non la userò troppo in futuro. Consiglio vivamente di provarlo, solo per sapere da te

Sarei più propenso a usare CSS Sprites per combinare le immagini e risparmiare sulle richieste. Non ho mai provato la tecnica base64 ma a quanto pare non funziona in IE6 e IE7. Significa anche che se le immagini cambiano, devi riconsegnare il tutto perso, a meno che tu non abbia più file CSS, ovviamente.

Non ho idea delle migliori pratiche generali, ma per me non vorrei vedere quel genere di cose se potessi evitarlo. :)

I browser Web e i server hanno un intero carico di elementi di memorizzazione nella cache integrati, quindi avrei pensato che la soluzione migliore fosse quella di convincere il tuo server a dire al client di memorizzare nella cache i file di immagine. A meno che tu non abbia un sacco di immagini molto piccole su una pagina, non avrei pensato che il sovraccarico di richieste multiple fosse un grosso problema. I browser generalmente usano la stessa connessione per richiedere molti file, quindi non sono state stabilite nuove connessioni di rete, quindi a meno che il volume del traffico attraverso le intestazioni HTTP sia significativo rispetto alla dimensione dei file di immagine, non mi preoccuperei troppo di più richieste .

Ci sono ragioni per cui pensi che al momento ci siano troppe richieste al server?

Lo suggerirei per immagini minuscole utilizzate molto spesso, ad esempio icone comuni di un'applicazione Web.

• Piccolo, perché la codifica Base64 aumenta le dimensioni
• Spesso utilizzato, perché ciò giustifica il tempo di caricamento iniziale più lungo

Naturalmente, è necessario tenere presente i problemi di supporto con i browser più vecchi. Inoltre, potrebbe essere una buona idea utilizzare la capacità di un framework per incorporare automaticamente le immagini che un dato richiede come ClientBundle di GWT o almeno utilizzare le classi CSS invece di aggiungerlo direttamente allo stile dell'elemento.

Maggiori informazioni sono raccolte qui: http://davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/