Base64
Image Data URL
⚠️ Large image may freez the browser
Kjodde PNG til Base64 for CSS
Konverter PNG-bilder til Base64 eller DataURL-formater. Inkluder direkte i CSS eller JavaScript uten eksterne filer. Større filer kan påvirke ytelsen; mindre størrelser anbefales. Base64-koding forenkler integrasjonen med webressurser, og reduserer avhengigheten av eksterne ressurser. DataURL-format forenkler kodesjekket for dynamisk innholdsoverføring.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Konverter bilder til Base64-kode
1
Last opp PNG-bilde
Last opp din PNG-bilde ved å klikke eller dra det inn i lastområdet.
2
Velg Kodingformat
Velg enten 'Base64'- eller 'DataURL'-fanen for å velge ønsket krypteringsformat.
3
Se Base64 Data
Den Base64 eller DataURL-representasjonen av bildet ditt vil vises i tekstfeltet under rullene.
4
Kopier Kodet Tekst
Klikk på 'Kopier'-knappen for å kopiere den kodede teksten til utklippstavlen for bruk i CSS eller JavaScript.
Sett inn PNG-filer direkte i CSS-en din
Inkludere et lite bilde direkte i CSS uten å administrere separate filer kan oppnås ved å konvertere PNG-er til Base64 eller DataURL-formater. Verktøyet encode-png-to-base64-for-css forenkler arbeidsflyten i webutvikling og reduserer HTTP-forespørsler. Dette fører til renere, mer effektiv kode og raskere lastetider.
Reduser filstørrelse og HTTP-forespørsler
Dette verktøyet reduserer antall filer nettsiden din trenger å laste ved å konvertere PNG-bilder til Base64 eller DataURL-formater. Å innlemme bilder direkte i CSS eller JavaScript reduserer HTTP-forespørsler, som kan forbedre lastespeed. Denne tilnærmingen optimaliserer nettsideytelse ved å minimere eksterne filavhengigheter.
Ofte Stilte Spørsmål
Hva er en Base64 DataURL og hvorfor ville jeg bruke den?
En Base64 DataURL er en måte å representere et bilde som en streng av tegn. Det lar deg innlemme bilder direkte i CSS- eller JavaScript-koden din, uten behov for å laste dem fra eksterne filer. Dette kan være nyttig for små ikoner eller bilder.
Hvordan bruker jeg den genererte Base64 eller DataURLen?
Kopier bare koden som er gitt etter at du har konvertert bildet ditt, og lim den inn i CSS-en eller JavaScripten din. For eksempel, i CSS, kan du bruke den slik: background-image: url('data:image/png;base64,...');
Hvilke bildeformater støtter dette verktøyet?
Denne verktøyet er spesifikt designet for PNG-bilder. Andre formater kan konverteres feil.
Hvorfor anbefales det ikke store bilder?
Store bilder skaper veldig lange Base64-strenger, som kan tregne ned datamaskinen din og øke lastetidene til siden. Det er best å bruke dette verktøyet for mindre bilder.
Er det en grense for størrelsen på bildet jeg kan laste opp?
Selv om det ikke er noen streng filstørrelimitering, vil ytelsen reduseres med større bilder. Vi anbefaler å bruke mindre PNG-filer for best resultat.