Vad är Base64 och när ska du använda det för att bädda in bilder?

Om du har ägnat någon tid åt att arbeta med modern webbutveckling, har du förmodligen stött på en till synes oändlig, kaotisk sträng av tecken som börjar med data:image/png;base64, följt av rent trassel. Detta är en Base64-kodad bild.

Exakt vad är Base64-kodning?

Base64 är i sin kärna ett binärt-till-text-kodningsschema. Den tar binära data (som en bild, en ljudfil eller ett kompilerat dokument) och översätter det till ett ASCII-strängformat. Namnet "Base64" kommer från det faktum att det använder ett alfabet på 64 tecken (A-Z, a-z, 0-9, + och /) för att representera data.

Denna konvertering är oerhört användbar eftersom många internetprotokoll (som HTTP, HTML och CSS) är utformade specifikt för att hantera vanlig text säkert. Genom att konvertera binär data till text garanterar vi att data kan överföras över dessa protokoll utan att skadas.

När ska du bädda in bilder med Base64?

Att bädda in Base64-strängar direkt i din HTML (`<img src="data:image...">`) eller din CSS (`background-image: url("data:image...")`) istället för att använda en standard-URL kan ha betydande fördelar, men bara i mycket specifika användningsfall:

• Mikroikoner och spinnare: Om du har små UI-element (som en 1KB laddningsspinnare eller en bock), eliminerar du att webbläsaren behöver göra en separat HTTP-begäran för att hämta bildfilen om du kodar dem som Base64. Detta påskyndar renderingen av kritiskt användargränssnitt.
• HTML-e-postmeddelanden: Många e-postklienter blockerar extern bildladdning av integritetsskäl. Att bädda in logotypen direkt i HTML-koden via Base64 kan kringgå dessa block, vilket säkerställer att din e-post ser perfekt ut.
• Webbappar med en fil: Om du bygger ett verktyg som behöver distribueras som en enda ".html"-fil som fungerar helt offline, är det enda sättet att paketera det korrekt att bädda in alla tillgångar via Base64.

När bör du UNDVIKA Base64?

Den största nackdelen med Base64-kodning är att den ökar filstorleken på tillgången med ungefär 33 %. En bild på 1 MB blir en textsträng på 1,33 MB.

Dessutom kan webbläsare inte cachelagra en Base64-sträng oberoende. Om du bäddar in en massiv Base64-sträng i din CSS-fil, måste webbläsaren ladda ner den massiva CSS-filen vid varje sidladdning, och att analysera stora textsträngar blockerar huvudtråden, vilket orsakar allvarlig fördröjning (dålig Time to Interactive).

Den gyllene regeln: Koda aldrig Base64 för stora fotografier eller hjältebilder. Koda endast små SVG-ikoner eller mikroskopiska rasterfiler där overheaden för en HTTP-förfrågan är värre än 33 % filstorleksstraff.