Koduoti paveikslą į Base64 / Data URI

Duomenų URI yra URL, kuriame vietoje yra tiesiogiai ištekliaus duomenys nukreipkite į nuotolinį failą. Bendra jo forma yra duomenys:[][;base64],. Vaizdui paprastai turime duomenys:image/png;base64,iVBORw0KGgo…. Išteklius įterptas į HTML, CSS arba JSON ir įkeliamas be jokios papildomos HTTP užklausos.

Dažni motyvai:

• Sumažinkite HTTP užklausas: integruokite piktogramą tiesiai į CSS, o ne įkelkite ją kartu su dokumentu.
• El. pašto parašas su tiesioginiu vaizdu: nėra rizikos, kad vaizdas bus užblokuotas kaip nuotolinis turinys
• Žiniatinklio komponentai / žiniatinklio darbuotojai: kai įkeliant išorinį šaltinį dažnai kyla aprėpties arba CORS problema
• Vietinė saugykla („LocalStorage“, „IndexedDB“, duomenų bazė): serijos pseudoportreto miniatiūra į eilutę
• Savarankiški fragmentai: savarankiškas HTML failas be išorinių priklausomybių

Kai kurie konkretūs kontekstai, kuriuose „Base64“ vaizdo kodavimas yra pagrįstas:

• SVG tiesioginės piktogramos CSS (fono vaizdas: url("data:image/svg+xml;base64,..."))
• Suasmeninti el. pašto parašai su logotipu
• Greitas atskiro puslapio, bendrinamo el. paštu, prototipas
• Atskirai žiniatinklio komponentai (vienas diegiamas failas)
• Naršyklės pusės PDF generavimas (jsPDF) su įterptomis miniatiūromis
• Tikrinti duomenis (pavyzdžius), kuriuose yra vaizdų

Trys žingsniai:

1. Įkelkite savo vaizdą (PNG, JPG, SVG, WebP, GIF) per nuleidimo zoną
2. Spustelėkite „Koduoti“
3. Nukopijuokite gautą duomenų URI naudodami tam skirtą mygtuką ir įklijuokite jį į HTML, CSS arba JSON.

Base64 nėra sidabrinė kulka. Kai kurios atsargumo priemonės:

• Base64 padidina dydį ~33 %: 4 ASCII simboliai kas 3 dvejetainius baitus
• Koduoti vaizdai nėra atskirai saugomi naršyklės talpykloje; jie iš naujo įkeliami su HTML/CSS, kuriame jie yra
• Pageidautina vaizdams, mažesniems nei 10 KB; be to, išorinis failas paprastai yra efektyvesnis
• Naudojant SVG, pirmenybę teikite URL kodavimui (per encodeURIComponent), o ne Base64: rezultatas yra trumpesnis ir lieka analizuojamas kaip tekstas
• Šiuolaikiniai kūrimo įrankiai („Webpack“, „Vite“) automatizuoja „Base64“ ir „Base64“ pasirinkimą. išorinį failą per konfigūruojamą slenksčio dydį

HTML:

        CSS:
    

    
.icon {
  background: url("duomenys: vaizdas/svg+xml;base64,PHN2ZyB4bWxucz0i...") nesikartoti;
  plotis: 16px;
  aukštis: 16px;
}
    

        JSON (bandyti duomenys):
    
    
{
  "vartotojas": {
    "vardas": "Adrien",
    „avataras“: „data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…“
  }
}

Kuo skiriasi Base64 ir dvejetainė?

Dvejetainis reiškia neapdorotus failo baitus. Base64 yra kodavimas, kuris transformuoja šiuos baitus 64 spausdinamuose ASCII simboliuose (A-Z, a-z, 0-9, +, /). Teksto kontekstai (HTML, JSON, el. paštas) ne negali nešti dvejetainio; „Base64“ išsprendžia šią problemą už 33% pridėtinių išlaidų.

Kodėl mano duomenų URI toks ilgas?

30 KB vaizdas dvejetainiu formatu tampa ~ 40 KB Base64. Ir kiekvienas simbolis yra ASCII baitas, taigi taip, grandinė ilga. Tai būdinga kodavimui. Dideliems vaizdams pasilikite išorinį failą.

Ar visos naršyklės palaiko duomenų URI?

Taip, be išimties tarp šiuolaikinių naršyklių („Chrome“, „Firefox“, „Safari“, „Edge“ net nuo IE8). Ribos istorinis: IE8 ribota iki 32 KB. Šiandien žiniatinklyje nebereikia nerimauti.

Kaip iššifruoti duomenų URI?

Mūsų Base64 vaizdo dekoderis veikia priešingai: įklijuokite duomenų URI, paruoškite vaizdo failą (PNG, JPG, SVG, WebP) įkelti arba išsaugoti.

Base64 ir URL kodavimas SVG?

SVG URL kodavimas (su encodeURIComponent) sukuria trumpesnę eilutę nei Base64 ir lieka skaitomas kaip tekstas. Tai rekomenduojamas CSS pasirinkimas integruojant SVG eilutę. Dvejetainiams formatams (PNG, JPG) Base64 išlieka privalomas.

Ar „Base64“ kodavimas turi įtakos vaizdo kokybei?

Ne. Kodavimas yra be nuostolių: tai dvejetainis baitas ↔ Base64 eilutės bijekcijos. Pikseliai originalas yra griežtai saugomas. Tik perkeliamo failo dydis padidėja 33%.