Kodeeri pilt Base64 / Data URI-ks

Andmete URI on URL, mis sisaldab selle asemel otse ressursi andmeid osutage kaugfailile. Selle üldine vorm on andmed:[][;base64],. Pildi jaoks on meil tavaliselt data:image/png;base64,iVBORw0KGgo…. Ressurss on manustatud HTML-i, CSS-i või JSON-i ja laaditakse ilma täiendava HTTP-päringuta.

Levinud motiivid:

• HTP-päringute vähendamine: integreerige ikoon otse CSS-i, mitte ei laadi seda lisaks dokumendile.
• Sisene pildiga meilisignatuur: puudub oht, et pilt kaugsisuna blokeeritakse
• Veebikomponendid / veebitöötajad: kui välise ressursi laadimine põhjustab sageli ulatuse või CORS-i probleemi
• Kohalik salvestusruum (LocalStorage, IndexedDB, andmebaas): avatari pisipildi järjestamine stringiks
• Iseseisvad katkendid: iseseisev HTML-fail, ilma väliste sõltuvusteta

Mõned konkreetsed kontekstid, kus Base64 kujutise kodeerimine on õigustatud:

• SVG tekstisisesed ikoonid CSS-is (background-image: url("data:image/svg+xml;base64,…"))
• Logoga isikupärastatud meiliallkirjad
• E-posti teel jagatud eraldiseisva lehe kiire prototüüpimine
• Iseloomulikud veebikomponendid (üks juurutav fail)
• Brauseripoolne PDF-i genereerimine (jsPDF) koos manustatud pisipiltidega
• Testi andmeid (pilte), mis sisaldavad pilte

Kolm sammu:

1. Laadige üles oma pilt (PNG, JPG, SVG, WebP, GIF) kukkumisala kaudu
2. Klõpsake valikul „Kodeeri”
3. Kopeerige saadud andmete URI spetsiaalse nupuga ja kleepige see oma HTML-i, CSS-i või JSON-i.

Base64 ei ole hõbekuul. Mõned ettevaatusabinõud:

• Base64 suurendab suurust ~33%: 4 ASCII-märki iga 3 binaarbaidi kohta
• Brauser ei salvesta kodeeritud pilte eraldi vahemällu; need laaditakse uuesti koos neid sisaldava HTML/CSS-iga
• Eelistatud piltidele, mille suurus on alla 10 KB; peale selle on väline fail üldiselt tõhusam
• SVG puhul eelistage URL-i kodeeringut (encodeURIComponent kaudu) kui Base64: tulemus on lühem ja parsitav nagu tekst
• Kaasaegsed ehitustööriistad (Webpack, Vite) automatiseerivad Base64 vs Base64 valiku. välise faili konfigureeritava lävesuuruse kaudu

HTML:

    

        CSS:
    
    
.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  laius: 16 pikslit;
  kõrgus: 16 pikslit;
}
    

        JSON (võltsandmed):
    
    
kood>{
  "kasutaja": {
    "nimi": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Mis vahe on Base64 ja kahendkoodi vahel?

Binaarne tähistab faili töötlemata baite. Base64 on kodeering, mis muudab need baidid 64 prinditavas ASCII-märgis (A-Z, a-z, 0-9, +, /). Tekstikontekstid (HTML, JSON, e-post) seda ei tee ei saa kanda kahendkoodi; Base64 lahendab selle probleemi 33% suuruse üldkulude hinnaga.

Miks on minu andmete URI nii pikk?

30 KB suurune binaarkujutis muutub Base64-s ~40 KB. Ja iga märk on ASCII bait, nii et jah, kett on pikk. See on kodeeringule omane. Suurte piltide jaoks säilitage väline fail.

Kas kõik brauserid toetavad andme-URI-sid?

Jah, ilma eranditeta kaasaegsete brauserite seas (Chrome, Firefox, Safari, Edge alates IE8-st isegi). Piirid ajalooline: IE8 piirang on 32 KB. Täna pole veebis enam muret.

Kuidas andme-URI-d dekodeerida?

Meie Base64 pildidekooder teeb vastupidist: kleepige oma andmete URI, valmistage pildifail (PNG, JPG, SVG, WebP) üleslaadimiseks või salvestamiseks valmis.

SVG-de Base64 vs. URL-i kodeering?

SVG puhul tekitab URL-i kodeering (koos encodeURIComponent) lühema stringi kui Base64 ja jääb tekstina loetavaks. See on soovitatav valik CSS-is SVG tekstisisese integreerimisel. Binaarvormingute (PNG, JPG) puhul jääb Base64 kohustuslikuks.

Kas Base64 kodeering mõjutab pildikvaliteeti?

Ei. Kodeering on kadudeta: see on binaarbait ↔ Base64 stringi bijektsioon. pikslid originaali säilitatakse rangelt. Ainult transporditava faili suurus suureneb 33%.