Base64
Image Data URL
⚠️ Large image may freez the browser
Koder PNG til Base64 til CSS
Konverter PNG-billeder til Base64 eller DataURL formater. Indlejr direkte i CSS eller JavaScript uden eksterne filer. Større filer kan påvirke ydeevnen; mindre størrelser anbefales. Base64 kodning strømliner integration med webaktiver, hvilket reducerer afhængigheden af eksterne ressourcer. DataURL format forenkler kode struktur for dynamisk indhold levering.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Konverter billeder til Base64 kode
1
Upload PNG Billede
Upload dit PNG-billede ved at klikke eller trække det ind i upload-området.
2
Vælg Kodningsformat
Vælg enten 'Base64'- eller 'DataURL'-fanen for at vælge dit ønskede kodningsformat.
3
Se Base64 Data
Den Base64 eller DataURL-repræsentation af dit billede vil blive vist i tekstområdet neden for tabs.
4
Kopiér Kodet
Klik på 'Kopiér'-knappen for at kopiere den kodede tekst til dit udklipsholder til brug i din CSS eller JavaScript.
Indsæt PNG'er direkte i din CSS
Inkluderer et lille billede direkte i din CSS uden at administrere separate filer kan opnås ved at konvertere PNG'er til Base64 eller DataURL formater. encode-png-to-base64-for-css værktøjet strømliner din webudviklingsworkflow og reducerer HTTP anmodninger. Dette resulterer i renere, mere effektiv kode og hurtigere sideindlæsningstider.
Reducér filstørrelse og HTTP-anmodninger
Dette værktøj reducerer antallet af filer, din hjemmeside har brug for at indlæse ved at konvertere PNG-billeder til Base64 eller DataURL-formater. At indlejre billeder direkte i din CSS eller JavaScript reducerer HTTP-anmodninger, hvilket kan forbedre sideindlæsningstiden. Denne tilgang optimerer hjemmesideydelsen ved at minimere eksterne filafhængigheder.
Ofte Stillede Spørgsmål
Hvad er en Base64 DataURL og hvorfor skulle jeg bruge den?
En Base64 DataURL er en måde at repræsentere et billede som en streng af tegn. Det giver dig mulighed for at indlejre billeder direkte i din CSS eller JavaScript kode, uden at skulle indlæse dem fra eksterne filer. Det kan være nyttigt til små ikoner eller billeder.
Hvordan bruger jeg den genererede Base64 eller DataURL?
Kopier blot koden, der er angivet efter at du har konverteret dit billede, og indsæt den i din CSS eller JavaScript. For eksempel i CSS kunne du bruge det sådan her: background-image: url('data:image/png;base64,...');
Hvilke billedformater understøtter dette værktøj?
Dette værktøj er specifikt designet til PNG-billeder. Andre formater kan muligvis ikke konverteres korrekt.
Hvorfor anbefales store billeder ikke?
Store billeder skaber meget lange Base64 strenge, hvilket kan sænke din computer og øge sideindlæsningstider. Det er bedst at bruge dette værktøj til mindre billeder.
Er der en grænse for størrelsen af det billede, jeg kan uploade?
Selvom der ikke er nogen streng filstørrelimit, vil ydeevnen forringes med større billeder. Vi anbefaler at bruge mindre PNG-filer til de bedste resultater.