Hva er Base64 og når bør du bruke det til å bygge inn bilder?

Hvis du har brukt tid på å jobbe med moderne nettutvikling, har du sannsynligvis møtt en tilsynelatende endeløs, kaotisk tegnrekke som starter med data:image/png;base64, etterfulgt av rent sludder. Dette er et Base64-kodet bilde.

Hva er egentlig Base64-koding?

I kjernen er Base64 et binært-til-tekst-kodingsskjema. Den tar binære data (som et bilde, en lydfil eller et kompilert dokument) og oversetter det til et ASCII-strengformat. Navnet "Base64" kommer fra det faktum at det bruker et alfabet på 64 tegn (A-Z, a-z, 0-9, + og /) for å representere dataene.

Denne konverteringen er utrolig nyttig fordi mange internettprotokoller (som HTTP, HTML og CSS) er designet spesielt for å håndtere ren tekst trygt. Ved å konvertere binære data til tekst, garanterer vi at dataene kan overføres på tvers av disse protokollene uten å bli ødelagt.

Når bør du legge inn bilder med Base64?

Å bygge inn Base64-strenger direkte i HTML-en din (`<img src="data:image...">`) eller CSS-en din (`background-image: url("data:image...")`) i stedet for å bruke en standard URL kan ha betydelige fordeler, men bare i svært spesifikke brukstilfeller:

• Mikroikoner og spinnere: Hvis du har små brukergrensesnittelementer (som en 1KB lastespinner eller et hakemerke), eliminerer koding av dem som Base64 behovet for at nettleseren skal lage en separat HTTP-forespørsel for å hente bildefilen. Dette øker hastigheten på gjengivelsen av kritisk brukergrensesnitt.
• HTML-e-poster: Mange e-postklienter blokkerer ekstern bildelasting av personvernhensyn. Å bygge inn logoen direkte i HTML-en via Base64 kan omgå disse blokkene, og sikre at e-posten din ser perfekt ut.
• Nettapper med én fil: Hvis du bygger et verktøy som må distribueres som en enkelt ".html"-fil som fungerer helt offline, er det å bygge inn alle eiendeler via Base64 den eneste måten å pakke det riktig.

Når bør du UNNGÅ Base64?

Den største ulempen med Base64-koding er at den øker filstørrelsen på ressursen med omtrent 33 %. Et bilde på 1 MB blir en tekststreng på 1,33 MB.

Videre kan ikke nettlesere bufre en Base64-streng uavhengig. Hvis du legger inn en massiv Base64-streng i CSS-filen din, må nettleseren laste ned den massive CSS-filen ved hver sideinnlasting, og analysering av store tekststrenger blokkerer hovedtråden, og forårsaker alvorlig etterslep (dårlig tid til interaktiv).

Den gylne regel: Aldri Base64-kode store fotografier eller heltebilder. Kod bare små SVG-ikoner eller mikroskopiske rasterfiler der overheaden til en HTTP-forespørsel er verre enn 33 % filstørrelsesstraff.