Hvad er Base64, og hvornår skal du bruge det til at integrere billeder?

Hvis du har brugt noget tid på at arbejde med moderne webudvikling, har du sandsynligvis stødt på en tilsyneladende endeløs, kaotisk række af tegn, der starter med data:image/png;base64, efterfulgt af rent volapyk. Dette er et Base64-kodet billede.

Hvad er Base64-kodning helt præcist?

Base64 er i sin kerne et binært-til-tekst-kodningsskema. Det tager binære data (som et billede, en lydfil eller et kompileret dokument) og oversætter det til et ASCII-strengformat. Navnet "Base64" kommer fra det faktum, at det bruger et alfabet på 64 tegn (A-Z, a-z, 0-9, + og /) til at repræsentere dataene.

Denne konvertering er utrolig nyttig, fordi mange internetprotokoller (som HTTP, HTML og CSS) er designet specifikt til at håndtere almindelig tekst sikkert. Ved at konvertere binære data til tekst garanterer vi, at dataene kan overføres på tværs af disse protokoller uden at blive beskadiget.

Hvornår skal du integrere billeder med Base64?

Indlejring af Base64-strenge direkte i din HTML (`<img src="data:image...">`) eller din CSS (`background-image: url("data:image...")`) i stedet for at bruge en standard-URL kan have betydelige fordele, men kun i meget specifikke brugstilfælde:

• Mikro-ikoner og spinnere: Hvis du har små brugergrænsefladeelementer (som en 1KB indlæsningsspinner eller et flueben), fjerner kodning af dem som Base64 behovet for, at browseren laver en separat HTTP-anmodning for at hente billedfilen. Dette fremskynder gengivelsen af ​​kritisk UI.
• HTML-e-mails: Mange e-mail-klienter blokerer ekstern billedindlæsning af privatlivsmæssige årsager. Indlejring af logoet direkte i HTML via Base64 kan omgå disse blokke, hvilket sikrer, at din e-mail ser perfekt ud.
• Enkelt-fil-webapps: Hvis du bygger et værktøj, der skal distribueres som en enkelt `.html`-fil, der fungerer helt offline, er indlejring af alle aktiver via Base64 den eneste måde at pakke det korrekt på.

Hvornår bør du UNDGÅ Base64?

Den største ulempe ved Base64-kodning er, at den øger filstørrelsen på aktivet med ca. 33 %. Et billede på 1 MB bliver til en tekststreng på 1,33 MB.

Desuden kan browsere ikke cache en Base64-streng uafhængigt. Hvis du indlejrer en massiv Base64-streng i din CSS-fil, skal browseren downloade den massive CSS-fil ved hver sideindlæsning, og parsing af enorme tekststrenge blokerer hovedtråden, hvilket forårsager alvorlig forsinkelse (dårlig Time to Interactive).

Den gyldne regel: Base64-kode aldrig store fotografier eller heltebilleder. Kod kun små SVG-ikoner eller mikroskopiske rasterfiler, hvor overheaden for en HTTP-anmodning er værre end 33 % filstørrelsesstraf.