Kodēt attēlu uz Base64 / Data URI

Datu URI ir vietrādis URL, kas tieši satur resursa datus norādiet uz attālo failu. Tās vispārējā forma ir dati:[][;base64],. Attiecībā uz attēlu, mums parasti ir data:image/png;base64,iVBORw0KGgo…. Resurss ir iegults HTML, CSS vai JSON un ielādēts bez papildu HTTP pieprasījuma.

Izplatītas motivācijas:

• Samaziniet HTTP pieprasījumus: integrējiet ikonu tieši CSS, nevis ielādējiet to papildus dokumentam.
• E-pasta paraksts ar iekļautu attēlu: nav riska, ka attēls tiks bloķēts kā attāls saturs
• Tīmekļa komponenti/tīmekļa darbinieki: ja ārēja resursa ielāde bieži rada tvēruma vai CORS problēmu
• Lokālā krātuve (LocalStorage, IndexedDB, datu bāze): iemiesojuma sīktēla serializēšana virknē
• Patstāvīgi fragmenti: autonoms HTML fails bez ārējām atkarībām

Daži konkrēti konteksti, kuros Base64 attēla kodēšana ir pamatota:

• SVG iekļautās ikonas CSS (fona attēls: url("data:image/svg+xml;base64,…"))
• Personalizēti e-pasta paraksti ar logotipu
• Ātra prototipa izveide atsevišķai lapai, kas tiek kopīgota pa e-pastu
• Atsevišķi tīmekļa komponenti (viens izvietojams fails)
• PDF ģenerēšana pārlūkprogrammas pusē (jsPDF) ar iegultiem sīktēliem
• Pārbaudes dati (izspēles), kas satur attēlus

Trīs soļi:

1. Augšupielādējiet attēlu (PNG, JPG, SVG, WebP, GIF), izmantojot nomešanas zonu
2. Noklikšķiniet uz “Kodēt”
3. Nokopējiet iegūto datu URI, izmantojot tam paredzēto pogu, un ielīmējiet to savā HTML, CSS vai JSON kodā.

Base64 nav sudraba lode. Daži piesardzības pasākumi:

• Base64 palielina izmēru par ~33%: 4 ASCII rakstzīmes uz katriem 3 binārajiem baitiem
• Pārlūkprogrammā atsevišķi netiek saglabāti kodēti attēli. tie tiek atkārtoti ielādēti ar HTML/CSS, kas tos satur
• Ieteicams attēliem, kas mazāki par 10 KB; turklāt ārējais fails parasti ir efektīvāks
• SVG formātā dodiet priekšroku URL kodēšanai (izmantojot encodeURIComponent), nevis Base64: rezultāts ir īsāks un paliek parsējams kā teksts.
• Mūsdienu veidošanas rīki (Webpack, Vite) automatizē Base64 un Base64 izvēli. ārējo failu, izmantojot konfigurējamu sliekšņa lielumu

HTML:

    

        CSS:
    
    
.icon {
  fons: url("dati:attēls/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  platums: 16 pikseļi;
  augstums: 16 pikseļi;
}
    

        JSON (fiktīvie dati):
    
    
{
  "lietotājs": {
    "name": "Adrien",
    “iemiesojums”: “data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…”
  }
}

Kāda ir atšķirība starp Base64 un bināro?

Binārais apzīmē neapstrādātus faila baitus. Base64 ir kodējums, kas pārveido šos baitus 64 drukājamās ASCII rakstzīmēs (A-Z, a-z, 0-9, +, /). Teksta konteksti (HTML, JSON, e-pasts) to nedara nevar nest bināro; Base64 atrisina šo problēmu, maksājot 33% lielu pieskaitāmo izdevumu.

Kāpēc mans datu URI ir tik garš?

30 KB attēls binārajā formātā kļūst par ~ 40 KB Base64. Un katra rakstzīme ir ASCII baits, tāpēc jā, ķēde ir gara. Tas ir raksturīgs kodējumam. Lieliem attēliem saglabājiet ārēju failu.

Vai visas pārlūkprogrammas atbalsta datu URI?

Jā, bez izņēmuma mūsdienu pārlūkprogrammās (Chrome, Firefox, Safari, Edge kopš IE8 pat). Ierobežojumi vēsturisks: IE8 ierobežots līdz 32 KB. Šodien tīmeklī vairs nav jāuztraucas.

Kā atšifrēt datu URI?

Mūsu Base64 attēlu dekodētājs darbojas pretēji: ielīmējiet savu datu URI, sagatavojiet attēla failu (PNG, JPG, SVG, WebP) augšupielādei vai saglabāšanai.

Base64 salīdzinājumā ar URL kodējumu SVG failiem?

SVG URL kodējums (ar encodeURIComponent) rada īsāku virkni nekā Base64 un paliek lasāms kā teksts. Šī ir ieteicamā izvēle CSS, integrējot SVG iekļauto. Binārajiem formātiem (PNG, JPG) Base64 joprojām ir obligāts.

Vai Base64 kodējums ietekmē attēla kvalitāti?

Nē. Kodējums ir bez zudumiem: tas ir binārs baits ↔ Base64 virknes bijection. Pikseļi oriģināli tiek stingri saglabāti. Tikai transportētā faila lielums palielinās par 33%.