Base64
Image Data URL
⚠️ Large image may freez the browser
Codifica PNG in Base64 per CSS
Converti le immagini PNG in formati Base64 o DataURL. Incorpora direttamente in CSS o JavaScript senza file esterni. I file di dimensioni maggiori possono influire sulle prestazioni; si raccomandano dimensioni inferiori. La codifica Base64 semplifica l'integrazione con gli asset web, riducendo la dipendenza da risorse esterne. Il formato DataURL semplifica la struttura del codice per la consegna di contenuti dinamici.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Converti immagini in codice Base64
1
Carica immagine PNG
Carica la tua immagine PNG cliccando o trascinandola nell'area di caricamento.
2
Scegli il formato di codifica
Seleziona sia la scheda 'Base64' che quella 'DataURL' per scegliere il formato di codifica desiderato.
3
Visualizza Dati Base64
La rappresentazione Base64 o DataURL della tua immagine apparirà nell'area di testo sotto le schede.
4
Copia Testo Codificato
Clicca il pulsante 'Copia' per copiare il testo codificato nel tuo clipboard per l'uso nel tuo CSS o JavaScript.
Inserisci direttamente le immagini PNG nel tuo CSS
Includere un'immagine piccola direttamente nel CSS senza gestire file separati può essere ottenuto convertendo PNG in formati Base64 o DataURL. Lo strumento encode-png-to-base64-for-css semplifica il tuo flusso di lavoro di sviluppo web e riduce le richieste HTTP. Questo si traduce in codice più pulito, più efficiente e tempi di caricamento delle pagine più rapidi.
Riduci la dimensione dei file e le richieste HTTP
Questo strumento riduce il numero di file necessari per il caricamento del tuo sito web convertendo le immagini PNG in formati Base64 o DataURL. Includere immagini direttamente nel tuo CSS o JavaScript riduce le richieste HTTP, il che può migliorare la velocità di caricamento della pagina. Questo approccio ottimizza le prestazioni del sito web minimizzando le dipendenze da file esterni.
Domande Frequenti
Cos'è un DataURL basato su Base64 e perché dovrei usarlo?
Un DataURL basato su Base64 è un modo per rappresentare un'immagine come una stringa di caratteri. Permette di incorporare direttamente immagini nel codice CSS o JavaScript, evitando la necessità di caricarle da file esterni. Questo può essere utile per piccoli icone o immagini.
Come posso usare la Base64 o DataURL generata?
Semplicemente copiare il codice fornito dopo aver convertito la tua immagine e incollarlo nel tuo CSS o JavaScript. Ad esempio, nel CSS, potresti usarlo così: background-image: url('data:image/png;base64,...');
Quali formati di immagine questo strumento supporta?
Questo strumento è specificamente progettato per immagini PNG. Altri formati potrebbero non convertire correttamente.
Perché le immagini grandi non sono raccomandate?
Immagini grandi creano stringhe Base64 molto lunghe, il che può rallentare il computer e aumentare i tempi di caricamento della pagina. È meglio utilizzare questo strumento per immagini più piccole.
C'è un limite alle dimensioni dell'immagine che posso caricare?
Mentre non c'è un limite rigoroso alle dimensioni dei file, le prestazioni peggioreranno con immagini più grandi. Si raccomanda di utilizzare file PNG più piccoli per ottenere i migliori risultati.