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

BMP till PNG

Konvertera BMP-filer till PNG i webbläsaren. Förlustfritt, bevarar färgdjup och lägger till valfri transparens från BMP-filens ursprungliga alfakanal.

GIF-skapare

Gör en bildsekvens eller en kort video till en animerad GIF. Ställ in bildfrekvens, loopar och storlek före export.

QR-kodsgenerator

Skapa en QR-kod av text eller en URL i webbläsaren och ladda ned den som PNG.

Streckkodsgenerator

Skapa en 1D-streckkod i webbläsaren i Code 128, EAN, UPC, ITF-14 och andra format som stöds och ladda ned den som SVG eller PNG.

Memgenerator

Lägg till en övertext och undertext på en JPG-, PNG- eller WebP-bild. Ställ in typsnitt, färger och kontur och ladda ned din mem som PNG.

Bildstorleksändrare för sociala medier

Ändra storlek på en bild till inbyggda sociala medie-presets för Instagram, Facebook, X, LinkedIn, YouTube, Pinterest och TikTok. Förhandsgranska varje PNG och ladda ned de storlekar du behöver.