Softonic

Base64-bildencoder

Steg 1 / 3 Dra din bild hit

Bearbetar...

Att lägga in en liten bild som en Base64-data-URI kan undvika en HTTP-begäran och håller resursen tillsammans med den HTML eller CSS som använder den. Det här webbläsarverktyget godtar validerade PNG-, JPEG-, GIF- och WebP-filer samt SVG-text som kan tolkas med ett <svg>-rotelement, upp till 5 MiB. Det skapar rå Base64-, data-URI-, CSS-, HTML- eller JSON-utdata. Kontrollera att vald form passar målet. SVG får bara en strukturkontroll och kan fortfarande innehålla aktivt eller osäkert innehåll.

Så kodar du en bild

  1. 1

    Släpp din bild

    Välj en PNG-, JPG-, GIF-, WebP- eller SVG-fil på högst 5 MiB. Rasterbilder får vara högst 16 384 pixlar längs en sida och innehålla högst 33 554 432 pixlar totalt. Den kodade texten hålls under 7 MiB.

  2. 2

    Kodningen körs i webbläsaren

    Bildens bytes läses, Base64-kodas och prefixas med rätt `data:` URI-header.

  3. 3

    Välj utdataformat

    Rå Base64, CSS-regeln `background-image`, HTML-taggen `<img>` eller en JSON-säker sträng.

  4. 4

    Kopiera resultatet

    Klistra in i ett stylesheet, en mall eller en API-body.

När inline-bilder är värda det

Kandidater att bedöma och testa före inline-användning:

  • Ikoner under 2 KB - Sparar en HTTP-begäran med försumbar overhead.
  • E-postmallar - Stödet för data-URI varierar mellan e-postklienter. Testa målklienterna och använd CID-bilder eller lagrade bilder vid behov.
  • Hero-platshållare (LQIP) - Lågkvalitativ suddad version inline, full bild laddas senare.
  • SVG:er som används en gång - SVG är text; en korrekt procentkodad data-URI kan vara mindre än Base64 beroende på tecken och formatering.

Dåliga kandidater:

  • Stora bilder - Att blåsa upp en 500 KB-bild med 33% ger 166 KB slöseri.
  • Bilder som återanvänds på flera sidor - Inline stänger av webbläsarcache mellan routes.
  • Kritisk CSS - Inline av tunga bilder sväller den kritiska laddningsvägen.

Storleksförväntningar

Bildstorlek Base64-strängens storlek
500 bytes ~680 tecken
2 KB ~2,7 KB
20 KB ~27 KB
200 KB ~270 KB

Data URI-format

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==
  • data:-schema
  • MIME-typ
  • ;base64,-indikator
  • De kodade bytes

SVG är ett specialfall

Base64 ökar de ursprungliga SVG-byte med ungefär en tredjedel före omgivande syntax, medan procentkodning bara förlänger tecken som måste undantas. Vilken form som är kortast beror på SVG-filen. Textformen ska använda ett korrekt procentkodat värde av typen data:image/svg+xml,.... Den fristående token ;utf8 är inte en standardparameter för data-URI, och råa tecken som #, %, citattecken eller blanktecken kan förstöra URI:n. Verktyget kontrollerar SVG-strukturen men tar inte bort skript, händelsehanterare eller externa referenser. Granska därför SVG från okända källor före användning.

Vanliga frågor

Base64-text omfattar ungefär 4/3 av källans byte, plus data-URI eller omgivande kod. Prestandan beror på multiplexering, komprimering, cache, återanvändning, paketstorlek och innehållssäkerhetspolicy. Mät den faktiska sidan; det finns ingen allmän gräns på 4 KB.

Inline-användning i sig har ingen garanterad SEO-effekt. En CSS-bakgrund saknar semantik för alternativtext. Använd ett HTML-element <img> med meningsfull alt-text när bilden förmedlar information och håll dekorativa bakgrunder utanför innehållsstrukturen.

Nej. Encodern läser filen lokalt med FileReader API och producerar Base64-strängen i webbläsaren. Inget lämnar din dator.

Ja - använd Base64 till bild-verktyget för att omvandla en data:image/... URI tillbaka till en nedladdningsbar fil.

Relaterade verktyg

Linjerat papper-generator

Skapa utskrivbart linjerat papper gratis. Välj college-, bred eller smal linjering, ange radavstånd i mm, pappersstorlek och en marginallinje, och skriv sedan ut eller ladda ner SVG:n.

Avatarskapare

Skapa en platt illustrerad avatar i webbläsaren. Välj hudton, hår, ögon, mun, kläder, bakgrund och ett valfritt visningsnamn och hämta sedan SVG eller PNG.

Skapa korsstygnsmönster

Gör JPEG, PNG eller WebP till ett utskrivbart korsstygnsdiagram med 10–150 stygn, 2–40 egna färger, symboler, exakta antal och tygmått.

Lottsedelskapare

Skapa privata ark med tvådelade, löpande numrerade lottsedlar för ett informellt evenemang. Skriv ut alla A4- eller US Letter-sidor, eller hämta den aktuella sidan.

Komprimera SVG

Ta bort kommentarer, editor-metadata, oanvända attribut och blanksteg från SVG-filer. Behåller den visuella utdatan identisk, minskar storleken med 40-80 %.

Skapa notpapper

Skapa notpapper att skriva ut: tomma notsystem, G-klav eller F-klav, pianosystem eller gitarrtabulatur. Välj antal, linjeavstånd, A4 eller Letter och marginaler och ladda ned PDF eller SVG.

Verktyget finns på andra språk