Base64
Image Data URL
⚠️ Large image may freez the browser
Koda PNG till Base64 för CSS
Konvertera PNG-bilder till Base64 eller DataURL-format. Inbädda direkt i CSS eller JavaScript utan externa filer. Större filer kan påverka prestanda; mindre storlekar rekommenderas. Base64-kodning förenklar integration med webbassets, minskar beroendet av externa resurser. DataURL-format förenklar kodstruktur för dynamisk innehållstilldelning.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Konvertera bilder till bas64 kod
1
Ladda upp PNG-bild
Ladda upp din PNG-bild genom att klicka eller dra den till uppladdningsområdet.
2
Välj Kodningsformat
Välj antingen fliken 'Base64' eller 'DataURL' för att välja önskat kodningsformat.
3
Visa Bas64 Data
Bas64 eller DataURL-representationen av ditt bild kommer att visas i textområdet nedanför flikarna.
4
Kopiera Kodad Text
Klicka på knappen 'Kopiera' för att kopiera den kodade texten till ditt klippbord för användning i din CSS eller JavaScript.
Integrera PNG-filer direkt i din CSS
Inkludera en liten bild direkt i din CSS utan att hantera separata filer kan uppnås genom att konvertera PNG-filer till Base64 eller DataURL-format. Verktyget encode-png-to-base64-for-css förenklar din webbutvecklingsarbetsflöde och minskar HTTP-förfrågningar. Detta resulterar i renare, mer effektiv kod och snabbare sidladdningstider.
Minska filstorlek och HTTP-förfrågningar
Detta verktyg minskar antalet filer som din webbplats behöver ladda genom att konvertera PNG-bilder till Base64 eller DataURL-format. Att inbädda bilder direkt i din CSS eller JavaScript minskar HTTP-förfrågningar, vilket kan förbättra sidans laddningstid. Denna metod optimerar webbplatsens prestanda genom att minimera externa filberoenden.
Vanliga Frågor
Vad är en Base64 DataURL och varför skulle jag använda det?
Ett DataURL för Base64 är ett sätt att representera en bild som en sträng av tecken. Det låter dig bädda in bilder direkt i din CSS eller JavaScript-kod, utan att behöva ladda dem från externa filer. Detta kan vara användbart för små ikoner eller bilder.
Hur använder jag den genererade Base64 eller DataURL?
Kopiera helt enkelt koden som tillhandahålls efter att du har konverterat din bild och klistra in den i din CSS eller JavaScript. Till exempel, i CSS kan du använda den så här: background-image: url('data:image/png;base64,...');
Vilka bildformat stöder detta verktyg?
Detta verktyg är specifikt utformat för PNG-bilder. Andra format kanske inte konverteras korrekt.
Varför rekommenderas inte stora bilder?
Stora bilder skapar mycket långa Base64-strängar, vilket kan sakta ner din dator och öka sidladdningstiderna. Det är bäst att använda detta verktyg för mindre bilder.
Finns det en gräns för hur stor bilden jag kan ladda upp?
Med tanke på att det inte finns någon strikt filstorleksgräns, kommer prestandan att försämras med större bilder. Vi rekommenderar att använda mindre PNG-filer för bästa resultat.